svg]:w-4\" />\n```\n\n**Options:**\n\n| Option | Type | Default | Description |\n| ------- | ---------- | ------- | --------------------------------------------------- |\n| `allow` | `string[]` | `[]` | Utility prefixes to allow (e.g. `[\"bg-\", \"text-\"]`) |\n\n**No autofix.**\n\n---\n\n#### `no-hardcoded-colors`\n\nFlags hardcoded color values in arbitrary brackets. Encourages use of design tokens.\n\n```tsx\n// ❌ Bad\n
\n
\n
\n
\n\n// ✅ OK — not a color utility\n
\n
\n```\n\nDetects hex, rgb/rgba, hsl/hsla, oklch, oklab, and other color function values inside `[...]` on\ncolor-related utility prefixes (`bg-`, `text-`, `border-`, `ring-`, `shadow-`, `fill-`, `stroke-`,\netc.).\n\n**Options:**\n\n| Option | Type | Default | Description |\n| ------- | ---------- | ------- | ------------------------- |\n| `allow` | `string[]` | `[]` | Full class names to allow |\n\n**No autofix.**\n\n---\n\n#### `no-unnecessary-arbitrary-value`\n\nDetects arbitrary values that have a named Tailwind equivalent. The arbitrary form produces the\nexact same CSS, so the named class is preferred.\n\n```tsx\n// ❌ Bad → ✅ Fixed\n\"h-[auto]\" → \"h-auto\"\n\"hover:h-[auto]\" → \"hover:h-auto\"\n\n// ✅ OK — no named equivalent\n\"w-[200px]\"\n\"bg-[#custom]\"\n```\n\n**Requires design system.** **Autofix:** Replaces with named class.\n\n---\n\n#### `prefer-theme-tokens`\n\nSuggests replacing raw CSS variable references like `border-(--border)` or `bg-[var(--primary)]`\nwith the equivalent named theme-token utility (`border-border`, `bg-primary`) when one exists in\nyour design system.\n\nUnlike `no-unnecessary-arbitrary-value`, this rule fires even when the named utility produces\n_different_ CSS — for example, in themes that wrap the raw variable in a color function\n(`--color-border: hsl(var(--border))`). Useful to match the official Tailwind VS Code extension's\n`suggestCanonicalClasses` behavior. **Off by default** because the replacement may change observable\nCSS in those setups. (When the theme exposes the variable directly with no wrapping function,\n`border-[var(--border)]` is CSS-equivalent to `border-border` and is owned by\n`no-unnecessary-arbitrary-value` instead.)\n\n```tsx\n// ❌ Bad → ✅ Fixed (when border-border is a valid utility)\n\"border-(--border)\" → \"border-border\"\n\"bg-[var(--primary)]\" → \"bg-primary\"\n\"hover:bg-(--primary)/80\" → \"hover:bg-primary/80\"\n```\n\n**Requires design system.** **Autofix:** Replaces with named class.\n\n---\n\n#### `prefer-scale-token`\n\nReports a hardcoded value that is **numerically equal** to a spacing-scale step or a named theme\ntoken, and suggests the token. This is the rule that matches Tailwind CSS IntelliSense's\n`suggestCanonicalClasses` suggestion for arbitrary lengths (e.g. `pl-[15px]` → `pl-3.75`) — the\nconversion `enforce-canonical` deliberately leaves alone because the CSS isn't byte-identical (see\n[#78](https://github.com/sergioazoc/oxlint-tailwindcss/issues/78)).\n\n**Report-only, on purpose.** There is no autofix: the token resolves through `var(--spacing)`, so a\n`:root` override or a different root font size can make the two diverge. It only ever suggests, so\n`oxlint --fix` skips it while `oxlint --fix-suggestions` applies it in bulk.\n\n```tsx\n// ⚠️ Suggested (not auto-fixed)\n\"p-[10px]\" → \"p-2.5\"\n\"rounded-[0.5rem]\" → \"rounded-lg\"\n```\n\nBy default it reports values on the granularity Tailwind's own scale enumerates (multiples of\n`0.5`). To match IntelliSense exactly — including dynamic steps like `pl-3.75` — set a finer `step`:\n\n```jsonc\n{ \"tailwindcss/prefer-scale-token\": [\"warn\", { \"step\": 0.25 }] }\n```\n\n**Off by default.** **Requires design system.** **No autofix — suggestions only.**\n\n---\n\n## Edge cases\n\nThe class parser correctly handles:\n\n- Nested brackets: `bg-[url('https://example.com/img.png')]`\n- Nested calc: `h-[calc(100vh-var(--header-height))]`\n- Arbitrary variants: `[&>svg]:w-4`, `[&_p]:mt-2`\n- Quoted values: `content-['hello_world']`\n- Important modifier: `!font-bold`\n- Negative values: `-translate-x-1`\n- Named groups/peers: `group/sidebar`, `peer/input`\n\n## Known limitations\n\n- **`enforce-canonical`**: Named classes are canonicalized via the precomputed map (covers\n everything in `getClassList()` plus a curated list of legacy v3 spellings like `break-words`,\n `flex-grow`, `start-N`, `bg-gradient-to-*`, `bg-left-top` → `bg-top-left`). Arbitrary/CSS-var\n forms (`bg-(--c)`, `text-[var(--x)]`) and arbitrary variants (`data-[open]:`, `min-[40rem]:`) are\n canonicalized dynamically via the worker when the result is byte-identical; a value-changing form\n like `p-[2px]` → `p-0.5` is left to `prefer-scale-token`. Some valid v4 classes that don't appear\n in `getClassList()` and have no canonical rewrite (e.g. `border-1` is valid as a dynamic numeric\n value but isn't enumerated) are left untouched.\n- **`no-conflicting-classes`**: compares the emitted declarations (property, value, the custom\n properties each value reads, and which box it applies to), so compositions are derived rather than\n enumerated. Two exceptions cannot be derived and stay declared in the source: `prose` variants and\n `prose` + `max-w-*` (the plugin intends the override, and the CSS looks identical to an accident),\n and `mask-composite` modes. Use the `allow` option for a composition your own plugins produce.\n Still not detected: shorthand vs longhand under different property names (`p-4` vs `px-2` —\n `padding` vs `padding-left`/`padding-right`), and, for classes whose value you wrote (`w-[10px]`),\n the stylesheet position is unknowable, so those diagnostics report the clash without naming a\n winner.\n- **`no-dark-without-light`**: Groups by utility prefix heuristic. May not perfectly match all\n multi-part utility prefixes.\n- **`no-unnecessary-arbitrary-value`**: Only detects equivalences for classes with a single CSS\n property. Multi-property utilities may have arbitrary forms that aren't detected.\n- **Component classes**: Only first-level `@import` relative paths are followed. Deeply nested\n imports or absolute paths are not resolved.\n\n## Supported plugins\n\nThe plugin loads classes through `@tailwindcss/node`, so any plugin imported into your CSS entry\npoint — `@plugin '...'` or `@import '...'` — is recognized automatically by every rule. The\nfollowing are exercised by the test suite:\n\n- **[`@tailwindcss/typography`](https://github.com/tailwindlabs/tailwindcss-typography)** — `prose`,\n `prose-sm/lg/xl`, `not-prose`. `prose` styles both itself and its descendants, and\n `no-conflicting-classes` only compares what a class declares on its own box, so\n `prose overflow-x-auto` is not a conflict.\n- **[`tailwindcss-animate`](https://github.com/jamiebuilds/tailwindcss-animate)** — `animate-in`,\n `animate-out`, `fade-{in,out}-*`, `zoom-{in,out}-*`, `spin-{in,out}-*`,\n `slide-{in-from,out-to}-*`, `duration-*`, `delay-*`, `ease-*`, `direction-*`, `fill-mode-*`,\n `repeat-*`, `running`, `paused`. `animate-in`/`animate-out` initialize all `--tw-enter-*` /\n `--tw-exit-*` custom properties to `initial`, and modifiers (`fade-in`, `zoom-in`,\n `slide-in-from-*`, etc.) each override one of them. `no-conflicting-classes` derives that from the\n emitted CSS — a custom property reset to `initial` carries no information — so it holds for any\n plugin built the same way, not just these two.\n- **[`tw-animate-css`](https://github.com/Wombosvideo/tw-animate-css)** — v4-native rewrite of\n `tailwindcss-animate`. Adds `blur-{in,out}-*`, logical (RTL-aware)\n `slide-{in-from,out-to}-{start,end}-*`, `play-state-*`, `animation-duration-*`, and the\n `animate-accordion-{up,down}` / `animate-collapsible-{up,down}` / `animate-caret-blink` keyframe\n animations used by Radix-style headless component libraries.\n\nOther plugins that emit classes through standard `getClassList()` and CSS output should work out of\nthe box. If you find one that doesn't, open an issue.\n\n## Requirements\n\n- Node.js >= 20\n- Tailwind CSS v4.1 or newer (4.0.x is not supported — it predates a design-system API the plugin\n needs, and is reported with a clear diagnostic)\n- oxlint >= 1.43.0\n\n> **Avoid oxlint 1.77.0 with the editor extension.** 1.77.0 panics the oxlint **language server** on\n> any diagnostic from any JS plugin (`disable_fix.rs:52`, then SIGABRT and a restart loop). It's an\n> oxlint bug, not a plugin one, and the CLI is unaffected (CI is fine). It's **fixed in oxlint\n> 1.78.0** ([oxc#25280](https://github.com/oxc-project/oxc/pull/25280)) — upgrade to `oxlint@1.78.0`\n> or newer (or stay on `1.76.0`) if you use the editor extension.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}