# oxlint-tailwindcss

> oxlint-tailwindcss is the oxlint plugin for Tailwind CSS v4: lint rules that check your classes against your own design system, with autofixes.

Install with `npm install -D oxlint-tailwindcss` (or pnpm, yarn, bun), add it to `jsPlugins` in
`.oxlintrc.json`, and point `settings.tailwindcss.entryPoint` at the CSS file that imports
Tailwind. Every rule is documented below; each link is the page as markdown.

## Docs

- [Tailwind CSS linting for oxlint](https://oxlint-tailwindcss.pages.dev/index.md): oxlint-tailwindcss is the oxlint plugin for Tailwind CSS v4: lint rules that check your classes against your own design system, with autofixes.
- [Setup](https://oxlint-tailwindcss.pages.dev/setup.md): Install oxlint-tailwindcss, point it at your Tailwind CSS entry file and turn on its rules: requirements, a starting config, and what each file type covers.
- [Vue, Svelte & Astro](https://oxlint-tailwindcss.pages.dev/frameworks.md): Which parts of .vue, .svelte and .astro files oxlint-tailwindcss checks today — the scripts, not the templates — and how to keep class lists covered.
- [Settings](https://oxlint-tailwindcss.pages.dev/settings.md): Every settings.tailwindcss option of oxlint-tailwindcss — entryPoint, rootFontSize, timeout, debug and the class extractor — plus its environment variables.
- [Monorepos](https://oxlint-tailwindcss.pages.dev/monorepo.md): Use oxlint-tailwindcss in a monorepo: one config with an entryPoint mapping, or one .oxlintrc.json per package, and what can differ between packages.
- [Running in CI](https://oxlint-tailwindcss.pages.dev/ci.md): Run oxlint-tailwindcss in CI: pull-request annotations, the design-system precompute cached between jobs, per-rule timings, and what to trust.
- [Interop with oxfmt and Prettier](https://oxlint-tailwindcss.pages.dev/interop.md): Run oxlint-tailwindcss next to oxfmt or prettier-plugin-tailwindcss and get the same Tailwind CSS class order from all three, by pointing them at your CSS.
- [Rules](https://oxlint-tailwindcss.pages.dev/rules/index.md): All oxlint-tailwindcss lint rules for Tailwind CSS, grouped by what they catch, with each rule's default options and whether it needs your design system.
- [Migrating from v0 to v1](https://oxlint-tailwindcss.pages.dev/migration/v0-to-v1.md): Upgrade oxlint-tailwindcss from v0.x to v1: deterministic entryPoint shapes, design-system errors that fail loud, cache and timeout changes, new rule options.
- [oxlint-tailwindcss for AI coding agents](https://oxlint-tailwindcss.pages.dev/ai-agents.md): Use oxlint-tailwindcss with AI coding agents: a skill that sets it up, and a Claude Code plugin that checks the Tailwind classes Claude writes.
- [Tailwind CSS lint plugins benchmark](https://oxlint-tailwindcss.pages.dev/benchmark.md): oxlint-tailwindcss, @shadcn/lint and better-tailwindcss on shadcn/ui's apps/v4: mistakes caught, false positives, speed, and what their fixes do.
- [oxlint-tailwindcss, @shadcn/lint and better-tailwindcss compared](https://oxlint-tailwindcss.pages.dev/comparison.md): What oxlint-tailwindcss, @shadcn/lint and eslint-plugin-better-tailwindcss each check, measured on the same code, and which to use when.
- [FAQ](https://oxlint-tailwindcss.pages.dev/faq.md): Answers about oxlint-tailwindcss: ESLint and Tailwind v3, which rules run, the entry point, Vue and Svelte, unknown classes that work, --fix, formatters and CI.
- [Migrating from eslint-plugin-better-tailwindcss](https://oxlint-tailwindcss.pages.dev/migration/from-better-tailwindcss.md): Move from eslint-plugin-better-tailwindcss to oxlint-tailwindcss: each of its rules and settings mapped, what differs, and the switch step by step.
- [shadcn/ui and @shadcn/lint](https://oxlint-tailwindcss.pages.dev/shadcn.md): oxlint-tailwindcss in a shadcn/ui project, alongside @shadcn/lint: who reports what, one combined .oxlintrc.json, and what it finds in shadcn/ui itself.

## Rules

- [consistent-variant-order](https://oxlint-tailwindcss.pages.dev/rules/consistent-variant-order.md): oxlint rule that writes Tailwind CSS variant chains outermost first — dark:hover:, not hover:dark: — and rewrites the rest to match, with an autofix.
- [enforce-canonical](https://oxlint-tailwindcss.pages.dev/rules/enforce-canonical.md): oxlint rule that rewrites Tailwind CSS classes to the canonical form Tailwind itself computes, like -m-0 → m-0, with an autofix.
- [enforce-consistent-important-position](https://oxlint-tailwindcss.pages.dev/rules/enforce-consistent-important-position.md): oxlint rule that puts the Tailwind CSS important modifier in one position — suffix flex! (the v4 form) or prefix !flex — and fixes the rest.
- [enforce-consistent-line-wrapping](https://oxlint-tailwindcss.pages.dev/rules/enforce-consistent-line-wrapping.md): oxlint rule that reports Tailwind CSS class strings over a print width or a classes-per-line budget, and can wrap them onto several lines.
- [enforce-consistent-variable-syntax](https://oxlint-tailwindcss.pages.dev/rules/enforce-consistent-variable-syntax.md): oxlint rule that writes Tailwind CSS variable values one way — shorthand bg-(--primary) or bg-[var(--primary)] — and rewrites the other form.
- [enforce-logical](https://oxlint-tailwindcss.pages.dev/rules/enforce-logical.md): oxlint rule that rewrites physical Tailwind CSS utilities into logical, RTL-friendly ones, like ml-4 → ms-4 and pr-2 → pe-2, with an autofix.
- [enforce-negative-arbitrary-values](https://oxlint-tailwindcss.pages.dev/rules/enforce-negative-arbitrary-values.md): oxlint rule that moves the negative sign into Tailwind CSS arbitrary values, like -top-[5px] → top-[-5px], with an autofix.
- [enforce-physical](https://oxlint-tailwindcss.pages.dev/rules/enforce-physical.md): oxlint rule for LTR-only projects that rewrites logical Tailwind CSS utilities into physical ones, like ms-4 → ml-4 — the mirror of enforce-logical.
- [enforce-shorthand](https://oxlint-tailwindcss.pages.dev/rules/enforce-shorthand.md): oxlint rule that merges Tailwind CSS utilities with the same value on every side into their shorthand, like mt-2 mr-2 mb-2 ml-2 → m-2 or w-4 h-4 → size-4.
- [enforce-sort-order](https://oxlint-tailwindcss.pages.dev/rules/enforce-sort-order.md): oxlint rule that sorts Tailwind CSS classes in the official order — the one prettier-plugin-tailwindcss and oxfmt use — with an autofix.
- [max-class-count](https://oxlint-tailwindcss.pages.dev/rules/max-class-count.md): oxlint rule that reports a Tailwind CSS class string with more classes than a set maximum (20 by default) — a sign it should be a component.
- [no-arbitrary-value](https://oxlint-tailwindcss.pages.dev/rules/no-arbitrary-value.md): oxlint rule that reports Tailwind CSS arbitrary values like w-[200px] or bg-[#ff0000], so values come from your theme; an allow list covers exceptions.
- [no-borrowed-component-styles](https://oxlint-tailwindcss.pages.dev/rules/no-borrowed-component-styles.md): oxlint rule that reports a plain element rebuilding one of your components from Tailwind CSS classes: a hand-made Button, Card or Input.
- [no-conflicting-classes](https://oxlint-tailwindcss.pages.dev/rules/no-conflicting-classes.md): oxlint rule that reports Tailwind CSS classes on one element whose CSS clashes, like p-2 p-4, comparing the declarations your design system emits.
- [no-contradicting-variants](https://oxlint-tailwindcss.pages.dev/rules/no-contradicting-variants.md): oxlint rule that reports Tailwind CSS variant classes made redundant by the same utility applied unconditionally, like hover:flex next to flex.
- [no-dark-without-light](https://oxlint-tailwindcss.pages.dev/rules/no-dark-without-light.md): oxlint rule that reports a Tailwind CSS dark: colour, like dark:bg-gray-900, with no class setting that colour for light mode on the element.
- [no-default-palette](https://oxlint-tailwindcss.pages.dev/rules/no-default-palette.md): oxlint rule that reports Tailwind CSS default palette colors, like bg-red-500, in a project whose theme defines its own colors — and names the ones to use.
- [no-deprecated-classes](https://oxlint-tailwindcss.pages.dev/rules/no-deprecated-classes.md): oxlint rule that rewrites Tailwind CSS classes renamed in v4, like flex-grow → grow and bg-gradient-to-r → bg-linear-to-r, with an autofix.
- [no-duplicate-classes](https://oxlint-tailwindcss.pages.dev/rules/no-duplicate-classes.md): oxlint rule that reports a Tailwind CSS class repeated in the same class list, like flex flex, and removes the extra copies with --fix.
- [no-dynamic-classes](https://oxlint-tailwindcss.pages.dev/rules/no-dynamic-classes.md): oxlint rule that reports Tailwind CSS classes built at runtime, like bg-${color}-500, which Tailwind never sees written out and so generates no CSS for.
- [no-hardcoded-colors](https://oxlint-tailwindcss.pages.dev/rules/no-hardcoded-colors.md): oxlint rule that reports hardcoded colors in Tailwind CSS arbitrary values — hex, rgb(), hsl(), oklch() and more — so colors come from your theme.
- [no-restricted-classes](https://oxlint-tailwindcss.pages.dev/rules/no-restricted-classes.md): oxlint rule that bans the Tailwind CSS classes you list, by exact name or regex, each with a message saying what to use instead.
- [no-unknown-classes](https://oxlint-tailwindcss.pages.dev/rules/no-unknown-classes.md): oxlint rule that reports Tailwind CSS classes your design system doesn't generate, checked against your CSS, with typo fixes like itms-center → items-center.
- [no-unnecessary-arbitrary-value](https://oxlint-tailwindcss.pages.dev/rules/no-unnecessary-arbitrary-value.md): oxlint rule that replaces a Tailwind CSS arbitrary value with the named class that emits the same CSS in your theme, like w-[100%] → w-full.
- [no-unnecessary-whitespace](https://oxlint-tailwindcss.pages.dev/rules/no-unnecessary-whitespace.md): oxlint rule that collapses repeated spaces and trims leading and trailing whitespace in Tailwind CSS class strings, with an autofix.
- [prefer-scale-token](https://oxlint-tailwindcss.pages.dev/rules/prefer-scale-token.md): oxlint rule that suggests the Tailwind CSS scale step or theme token a hardcoded value equals, like p-[10px] → p-2.5 or rounded-[0.5rem] → rounded-lg.
- [prefer-theme-tokens](https://oxlint-tailwindcss.pages.dev/rules/prefer-theme-tokens.md): oxlint rule that rewrites raw CSS variable references into your theme's named Tailwind CSS utilities, like border-(--border) → border-border.

## Optional

- [llms-full.txt](https://oxlint-tailwindcss.pages.dev/llms-full.txt): every English page above in one file
- [Documentación en español](https://oxlint-tailwindcss.pages.dev/es/index.md): oxlint-tailwindcss es el plugin de oxlint para Tailwind CSS v4: reglas de lint que revisan tus clases contra tu propio design system, con autofixes.
- [Changelog](https://github.com/sergioazoc/oxlint-tailwindcss/blob/main/packages/oxlint-tailwindcss/CHANGELOG.md): release notes
- [npm](https://www.npmjs.com/package/oxlint-tailwindcss): the package