oxlint-tailwindcss plugin
27 oxlint rules for Tailwind CSS v4 plus a skill and a Claude Code plugin: class typos, conflicts and deprecated utilities.
- 108 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The rules read your code and CSS and only report findings, while autofixes edit files.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/oxlint-tailwindcssDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The rules read your code and CSS and only report findings, while autofixes edit files.
This is third-party code. Review the repository files before installing.
What it does
A set of 27 oxlint rules for Tailwind CSS v4: it catches unknown classes with a suggestion (`itms-center` to `items-center`), conflicting utilities such as `text-red-500` and `text-blue-500`, deprecated classes (`flex-grow` to `grow`) and sorts classes the same way as oxfmt and prettier-plugin-tailwindcss. The rules read your real design system: `@theme` tokens, shadcn variables and plugins such as `@tailwindcss/typography`. For agents the repository ships the `oxlint-tailwindcss` skill, installed with `npx skills add`, and a Claude Code plugin. The plugin shows diagnostics while Claude edits files and checks the touched files before finishing. Results are deterministic: the same input gives the same output on every machine and in CI.
Who it is for. Frontend developers on Tailwind v4 with oxlint who want the same class check for people, agents and CI.
Good fit when
- An agent writes Tailwind markup and class typos surface only in the browser.
- A class string holds conflicting utilities and one overrides the other.
- Code is moving to v4 and deprecated classes like `flex-grow` have to be found automatically.
- Class sorting must match oxfmt and Prettier.
Not a fit when
- The project runs Tailwind v3 or an earlier v4 release; Tailwind v4.1.15 or newer is required.
- ESLint is the linter and oxlint is not used.
- Classes are built dynamically from variables and the `no-dynamic-classes` rule is too strict for that.
Example request
Check the components in src for conflicting and deprecated Tailwind classes and fix what you find.Limitations
Tailwind CSS v4.1.15 or newer is required because earlier releases lack the design-system interface the rules use. You must set the CSS entry point in `.oxlintrc.json`, otherwise a `designSystemUnavailable` diagnostic with a hint appears instead of rules being skipped silently. In `.vue`, `.svelte` and `.astro` files oxlint passes plugins only the `<script>` blocks, as the frameworks page explains. A monorepo needs one root config with a glob to CSS mapping or one file per package. The plugin checks classes only and does not replace a formatter.
How to disable. Remove `oxlint-tailwindcss` from `jsPlugins` in `.oxlintrc.json` and uninstall the package, then disable the plugin through `/plugin`.
FAQ
How do I add the rules to a project?
Run `pnpm add -D oxlint-tailwindcss`, add `oxlint-tailwindcss` to `jsPlugins` in `.oxlintrc.json` and set your Tailwind CSS entry point.
How do I install the agent skill?
With `npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss`. It works with any agent that reads the skill format.
How do I install the plugin in Claude Code?
Run `/plugin marketplace add sergioazoc/oxlint-tailwindcss`, then `/plugin install oxlint-tailwindcss@oxlint-tailwindcss`.
What rule categories are there?
Four categories, including correctness (`no-unknown-classes`, `no-conflicting-classes`) and modernization (`no-deprecated-classes`, `enforce-canonical`). Every rule has a page with examples.
What happens on misconfiguration?
A single `designSystemUnavailable` diagnostic with a hint appears. Rules are not skipped silently, and a misspelt setting is named alongside the right one.
Discussion
No questions or reviews yet.
Related
PluginsA skill that edits UI inside live code with no extra dependencies: components, sections, pages and RTL with Arabic for your stack
Tailwind CSS Shades: Tailwind palettes and MCP
Tailwind CSS Shades
A Tailwind palette from 50 to 950 for any color: a VS Code extension, a CLI and an MCP server so agents stop guessing shades
A skill gives an agent modern CSS techniques: one declaration instead of piles of breakpoints, and a CSS feature before a script.
Preline UI skills for agents: assemble Tailwind CSS component interfaces and generate themes from tokens
A 147-rule design check that finds AI-interface tells, fixes the mechanical ones and hands the rest to an agent skill
Swiss Design Skill
swiss-design-skill
A skill that gives the agent a Swiss style on Tailwind: 12-column grid, IBM Plex Sans, a single accent and generous whitespace.
README in short
The oxlint plugin reads the Tailwind v4 design system and checks class strings, while the skill and the Claude Code plugin bring this check into agent work.