Detectando clases en archivos fuente

Resumen

Tailwind funciona escaneando tu proyecto en busca de clases de utilidad, y luego generando todo el CSS necesario basado en las clases que realmente has usado.

Esto asegura que tu CSS sea lo más pequeño posible, y también es lo que hace posibles 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, simplemente busca cualquier token en tu archivo que pueda ser una clase basándose en los caracteres que Tailwind espera en los nombres de clase:

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 aquellos que no se mapean a una clase de utilidad que el framework conoce.

Nombres de clase 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 estés usando existan completos:

<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, mapea los 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 mapear 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>;
}

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

Qué archivos se escanean

Tailwind escaneará cada archivo en tu proyecto en busca de nombres de clase, excepto en los siguientes casos:

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

Si necesitas escanear algún archivo que Tailwind esté ignorando por defecto, puedes registrar explícitamente esas fuentes.

Registrando fuentes explícitamente

Usa @source para registrar explícitamente rutas de origen relativas a la hoja de estilos:

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

Esto es especialmente útil cuando necesitas escanear una biblioteca externa construida con Tailwind, ya que las dependencias suelen estar listadas en tu archivo .gitignore y son ignoradas por Tailwind por defecto.

Estableciendo tu ruta base

Tailwind usa el directorio de trabajo actual como punto de partida al escanear nombres de clase por defecto.

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

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

Esto puede ser útil al trabajar con monorepos donde tus comandos de compilación se ejecutan desde la raíz del monorepo en lugar de la raíz de cada proyecto.

Ignorando rutas específicas

Usa @source not para ignorar rutas específicas, relativas a la hoja de estilos, al escanear nombres de clase:

@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.

Deshabilitando la detección automática

Usa source(none) para deshabilitar completamente la detección automática de fuentes si quieres 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 Tailwind donde quieres asegurarte de que cada una solo incluya las clases que necesita.

Incluyendo utilidades específicas en la lista segura

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

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

.underline {
  text-decoration: underline;
}

Incluyendo variantes en la lista segura

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: underline;
}
@media (hover: hover) {
  .hover\:underline:hover {
    text-decoration: underline;
  }
}
@media (focus: focus) {
  .focus\:underline:focus {
    text-decoration: underline;
  }
}

Incluyendo en la 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.

Excluyendo clases explícitamente

Usa @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 rojas, junto con sus variantes hover y focus, de ser generadas.