Reglas

Las 27 reglas de oxlint-tailwindcss, agrupadas por lo que hacen cumplir. Haz clic en cualquier regla para ver ejemplos y referencia de opciones.

Corrección

Reglas que atrapan problemas que generarían CSS inválido o inesperado.

• no-unknown-classes — prohíbe clases que el design system desconoce.
• no-conflicting-classes — marca clases que pelean por la misma propiedad CSS.
• no-contradicting-variants — flex hover:flex es redundante (solo en listas de clases literales en elementos nativos, no en fragmentos de cn/twMerge).
• no-dark-without-light — un color dark: debería tener pareja en modo claro (solo en listas de clases literales en elementos nativos, no en fragmentos de cn/twMerge).
• no-duplicate-classes — la misma clase dos veces es peso muerto.
• no-dynamic-classes — bg-${color}-500 se arma en runtime, así que Tailwind no genera CSS para ella.

Modernización

• no-deprecated-classes — flex-grow → grow, etc.
• enforce-canonical — -m-0 → m-0, start-2 → inset-s-2, etc.
• no-unnecessary-arbitrary-value — w-[100%] → w-full cuando la clase nombrada emite CSS idéntico.
• prefer-theme-tokens — border-(--border) → border-border cuando un named utility mapea al mismo variable.
• prefer-scale-token — p-[10px] → p-2.5, w-[200px] → w-50 cuando el token es el mismo VALOR (solo reporta; el CSS difiere textualmente).
• enforce-negative-arbitrary-values — -top-[5px] → top-[-5px].

Consistencia

• enforce-sort-order — ordena las clases en el orden oficial de Tailwind.
• consistent-variant-order — dark:hover: vs hover:dark:.
• enforce-consistent-important-position — prefijo !flex vs sufijo flex!.
• enforce-consistent-line-wrapping — una clase por línea vs todo en una.
• enforce-consistent-variable-syntax — bg-(--x) vs bg-[var(--x)].
• enforce-logical — ml-4 → ms-4 para soporte RTL.
• enforce-physical — ms-4 → ml-4 para proyectos LTR-only.
• enforce-shorthand — mt-2 mr-2 mb-2 ml-2 → m-2.
• no-unnecessary-whitespace — colapsa runs de espacios.

Protección del design system

• no-arbitrary-value — prohíbe w-[3.14rem] y amigos.
• no-borrowed-component-styles — un elemento simple que rearma uno de tus componentes con sus clases (experimental).
• no-default-palette — prohíbe bg-red-500 cuando tu theme tiene colores propios.
• no-hardcoded-colors — prohíbe bg-[#fff], prefiere theme tokens.
• no-restricted-classes — bloquea clases específicas o patrones regex.
• max-class-count — limita cuántas clases se pueden apilar en un string de clases.

Páginas por regla

Cada página de regla cubre:

• Qué hace, en un párrafo.
• Opciones con sus defaults y una descripción por opción.
• Ejemplos correctos / incorrectos.
• Cuándo desactivarla — los casos de uso donde esta regla no es la indicada.
• Para reglas DS-dependientes: si entryPoint es obligatorio (siempre sí en v1) y qué pasa cuando falta.

Referencia de defaults

Tabla rápida para saber qué hace cada regla cuando la activas sin sobreescribir meta.defaultOptions.

Reglas DS-dependientes

Estas reglas requieren que settings.tailwindcss.entryPoint esté configurado; emiten un diagnóstico fatal designSystemUnavailable cuando falta.

Regla	Opciones por defecto
enforce-canonical	{ reportNonEquivalent: false }
enforce-sort-order	{ mode: 'default' }
no-borrowed-component-styles	{ components: [] }
no-conflicting-classes	{ reportRedundant: true }
no-default-palette	{ allow: [] }
no-unknown-classes	{ allowlist: [], ignorePrefixes: [] }
no-unnecessary-arbitrary-value	{}
prefer-scale-token	{}
prefer-theme-tokens	{}

Reglas DS-opcionales

Funcionan sin nada configurado — su fallback es determinístico por sí solo — y ganan precisión cuando hay un entryPoint disponible. Ninguna puede emitir designSystemUnavailable. Todas aceptan además un entryPoint propio que pisa el ajuste compartido.

Regla	Opciones por defecto	Qué aporta el design system
consistent-variant-order	{} (el mismo orden con o sin DS)	Qué son las variants propias del proyecto: pseudo-element, barrera o breakpoint
enforce-consistent-line-wrapping	{ printWidth: 80, group: 'newLine', wrapStrings: 'never' }	El prefix del proyecto, para que el agrupamiento de wrapLines: 'all' lo trate como transparente
enforce-logical	{ allowlist: [], direction: 'both', sizing: false }	Confirma que la clase sugerida exista y que tu Tailwind tenga las utilities de 4.2 (eje block, tamaños, inset-s); sin DS, el eje block y los tamaños solo se sugieren
enforce-physical	{ allowlist: [], direction: 'both', sizing: false }	Confirma que la clase sugerida exista
enforce-shorthand	{}	Verifica cada fusión contra el CSS emitido
no-arbitrary-value	{ allow: [], allowVariables: 'none' }	Con allowVariables: 'runtime', qué variables CSS define tu stylesheet
no-contradicting-variants	{}	Qué hace el selector de cada variant
no-dark-without-light	{ variants: ['dark'] }	Distingue los colores del resto y agrupa la base por propiedad CSS declarada
no-deprecated-classes	{}	Deriva la lista de renombres en vez de usar la tabla interna
no-dynamic-classes	{}	Las utilidades y variantes propias de tu proyecto cuentan como de Tailwind
no-hardcoded-colors	{ allow: [] }	Nombra los colores de tu theme en el mensaje

Reglas DS-independientes

Regla	Opciones por defecto
enforce-consistent-important-position	{ position: 'suffix' }
enforce-consistent-variable-syntax	{ syntax: 'shorthand' }
enforce-negative-arbitrary-values	(sin opciones)
max-class-count	{ max: 20 }
no-duplicate-classes	(sin opciones)
no-restricted-classes	{ classes: [], patterns: [] }
no-unnecessary-whitespace	(sin opciones)