Primeros pasos
Obtén información sobre el soporte de navegadores y la compatibilidad con otras herramientas.
Tailwind CSS v4.0 está diseñado y probado para navegadores modernos, y la funcionalidad principal del framework depende específicamente de estas versiones de navegador:
Tailwind también incluye soporte para muchas características de la plataforma de vanguardia como field-sizing: content, @starting-style y text-wrap: balance que tienen un soporte de navegador limitado. Depende de ti si deseas utilizar estas características modernas en tus proyectos; si los navegadores a los que te diriges no las admiten, simplemente no utilices esas utilidades y variantes.
Si no estás seguro del soporte para una característica de plataforma moderna, la base de datos de Can I use es un excelente recurso.
Tailwind CSS v4.0 es una herramienta de compilación CSS con todas las funciones diseñada para un flujo de trabajo específico, y no está diseñada para usarse con preprocesadores de CSS como Sass, Less o Stylus.
Piensa en Tailwind CSS en sí mismo como tu preprocesador: no deberías usar Tailwind con Sass por la misma razón por la que no usarías Sass con Stylus.
Dado que Tailwind está diseñado para navegadores modernos, en realidad no necesitas un preprocesador para cosas como anidamiento o variables, y Tailwind en sí mismo se encargará de cosas como empaquetar tus importaciones y agregar prefijos de proveedores.
Tailwind empaquetará automáticamente otros archivos CSS que incluyas con @import, sin necesidad de una herramienta de preprocesamiento independiente.
@import "tailwindcss";@import "./typography.css";En este ejemplo, Tailwind empaquetará el archivo typography.css en tu CSS compilado, sin ninguna otra herramienta como Sass o postcss-import.
Todos los navegadores modernos admiten variables CSS nativas sin necesidad de ningún tipo de preprocesador:
.typography { font-size: var(--text-base); color: var(--color-gray-700);}Tailwind depende en gran medida de las variables CSS de forma interna, por lo que si puedes usar Tailwind en tu proyecto, puedes usar variables CSS nativas.
Bajo el capó, Tailwind utiliza Lightning CSS para procesar CSS anidado como este:
.typography { p { font-size: var(--text-base); } img { border-radius: var(--radius-lg); }}Tailwind aplana ese CSS anidado por ti para que pueda ser entendido por todos los navegadores modernos:
.typography p { font-size: var(--text-base);}.typography img { border-radius: var(--radius-lg);}El soporte de anidamiento CSS nativo también es muy bueno en la actualidad, por lo que realmente no necesitas un preprocesador para el anidamiento, incluso si no estás usando Tailwind.
En Tailwind, los tipos de clases para las que podrías haber usado bucles en el pasado (como col-span-1, col-span-2, etc.) se generan bajo demanda por Tailwind cada vez que las usas, en lugar de tener que estar predefinidas.
Además de eso, al compilar cosas con Tailwind CSS, realizas la gran mayoría de tus estilos en tu HTML, no en archivos CSS. Como no estás escribiendo toneladas de CSS en primer lugar, simplemente no necesitas características como bucles que están diseñados para generar mediante programación muchas reglas CSS personalizadas.
Al usar preprocesadores como Sass o Less, es posible que hayas usado funciones como darken o lighten para ajustar los colores.
Al usar Tailwind, el flujo de trabajo recomendado es utilizar una paleta de colores predefinida que incluya tonos claros y oscuros de cada color, como la paleta de colores predeterminada diseñada por expertos e incluida con el framework.
<button class="bg-indigo-500 hover:bg-indigo-600 ..."> <!-- ... --></button>También puedes usar características de CSS modernas como color-mix() para ajustar los colores en tiempo de ejecución directamente en el navegador. Esto incluso te permite ajustar los colores definidos usando variables CSS o la palabra clave currentcolor, lo cual no es posible con preprocesadores.
De manera similar, los navegadores ahora admiten funciones matemáticas como min(), max() y round() de forma nativa, por lo que tampoco es necesario depender de un preprocesador para estas características.
Tailwind es compatible con los módulos CSS y puede coexistir con ellos si estás introduciendo Tailwind en un proyecto que ya los utiliza, pero no recomendamos usar los módulos CSS y Tailwind juntos si puedes evitarlo.
Los módulos CSS están diseñados para resolver problemas de ámbito que simplemente no existen cuando compones clases de utilidad en tu HTML en lugar de escribir CSS personalizado.
Los estilos se limitan naturalmente con Tailwind porque cada clase de utilidad siempre hace lo mismo, sin importar dónde se use; no hay riesgo de que agregar una clase de utilidad a una parte de tu interfaz de usuario cree algún efecto secundario inesperado en otro lugar.
Al usar módulos CSS, las herramientas de compilación como Vite, Parcel y Turbopack procesan cada módulo CSS por separado. Eso significa que si tienes 50 módulos CSS en un proyecto, Tailwind necesita ejecutarse 50 veces por separado, lo que conduce a tiempos de compilación mucho más lentos y una peor experiencia de desarrollo.
Dado que los módulos CSS se procesan cada uno por separado, no tienen @theme a menos que importes uno.
Esto significa que las características como @apply no funcionarán de la manera esperada a menos que importes explícitamente tus estilos globales como referencia:
Importa tus estilos globales como referencia para asegurarte de que tus variables de tema estén definidas
@reference "../app.css";button { @apply bg-blue-500;}Alternativamente, también puedes usar variables CSS en lugar de @apply, lo que tiene el beneficio adicional de permitir que Tailwind omita el procesamiento de esos archivos y mejorará el rendimiento de tu compilación:
button { background: var(--color-blue-500);}Vue, Svelte y Astro admiten bloques <style> en archivos de componentes que se comportan de manera muy similar a los módulos CSS, lo que significa que cada uno es procesado por tus herramientas de compilación de forma totalmente independiente y tiene todos los mismos inconvenientes.
Si estás usando Tailwind con estas herramientas, recomendamos evitar los bloques <style> en tus componentes y simplemente dar estilo a las cosas con clases de utilidad directamente en tu marcado, que es la forma en que se supone que se debe usar Tailwind.
Si utilizas bloques <style>, asegúrate de importar tus estilos globales como referencia si deseas que las características como @apply funcionen según lo esperado:
Importa tus estilos globales como referencia para asegurarte de que tus variables de tema estén definidas
<template> <button><slot /></button></template><style scoped> @reference "../app.css"; button { @apply bg-blue-500; }</style>O simplemente usa tus variables CSS definidas globalmente en lugar de características como @apply, las cuales no requieren que Tailwind procese el CSS de tus componentes en absoluto:
<template> <button><slot /></button></template><style scoped> button { background-color: var(--color-blue-500); }</style>