Pular para o conteúdo

A diretiva @source

@source fica na sua entrada CSS. Suas formas inline() adicionam ou removem candidatos de classe e funcionam em qualquer lugar. Suas formas de caminho indicam os arquivos de modelo a serem analisados em busca de nomes de classes; apenas o analisador CLI analisa arquivos, mas ainda não aplica os caminhos informados (veja Como os caminhos são usados).

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

As diretivas @source são lidas durante a compilação e removidas da saída — nunca aparecem no CSS gerado. Os caminhos precisam estar entre aspas; aspas simples e duplas são aceitas.

Caminhos, padrões glob e negação

O formato de caminho aceita um diretório, um padrão glob ou um caminho negado, e as diretivas são acumulativas:

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

Como os caminhos são usados

O compilador registra cada diretiva de caminho na lista sources do array retornado por TailwindPHP\compile(), como ['base' => …, 'pattern' => …, 'negated' => …], com base definido pela opção de compilação base. Ele não lê arquivos por conta própria.

  • tw::generate(), tw::compile() e TailwindCompiler compilam apenas o conteúdo fornecido. As diretivas de caminho não têm efeito nesses casos.
  • O analisador CLI lê sources, mas, na versão atual, analisa recursivamente o diretório do arquivo de entrada em busca de todos os caminhos não negados, independentemente do caminho ou padrão glob informado, e ignora completamente os caminhos not, que não excluem nada (#8). O que o analisador CLI analisa explica os detalhes e apresenta uma estrutura que funciona atualmente.

Candidatos em linha

@source inline(...) força a inclusão de classes na saída mesmo que elas não apareçam nos arquivos analisados — útil para nomes de classes montados dinamicamente em tempo de execução:

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

Os candidatos em linha também aceitam variantes:

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

Expansão de chaves

Os padrões em linha expandem grupos entre chaves, permitindo enumerar vários 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 em linha ignorados

@source not inline(...) faz o contrário de inline() — remove os candidatos correspondentes da saída, mesmo que tenham sido encontrados no conteúdo. A expansão de chaves também funciona aqui:

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

Regras de validação

@source é uma instrução, não um bloco. O compilador rejeita:

  • Uma diretiva com corpo — @source cannot have a body.
  • Uma diretiva aninhada (por exemplo, dentro de @media) — @source cannot be nested.
  • Um caminho sem aspas — @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;

Consulte CLI para compilações baseadas em arquivos e Importações para resolver @import e módulos virtuais.