Verificação HTML: CSS: Regra at não reconhecida "@tailwind"

Sobre este problema de CSS

A diretiva @tailwind é usada em ficheiros fonte do Tailwind CSS para injetar os estilos gerados do Tailwind na sua folha de estilos. Usos comuns incluem @tailwind base;, @tailwind components; e @tailwind utilities;. Essas diretivas funcionam como marcadores de posição que a ferramenta de build do Tailwind (como o Tailwind CLI ou plugin PostCSS) substitui por regras CSS reais durante a compilação.

O validador CSS do W3C verifica as folhas de estilos contra as especificações CSS oficiais mantidas pelo W3C. Uma vez que @tailwind não está definida em qualquer especificação CSS — é uma extensão específica do framework — o validador corretamente sinaliza-a como não reconhecida. Isto não significa que o seu CSS está quebrado ou causará problemas nos navegadores; simplesmente significa que o validador não sabe o que é @tailwind.

Esta distinção é importante porque as diretivas @tailwind nunca devem aparecer no CSS de produção servido aos navegadores. Se está a ver este erro de validação num website em funcionamento, pode indicar uma de duas coisas: ou está a fazer ligação direta ao seu ficheiro fonte Tailwind não compilado (o que é um problema), ou o validador está a verificar o seu CSS fonte em vez da saída compilada.

Como corrigir

Certifique-se de que está a servir CSS compilado

O passo mais importante é certificar-se de que o seu pipeline de build está a processar corretamente os seus ficheiros fonte Tailwind. A saída compilada deve conter apenas CSS padrão — sem diretivas @tailwind. Verifique que as suas tags <link> apontam para o ficheiro CSS compilado, não para o ficheiro fonte.

Use o CDN ou CLI do Tailwind corretamente

Se está a usar o Tailwind CLI, execute o comando de build para gerar uma folha de estilos compilada e referencie esse ficheiro no seu HTML. O ficheiro compilado conterá apenas CSS válido.

Considere suprimir o aviso

Se o validador está a verificar o seu CSS fonte (por exemplo, blocos <style> inline que são processados do lado do cliente), e está confiante de que as diretivas estão a ser tratadas corretamente, pode suprimir ou ignorar com segurança este aviso específico nos seus relatórios de validação.

Exemplos

CSS fonte que despoleta o aviso

Este é um ficheiro fonte típico do Tailwind CSS que o validador irá sinalizar:

@tailwind base;
@tailwind components;
@tailwind utilities;

.custom-button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

Cada linha @tailwind produzirá um aviso de “Regra at não reconhecida” do validador W3C.

Abordagem correta: servir CSS compilado

Após executar o processo de build do Tailwind, o ficheiro de saída contém apenas CSS padrão:

*, ::before, ::after {
  box-sizing: border-box;
}

.custom-button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.flex {
  display: flex;
}

.text-center {
  text-align: center;
}

Referencie este ficheiro compilado no seu HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Page</title>
  <link rel="stylesheet" href="css/output.css">
</head>
<body>
  <p class="text-center">Hello, world!</p>
</body>
</html>

Evite fazer ligação a ficheiros fonte não compilados

Isto está incorreto — faz ligação direta ao ficheiro fonte contendo diretivas @tailwind:

<!-- Não faça isto -->

<link rel="stylesheet" href="css/input.css">

Em vez disso, faça sempre ligação à saída do build:

<!-- Faça isto -->

<link rel="stylesheet" href="css/output.css">

Ao garantir que o seu site de produção serve apenas a saída CSS compilada, você elimina completamente os avisos da regra at @tailwind e entrega folhas de estilos válidas e compatíveis com os padrões aos seus utilizadores.