Saltar al contenido

La directiva @source

@source reside en su CSS de entrada. Sus formas inline() añaden o eliminan candidatos de clase y funcionan en todas partes. Sus formas de ruta nombran los archivos de plantilla que se deben analizar en busca de nombres de clase; solo CLI analiza archivos, y todavía no aplica las rutas que le proporcione (consulte Cómo se usan las rutas).

CSS
@import "tailwindcss";
@source "./templates";

Las directivas @source se leen durante la compilación y se eliminan de la salida: nunca aparecen en el CSS generado. Las rutas deben ir entre comillas; se aceptan comillas simples y dobles.

Rutas, patrones glob y negación

La forma de ruta acepta un directorio, un patrón glob o una ruta negada, y las directivas se acumulan:

CSS
@source "./templates";              /* a directory */
@source "./components/**/*.php";    /* a glob */
@source not "./templates/legacy";   /* an exclusion */

Cómo se usan las rutas

El compilador registra cada directiva de ruta en la lista sources de la matriz que devuelve TailwindPHP\compile(), como ['base' => …, 'pattern' => …, 'negated' => …] con base tomado de la opción de compilación base. Nunca lee archivos por sí mismo.

  • tw::generate(), tw::compile() y TailwindCompiler compilan solo el contenido que les pasas. Las directivas de ruta no tienen efecto en ellos.
  • El CLI lee sources, pero en la versión actual analiza recursivamente el directorio del archivo de entrada en busca de todas las rutas no negadas, sin importar qué indiquen la ruta o el patrón glob, y omite por completo las rutas not, por lo que no excluyen nada (#8). Qué analiza CLI explica los detalles y muestra una estructura que funciona actualmente.

Candidatos en línea

@source inline(...) fuerza la inclusión de clases en la salida, aunque no aparezcan en los archivos analizados; resulta útil para nombres de clase que se construyen dinámicamente en tiempo de ejecución:

CSS
@source inline("flex p-4 m-2");

Los candidatos en línea también admiten variantes:

CSS
@source inline("hover:bg-blue-500 focus:ring-2");

Expansión de llaves

Los patrones en línea expanden grupos entre llaves, lo que permite enumerar muchos candidatos de forma compacta:

CSS
@source inline("p-{1,2,4}");
/* Generates p-1, p-2, and p-4 */

@source inline("text-{red,blue}-500");
/* Generates text-red-500 and text-blue-500 */

Candidatos en línea ignorados

@source not inline(...) hace lo contrario de inline(): elimina de la salida los candidatos coincidentes, aunque se hayan encontrado en el contenido. Aquí también funciona la expansión de llaves:

CSS
@source not inline("legacy");
@source not inline("p-{1,2}");

Reglas de validación

@source es una declaración, no un bloque. El compilador rechaza:

  • Una directiva con cuerpo — @source cannot have a body.
  • Una directiva anidada (por ejemplo, dentro de @media) — @source cannot be nested.
  • Una ruta sin comillas — @source paths must be quoted.
CSS
/* Invalid — throws "`@source` cannot have a body." */
@source "./src" {
    .some-style { color: red; }
}

/* Invalid — throws "`@source` paths must be quoted." */
@source ./src;

Consulta CLI para compilaciones basadas en archivos e Imports para resolver @import y módulos virtuales.