Tailwind CSS

Tailwind CSS es un framework CSS basado en utilidades que da estilo a una página con clases pequeñas de un solo propósito escritas directamente en el HTML. Clases como p-4, text-center y bg-blue-500 aplican cada una un único estilo. Los desarrolladores las combinan para construir cualquier diseño sin escribir apenas CSS propio.

El CSS basado en utilidades consiste en construir el diseño a partir de muchas clases pequeñas que hacen una sola cosa, en lugar de escribir una clase propia para cada componente. Un botón obtiene su aspecto de clases para el relleno, el color, el radio del borde y el grosor de la letra. Este enfoque mantiene los estilos junto al HTML y evita hojas de estilo enormes que no paran de crecer.

Los desarrolladores eligen Tailwind CSS porque acelera el trabajo de estilos y mantiene pequeño el archivo CSS final. No hace falta inventar nombres de clase ni saltar entre archivos HTML y CSS en cada cambio. Además ofrece una escala coherente de espaciados, colores y tamaños de letra que mantiene el diseño ordenado.

Tailwind CSS ofrece clases de utilidad de bajo nivel para construir un diseño propio, mientras que Bootstrap ofrece componentes ya hechos como barras de navegación, tarjetas y modales. Bootstrap es más rápido para un aspecto estándar con poco trabajo de diseño. Tailwind CSS es mejor cuando un proyecto necesita un diseño único sin pelearse con un tema por defecto.

Tailwind CSS se instala con npm y se conecta a la herramienta de compilación del proyecto, como Vite, PostCSS o la CLI de Tailwind. En la versión 4 añades el paquete y lo importas al principio de tu archivo CSS principal con @import "tailwindcss". La guía oficial de instalación tiene pasos breves para cada framework habitual, incluidos Laravel, Next.js y Vite.

Tailwind CSS es adecuado para principiantes que ya entienden propiedades CSS básicas como margin, padding, flexbox y grid. Cada clase de Tailwind corresponde a una propiedad CSS real, así que aprender CSS primero hace que las clases se lean con facilidad. Quienes se saltan lo básico de CSS suelen tener problemas para arreglar maquetaciones en Tailwind.

La mayoría de desarrolladores que saben CSS empiezan a ser productivos con Tailwind CSS en pocos días. Los nombres de clase siguen patrones claros, así que aprender un grupo ayuda a deducir el resto. Dominar las variantes responsive, los temas personalizados y los patrones de componentes lleva unas semanas de uso real.

El diseño responsive en Tailwind CSS funciona añadiendo prefijos de breakpoint como sm:, md: y lg: delante de cualquier clase de utilidad. Tailwind es mobile-first, así que una clase sin prefijo se aplica a todas las pantallas y una con prefijo se aplica desde ese breakpoint hacia arriba. Por ejemplo, text-sm md:text-lg da texto pequeño en móviles y más grande en pantallas anchas.

Los breakpoints por defecto de Tailwind CSS son sm en 640 píxeles, md en 768 píxeles, lg en 1024 píxeles, xl en 1280 píxeles y 2xl en 1536 píxeles. Cada breakpoint es un ancho mínimo, en línea con su enfoque mobile-first. Un proyecto puede cambiar estos valores o añadir breakpoints nuevos en la configuración del tema.

El modo oscuro se añade en Tailwind CSS poniendo el prefijo dark: delante de cualquier clase, como dark:bg-gray-900. Por defecto, Tailwind sigue la configuración del sistema operativo del visitante. Para que el usuario cambie de modo con un botón, se configura la variante dark para que dependa de una clase o un atributo data de la página.

En la versión 4 de Tailwind CSS, los colores y las fuentes se personalizan con variables CSS dentro de un bloque @theme en el archivo CSS principal. Una variable como --color-brand crea automáticamente clases como bg-brand y text-brand. Las versiones anteriores usaban un archivo tailwind.config.js para lo mismo, y ese método sigue funcionando en la versión 4 mediante una opción de compatibilidad.

Tailwind CSS puede hacer que el HTML parezca recargado, porque un elemento puede llevar muchas clases. La mayoría de equipos lo resuelven convirtiendo los patrones repetidos en componentes de su framework, como un componente de Blade, React o Vue. A cambio, los estilos quedan visibles junto al marcado, lo que hace los cambios rápidos y seguros.

