Framework CSS utility-first que permite construir diseños directamente en el markup usando clases atómicas, eliminando la necesidad de escribir CSS custom.
Tailwind CSS es un framework CSS utility-first. En lugar de escribir clases semánticas y CSS custom, compones diseños usando clases atómicas directamente en el HTML: flex, p-4, text-lg, bg-blue-500.
| Enfoque CSS | Ejemplo | Ventaja | Desventaja |
|---|---|---|---|
| CSS tradicional | .card-header { ... } | Control total, semántico | Crece sin límite, naming difícil |
| CSS Modules | styles.cardHeader | Scoped por defecto | Un archivo por componente |
| CSS-in-JS | styled(Component) | Dinámico, co-ubicado | Runtime overhead, bundle size |
| Tailwind | class="flex p-4 rounded" | Sin naming, purge automático | Clases largas en el markup |
Beneficios específicos:
md:, dark:)La versión 4 introduce:
tailwind.config.js)jonmatum.com usa Tailwind CSS v4 con custom properties para colores (--color-bg, --color-fg, etc.) y dark mode only.
Tailwind CSS cambió la forma de escribir estilos al eliminar la abstracción de clases semánticas. Las utility classes permiten construir interfaces directamente en el markup, con un sistema de diseño consistente y un bundle CSS mínimo gracias al tree-shaking automático.
Biblioteca de JavaScript para construir interfaces de usuario mediante componentes declarativos y reutilizables, con un ecosistema que abarca desde SPAs hasta aplicaciones full-stack con Server Components.
Colección de componentes reutilizables, patrones y guías que aseguran consistencia visual y de interacción en productos digitales a escala.
Framework de React para aplicaciones web full-stack con Server Components, routing basado en archivos, SSR/SSG y optimizaciones de rendimiento integradas.
Crónica de construir un segundo cerebro con grafo de conocimiento, pipeline bilingüe y endpoints para agentes — en días, no semanas, y lo que eso enseña sobre la brecha entre teoría y sistemas que funcionan.