Mentalidad Utility-First y primeros pasos
Qué resuelve Tailwind y qué no
Tailwind no es un sustituto “más rápido” de CSS ni un framework de componentes. Es un sistema de composición. En lugar de escribir reglas que describen estilos y luego aplicarlas, se describen decisiones visuales directamente en el marcado.
CSS tradicional es escribir una receta y luego cocinar.
Tailwind es cocinar directamente siguiendo una lista de ingredientes medida.
Qué resuelve:
- Elimina la invención constante de nombres de clases.
- Reduce el CSS muerto y desalineado.
- Obliga a usar escalas consistentes (spacing, color, tipografía).
Qué no resuelve:
- No diseña por ti.
- No reemplaza criterios de UX, accesibilidad o jerarquía visual.
- No evita malas decisiones de layout.
Instalación real en proyectos modernos
Tailwind es una herramienta de build, no una hoja de estilos estática. Funciona porque analiza tu código y genera solo lo que usas.
Pipeline mental:
Clases usadas → análisis → generación → CSS final
Ejemplo mínimo con Vite:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
// tailwind.config.js
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Cada directiva tiene un propósito claro:
base: normalización y estilos base.components: capas reutilizables (opcional).utilities: decisiones atómicas.
Flujo de trabajo mental con Tailwind
Con Tailwind no se “piensa en estilos”, se piensa en estructura y decisiones.
Orden mental correcto:
- Layout (flex, grid, flow)
- Espaciado
- Tamaño
- Color
- Estados
Error común: empezar por colores o sombras.
Primero se construye el esqueleto. Luego la piel.
Estructura mínima de proyecto
Tailwind no elimina CSS, elimina CSS improvisado.
Estructura mental mínima:
- Configuración: escalas y tokens.
- HTML/JSX: composición visual.
- CSS extra: solo cuando hay patrón repetido.
Ejemplo:
src/
├─ styles/
│ └─ input.css
├─ components/
├─ pages/
Errores típicos de arranque
Cuando Tailwind “no funciona”, casi siempre es uno de estos puntos:
| Problema | Causa real |
|---|---|
| No aplica estilos | content mal configurado |
| Funciona en dev, no en prod | clases dinámicas no detectadas |
| CSS enorme | purge mal definido |
| Clases ignoradas | orden o variante incorrecta |