Tailwind CSS mantiene pequeño el archivo CSS analizando los archivos del proyecto y generando solo las clases que se usan de verdad. Las utilidades que no se usan nunca llegan a la hoja de estilos final. Un CSS de producción típico hecho con Tailwind es pequeño, incluso en sitios grandes.

La directiva @apply de Tailwind CSS permite usar clases de utilidad dentro de tus propias reglas CSS. Es práctica para dar estilo a contenido que no controlas, como el HTML generado por un editor de texto. El equipo de Tailwind recomienda usarla con moderación, porque los componentes suelen ser una forma más limpia de reutilizar estilos.

Sí, Tailwind CSS funciona muy bien con Laravel, y los proyectos nuevos de Laravel vienen preparados para usarlo con Vite. Escribes las clases de Tailwind en las plantillas Blade y Vite genera el CSS final. Los kits de inicio de Laravel también usan Tailwind para sus pantallas de acceso y su panel.

Sí, Tailwind CSS funciona con React, Vue, Svelte y la mayoría de frameworks de JavaScript. Las clases van en el marcado del componente mediante className en React o class en Vue. Como cada componente lleva sus propias clases, Tailwind encaja muy bien con los frameworks basados en componentes.

Tailwind CSS no influye directamente en el posicionamiento, pero puede ayudar al SEO de forma indirecta al mantener pequeño el CSS y rápidas las páginas. La velocidad forma parte de las señales de experiencia en la página de Google. El contenido, la estructura de la página y la semántica del HTML importan mucho más que la herramienta de estilos.

Los valores arbitrarios en Tailwind CSS permiten usar un valor exacto que no está en el tema escribiéndolo entre corchetes. Por ejemplo, w-[37%] o top-[117px] crean al momento una clase con ese valor exacto. Son útiles para casos puntuales, pero un valor que se usa a menudo debería ir al tema.

Los estados hover y focus en Tailwind CSS funcionan añadiendo un prefijo de estado como hover:, focus: o active: delante de una clase de utilidad. Por ejemplo, bg-blue-500 hover:bg-blue-600 oscurece un botón al pasar el ratón por encima. Los prefijos se pueden combinar con breakpoints y modo oscuro, como md:hover:underline.

No, Tailwind CSS solo incluye clases de utilidad, no componentes ya hechos como modales o barras de navegación. Los componentes listos vienen de colecciones aparte, como el oficial Tailwind Plus o librerías de la comunidad como daisyUI y Flowbite. Muchos equipos crean su propio pequeño conjunto de componentes sobre las utilidades.

Sí, Tailwind CSS admite diseños de derecha a izquierda mediante las variantes rtl: y ltr: y las clases de utilidad lógicas. Clases lógicas como ms-4 y pe-2 aplican margen y relleno al inicio o al final de la línea, así que se invierten solas en árabe. Así un mismo marcado sirve para páginas en inglés y en árabe.

La versión 4 de Tailwind CSS llevó la configuración al propio CSS con el bloque @theme y una sola línea @import. También trajo un motor de compilación más rápido, la detección automática de los archivos de contenido y funciones modernas de CSS como las cascade layers. La mayoría de proyectos que vienen de la versión 3 pueden usar la herramienta oficial de actualización para adaptar su código.

Tailwind CSS puede no convenir cuando un proyecto necesita un conjunto completo de componentes listos con casi ningún diseño propio, o cuando el equipo prefiere escribir CSS clásico. Una página estática pequeña con pocos estilos quizá no necesite ningún framework. Tailwind rinde más en proyectos con diseños personalizados que no paran de crecer.

Las clases de Tailwind CSS se mantienen ordenadas convirtiendo los patrones repetidos en componentes y ordenando las clases siempre de la misma forma. El plugin oficial de Prettier para Tailwind ordena las clases automáticamente al guardar. Definir los colores y espaciados de la marca en el tema también mantiene las clases cortas y coherentes.

Sí, Tailwind CSS es de código abierto con licencia MIT, así que se puede usar en proyectos personales y comerciales. La licencia permite usarlo, modificarlo e incluirlo en cualquier producto. El código fuente es público en GitHub, donde cualquiera puede leerlo y avisar de problemas.