Detección de clases en archivos fuente

Descripción general

Tailwind funciona escaneando tu proyecto en busca de clases de utilidad y luego generando todo el CSS necesario según las clases que realmente has utilizado.

Esto asegura que tu CSS sea lo más pequeño posible, y también es lo que hace posible características como los valores arbitrarios.

Cómo se detectan las clases

Tailwind trata todos tus archivos fuente como texto plano y no intenta analizar tus archivos como código de ninguna manera.

En cambio, solo busca tokens en tu archivo que podrían ser clases en función de los caracteres que Tailwind espera en los nombres de clases:

export function Button({ color, children }) {  const colors = {    black: "bg-black text-white",    blue: "bg-blue-500 text-white",    white: "bg-white text-black",  };  return (    <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}>      {children}    </button>  );}

Luego intenta generar el CSS para todos estos tokens, descartando los tokens que no se asignan a una clase de utilidad que el framework conozca.

Nombres de clases dinámicos

Dado que Tailwind escanea tus archivos fuente como texto plano, no tiene forma de entender la concatenación o interpolación de cadenas en el lenguaje de programación que estás usando.

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

En el ejemplo anterior, las cadenas text-red-600 y text-green-600 no existen, por lo que Tailwind no generará esas clases.

En su lugar, asegúrate de que todos los nombres de clase que utilices existan por completo:

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Si estás usando una biblioteca de componentes como React o Vue, esto significa que no deberías usar props para construir clases dinámicamente:

function Button({ color, children }) {  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;}

En su lugar, asigna props a nombres de clase completos que sean detectables estáticamente en tiempo de compilación:

function Button({ color, children }) {  const colorVariants = {    blue: "bg-blue-600 hover:bg-blue-500",    red: "bg-red-600 hover:bg-red-500",  };  return <button className={`${colorVariants[color]} ...`}>{children}</button>;}

Esto tiene el beneficio adicional de permitirte asignar diferentes valores de prop a diferentes tonos de color, por ejemplo:

function Button({ color, children }) {  const colorVariants = {    blue: "bg-blue-600 hover:bg-blue-500 text-white",    red: "bg-red-500 hover:bg-red-400 text-white",    yellow: "bg-yellow-300 hover:bg-yellow-400 text-black",  };  return <button className={`${colorVariants[color]} ...`}>{children}</button>;}

Siempre que uses nombres de clase completos en tu código, Tailwind generará todo tu CSS perfectamente cada vez.

Qué archivos se escanean

Tailwind escaneará todos los archivos de tu proyecto en busca de nombres de clases, excepto en los siguientes casos:

• Archivos que están en tu archivo .gitignore
• Archivos en el directorio node_modules
• Archivos binarios como imágenes, videos o archivos zip
• Archivos CSS
• Archivos de bloqueo comunes de administradores de paquetes

Si necesitas escanear archivos que Tailwind ignora de forma predeterminada, puedes registrar explícitamente esas fuentes.

Registrar fuentes explícitamente

Utiliza @source para registrar explícitamente rutas de origen relativas a la hoja de estilo:

@import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib";

Esto es especialmente útil cuando necesitas escanear una biblioteca externa compilada con Tailwind, ya que las dependencias suelen estar enumeradas en tu archivo .gitignore y Tailwind las ignora de forma predeterminada.

Configurar tu ruta base

Tailwind utiliza el directorio de trabajo actual como punto de partida al escanear nombres de clases de forma predeterminada.

Para establecer la ruta base para la detección de fuentes de forma explícita, utiliza la función source() al importar Tailwind en tu CSS:

@import "tailwindcss" source("../src");

Esto puede ser útil cuando se trabaja con monorepositorios donde tus comandos de compilación se ejecutan desde la raíz del monorepositorio en lugar de la raíz de cada proyecto.

Ignorar rutas específicas

Utiliza @source not para ignorar rutas específicas, relativas a la hoja de estilo, al escanear nombres de clases:

@import "tailwindcss";@source not "../src/components/legacy";

Esto es útil cuando tienes directorios grandes en tu proyecto que sabes que no usan clases de Tailwind, como componentes heredados o bibliotecas de terceros.

Deshabilitar la detección automática

Utiliza source(none) para deshabilitar por completo la detección automática de fuentes si deseas registrar todas tus fuentes explícitamente:

@import "tailwindcss" source(none);@source "../admin";@source "../shared";

Esto puede ser útil en proyectos que tienen múltiples hojas de estilo de Tailwind donde deseas asegurarse de que cada una solo incluya las clases que cada hoja de estilo necesita.

Incluir utilidades específicas en la lista segura (Safelisting)

Si necesitas asegurarte de que Tailwind genere ciertos nombres de clase que no existen en tus archivos de contenido, utiliza @source inline() para forzar su generación:

@import "tailwindcss";@source inline("underline");

.underline {  text-decoration-line: underline;}

Lista segura de variantes

También puedes usar @source inline() para generar clases con variantes. Por ejemplo, para generar la clase underline con variantes hover y focus, agrega {hover:,focus:,} a la entrada de origen:

@import "tailwindcss";@source inline("{hover:,focus:,}underline");

.underline {  text-decoration-line: underline;}@media (hover: hover) {  .hover\:underline:hover {    text-decoration-line: underline;  }}@media (focus: focus) {  .focus\:underline:focus {    text-decoration-line: underline;  }}

Lista segura con rangos

La entrada de origen se expande con llaves, por lo que puedes generar múltiples clases a la vez. Por ejemplo, para generar todos los colores de fondo rojos con variantes hover, usa un rango:

@import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

.bg-red-50 {  background-color: var(--color-red-50);}.bg-red-100 {  background-color: var(--color-red-100);}.bg-red-200 {  background-color: var(--color-red-200);}/* ... */.bg-red-800 {  background-color: var(--color-red-800);}.bg-red-900 {  background-color: var(--color-red-900);}.bg-red-950 {  background-color: var(--color-red-950);}@media (hover: hover) {  .hover\:bg-red-50:hover {    background-color: var(--color-red-50);  }  /* ... */  .hover\:bg-red-950:hover {    background-color: var(--color-red-950);  }}

Esto genera colores de fondo rojos del 100 al 900 en incrementos de 100, junto con los primeros y últimos tonos de 50 y 950. También agrega la variante hover: para cada una de esas clases.

Excluir clases explícitamente

Utiliza @source not inline() para evitar que se generen clases específicas, incluso si se detectan en tus archivos fuente:

@import "tailwindcss";@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");

Esto excluirá explícitamente las utilidades de fondo rojo, junto con sus variantes hover y focus, de ser generadas.