oxlint-tailwindcssTailwind CSS linting for oxlint.

What is oxlint-tailwindcss? ​

oxlint-tailwindcss is a plugin for oxlint, the linter of the Oxc project, that lints Tailwind CSS v4 class names. It loads your project's design system from the CSS entry point you configure — its @theme tokens, @utility and @custom-variant definitions and plugins — and checks every class string in JSX, TSX, JavaScript and TypeScript (and the <script> of Vue, Svelte and Astro files) against it, with 27 rules, most with an autofix.

What it catches ​

• Classes Tailwind can't generate: a typo like itms-center, with the class you meant — no-unknown-classes.
• Classes that override each other: p-4 p-6, or line-clamp-1 flex, where flex replaces the clamp's display — no-conflicting-classes.
• Classes built at runtime, which get no CSS: `bg-${color}-500` — no-dynamic-classes.
• Classes Tailwind v4 renamed: flex-shrink-0 → shrink-0 — no-deprecated-classes.
• A dark-mode color with no light-mode base — no-dark-without-light.
• Values your theme already names: p-[10px] → p-2.5, bg-(--primary) → bg-primary — prefer-scale-token, prefer-theme-tokens.
• Order and form: class and variant order, canonical and shorthand forms, whitespace — enforce-sort-order, consistent-variant-order, enforce-canonical, and the rest.

Quick start ​

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 is the CSS file where you @import "tailwindcss". Setup has the recommended rules and the editor, monorepo and formatter setup.