Validación HTML: CSS: Regla at no reconocida "@tailwind"

Acerca de este problema de CSS

La directiva @tailwind se usa en archivos fuente de Tailwind CSS para inyectar los estilos generados de Tailwind en tu hoja de estilos. Los usos comunes incluyen @tailwind base;, @tailwind components; y @tailwind utilities;. Estas directivas actúan como marcadores de posición que la herramienta de compilación de Tailwind (como el CLI de Tailwind o el plugin de PostCSS) reemplaza con reglas CSS reales durante la compilación.

El Validador CSS de W3C verifica las hojas de estilo contra las especificaciones CSS oficiales mantenidas por el W3C. Dado que @tailwind no está definida en ninguna especificación CSS — es una extensión específica del framework — el validador correctamente la marca como no reconocida. Esto no significa que tu CSS esté roto o vaya a causar problemas en los navegadores; simplemente significa que el validador no sabe qué es @tailwind.

Esta distinción es importante porque las directivas @tailwind nunca deberían aparecer en el CSS de producción servido a los navegadores. Si estás viendo este error de validación en un sitio web en vivo, podría indicar una de dos cosas: o estás enlazando directamente a tu archivo fuente de Tailwind sin compilar (lo cual es un problema), o el validador está verificando tu CSS fuente en lugar de la salida compilada.

Cómo solucionarlo

Asegúrate de servir CSS compilado

El paso más importante es asegurarte de que tu pipeline de compilación esté procesando correctamente tus archivos fuente de Tailwind. La salida compilada debería contener solo CSS estándar — sin directivas @tailwind. Verifica que tus etiquetas <link> apunten al archivo CSS compilado, no al archivo fuente.

Usa el CDN o CLI de Tailwind correctamente

Si estás usando el CLI de Tailwind, ejecuta el comando de compilación para generar una hoja de estilos compilada y referencia ese archivo en tu HTML. El archivo compilado contendrá solo CSS válido.

Considera suprimir la advertencia

Si el validador está verificando tu CSS fuente (por ejemplo, bloques <style> en línea que se procesan del lado del cliente), y tienes confianza de que las directivas se están manejando correctamente, puedes suprimir o ignorar de forma segura esta advertencia específica en tus reportes de validación.

Ejemplos

CSS fuente que activa la advertencia

Este es un archivo fuente típico de Tailwind CSS que el validador marcará:

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

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

Cada línea @tailwind producirá una advertencia “Regla at no reconocida” del Validador W3C.

Enfoque correcto: servir CSS compilado

Después de ejecutar el proceso de compilación de Tailwind, el archivo de salida contiene solo CSS estándar:

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

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

.flex {
  display: flex;
}

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

Referencia este archivo compilado en tu 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>

Evita enlazar a archivos fuente sin compilar

Esto es incorrecto — enlaza directamente al archivo fuente que contiene directivas @tailwind:

<!-- No hagas esto -->

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

En su lugar, siempre enlaza a la salida de compilación:

<!-- Haz esto -->

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

Al asegurarte de que tu sitio de producción sirve solo la salida CSS compilada, eliminas completamente las advertencias de reglas at @tailwind y entregas hojas de estilos válidas y compatibles con los estándares a tus usuarios.