00 · Fundamentos

DOM, HTML y CSS

Antes de las clases de Tailwind conviene tener claros estos tres conceptos, porque todo lo demás en esta guía es una forma de manipularlos: HTML describe contenido y estructura, el navegador lo convierte en un DOM (un árbol de objetos en memoria), y CSS le dice a ese árbol cómo verse.

¿Qué es el DOM?

DOM significa Document Object Model. Cuando el navegador recibe un archivo HTML, no lo deja como texto plano: lo parsea y arma una estructura de árbol en memoria, donde cada etiqueta se convierte en un "nodo". Ese árbol es el DOM — y es sobre ese árbol (no sobre el archivo HTML original) que trabajan CSS y JavaScript.

html

head

title

Anatomía de una etiqueta HTML

Una etiqueta tiene un nombre, atributos opcionales (pares clave='valor' que le dan más información o comportamiento), y contenido entre la apertura y el cierre. Algunas etiquetas no tienen cierre ni contenido (se llaman 'self-closing' o 'void').

Texto visible

<a href="/blog" class="link" target="_blank">
  Texto visible
</a>

<!-- Void element: no tiene cierre -->
<img src="/foto.jpg" alt="..." />

→El nombre de la etiqueta (a, div, img...) define QUÉ es el elemento semánticamente. Los atributos (class, id, href...) lo configuran, pero no cambian su significado.
→Elementos void comunes: img, input, br, hr, meta — nunca llevan etiqueta de cierre.

Sintaxis de una regla CSS

Una regla CSS junta un selector (a qué nodos del DOM aplica) con un bloque de declaraciones (propiedad: valor;). Tailwind genera reglas exactamente así por debajo — cada clase utilitaria es, en el fondo, una de estas reglas ya escrita.

.tarjeta {
padding: 1rem;
}

selector {
  propiedad: valor;
  otra-propiedad: otro-valor;
}

/* Ejemplo real */
.tarjeta {
  padding: 1rem;
  border-radius: 0.5rem;
}

→Cuando escribes class="p-4 rounded-lg" en Tailwind, estás usando dos reglas CSS ya escritas de antemano (.p-4 { padding: 1rem }, .rounded-lg { border-radius: 0.5rem }) en vez de escribir tu propia regla .tarjeta.

La "C" de CSS: el cascade

Cuando dos reglas distintas apuntan al mismo elemento y se contradicen, el navegador necesita decidir cuál gana. Ese proceso de desempate se llama cascade(cascada) y depende, en orden de importancia, de: origen (CSS del navegador vs. del sitio vs. !important), especificidad(qué tan "puntual" es el selector) y orden de aparición (el que está más abajo en el archivo gana si todo lo demás es igual).

Especificidad, de menor a mayor:

p { }<.clase { }<#id { }<style="..."<!important

→ Con Tailwind casi nunca peleas con especificidad porque casi todo son clases (mismo nivel de especificidad) y el "empate" lo resuelve el orden en que Tailwind genera el CSS, no el orden en que escribes las clases en el HTML.
→ Por eso, en Tailwind, escribir class="text-red-500 text-blue-500" no funciona como "el último gana" de forma confiable — para eso existen utilidades como twMerge en proyectos con lógica condicional de clases.

Cómo se conecta todo: el pipeline de render

A grandes rasgos, así arma el navegador lo que ves en pantalla, en orden:

HTML

→ DOM

CSS

→ CSSOM

DOM + CSSOM

Render Tree

Layout

tamaños y posiciones

Paint

píxeles en pantalla

→ El Render Tree es parecido al DOM, pero sin los nodos con display: none (nunca se pintan, así que ni se calculan).
→ Cambiar propiedades de layout (width, margin, position...) obliga a recalcular Layout + Paint — más caro. Cambiar solo propiedades visuales como opacity o transform puede saltarse Layout — por eso son las preferidas para animaciones fluidas.