Conceptos

Tailwind CSS

Framework CSS utility-first que permite construir diseños directamente en el markup usando clases atómicas, eliminando la necesidad de escribir CSS custom.

seed#tailwind#css#utility-first#frontend#styling#responsive

¿Qué es?

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.

¿Por qué Tailwind?

Enfoque CSSEjemploVentajaDesventaja
CSS tradicional.card-header { ... }Control total, semánticoCrece sin límite, naming difícil
CSS Modulesstyles.cardHeaderScoped por defectoUn archivo por componente
CSS-in-JSstyled(Component)Dinámico, co-ubicadoRuntime overhead, bundle size
Tailwindclass="flex p-4 rounded"Sin naming, purge automáticoClases largas en el markup

Beneficios específicos:

  • CSS no crece con el proyecto (purge de clases no usadas)
  • Consistencia mediante design tokens
  • Responsive y dark mode con prefijos (md:, dark:)
  • Productividad: diseñar sin cambiar de archivo

Tailwind v4

La versión 4 introduce:

  • CSS-first configuration (no más tailwind.config.js)
  • Custom properties nativas
  • Performance mejorada
  • Composable variants

Este sitio usa Tailwind

jonmatum.com usa Tailwind CSS v4 con custom properties para colores (--color-bg, --color-fg, etc.) y dark mode only.

¿Cuándo no usar Tailwind?

  • Proyectos donde el equipo prefiere CSS-in-JS o CSS Modules y no quiere cambiar de paradigma
  • Componentes de librería pública donde los consumidores necesitan override fácil de estilos

¿Por qué importa?

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.

Referencias

Conceptos