oxlint-tailwindcssLinting de Tailwind CSS para oxlint.

¿Qué es oxlint-tailwindcss? ​

oxlint-tailwindcss es un plugin de oxlint, el linter del proyecto Oxc, que linta los nombres de clases de Tailwind CSS v4. Carga el design system de tu proyecto desde el entry point CSS que configuras — sus tokens de @theme, sus definiciones @utility y @custom-variant y sus plugins — y revisa contra él cada string de clases en JSX, TSX, JavaScript y TypeScript (y el <script> de los archivos Vue, Svelte y Astro), con 27 reglas, la mayoría con autofix.

Qué detecta ​

• Clases que Tailwind no puede generar: un typo como itms-center, junto a la clase que querías — no-unknown-classes.
• Clases que se pisan entre sí: p-4 p-6, o line-clamp-1 flex, donde flex reemplaza el display del clamp — no-conflicting-classes.
• Clases armadas en runtime, que no tienen CSS: `bg-${color}-500` — no-dynamic-classes.
• Clases que Tailwind v4 renombró: flex-shrink-0 → shrink-0 — no-deprecated-classes.
• Un color de modo oscuro sin base para el modo claro — no-dark-without-light.
• Valores que tu theme ya nombra: p-[10px] → p-2.5, bg-(--primary) → bg-primary — prefer-scale-token, prefer-theme-tokens.
• Orden y forma: orden de clases y variants, formas canónicas y shorthand, espacios — enforce-sort-order, consistent-variant-order, enforce-canonical, y el resto.

Inicio rápido ​

pnpm add -D oxlint oxlint-tailwindcss

// .oxlintrc.json
{
  "jsPlugins": ["oxlint-tailwindcss"],
  "settings": { "tailwindcss": { "entryPoint": "src/styles.css" } },
  "rules": {
    "tailwindcss/no-unknown-classes": "error",
    "tailwindcss/no-conflicting-classes": "error"
  }
}

npx oxlint

entryPoint es el archivo CSS donde haces @import "tailwindcss". Setup tiene las reglas recomendadas y el setup del editor, el monorepo y el formateador.