# 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](./no-unknown-classes) — prohíbe clases que el design system desconoce. - [no-conflicting-classes](./no-conflicting-classes) — marca clases que pelean por la misma propiedad CSS. - [no-contradicting-variants](./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](./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](./no-duplicate-classes) — la misma clase dos veces es peso muerto. - [no-dynamic-classes](./no-dynamic-classes) — `bg-${color}-500` se arma en runtime, así que Tailwind no genera CSS para ella. ## Modernización - [no-deprecated-classes](./no-deprecated-classes) — `flex-grow` → `grow`, etc. - [enforce-canonical](./enforce-canonical) — `-m-0` → `m-0`, `start-2` → `inset-s-2`, etc. - [no-unnecessary-arbitrary-value](./no-unnecessary-arbitrary-value) — `w-[100%]` → `w-full` cuando la clase nombrada emite CSS idéntico. - [prefer-theme-tokens](./prefer-theme-tokens) — `border-(--border)` → `border-border` cuando un named utility mapea al mismo variable. - [prefer-scale-token](./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](./enforce-negative-arbitrary-values) — `-top-[5px]` → `top-[-5px]`. ## Consistencia - [enforce-sort-order](./enforce-sort-order) — ordena las clases en el orden oficial de Tailwind. - [consistent-variant-order](./consistent-variant-order) — `dark:hover:` vs `hover:dark:`. - [enforce-consistent-important-position](./enforce-consistent-important-position) — prefijo `!flex` vs sufijo `flex!`. - [enforce-consistent-line-wrapping](./enforce-consistent-line-wrapping) — una clase por línea vs todo en una. - [enforce-consistent-variable-syntax](./enforce-consistent-variable-syntax) — `bg-(--x)` vs `bg-[var(--x)]`. - [enforce-logical](./enforce-logical) — `ml-4` → `ms-4` para soporte RTL. - [enforce-physical](./enforce-physical) — `ms-4` → `ml-4` para proyectos LTR-only. - [enforce-shorthand](./enforce-shorthand) — `mt-2 mr-2 mb-2 ml-2` → `m-2`. - [no-unnecessary-whitespace](./no-unnecessary-whitespace) — colapsa runs de espacios. ## Protección del design system - [no-arbitrary-value](./no-arbitrary-value) — prohíbe `w-[3.14rem]` y amigos. - [no-borrowed-component-styles](./no-borrowed-component-styles) — un elemento simple que rearma uno de tus componentes con sus clases (experimental). - [no-default-palette](./no-default-palette) — prohíbe `bg-red-500` cuando tu theme tiene colores propios. - [no-hardcoded-colors](./no-hardcoded-colors) — prohíbe `bg-[#fff]`, prefiere theme tokens. - [no-restricted-classes](./no-restricted-classes) — bloquea clases específicas o patrones regex. - [max-class-count](./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) |