no-unknown-classes

Examples

Catches class names and variants that produce no CSS. The vocabulary is the bundled Tailwind v4 grammar plus what your CSS declares: @theme tokens (text-2xs, z-modal), @utility names, @custom-variant names, plain class selectors in ui.css and its imports, and selectors in the view's own <style>. A close match is suggested. A misspelled colour token is left to no-raw-colors, which knows the project's tokens.

{{-- Allowed: real utilities, theme tokens, @utility names, custom variants, declared selectors. --}}
<div class="flex-col rounded-lg hover:flex text-2xs z-modal h-control-h-md tap-target legacy-card hocus:flex"></div>

{{-- Reported. --}}
<div class="flex-cols rounded-huge hovr:flex text-smal"></div>

"flex-cols" is not a class this project's Tailwind knows, so no CSS is generated for it. Did you mean "flex-col"?
"hovr:flex" uses a variant this project's Tailwind does not know, so no CSS is generated for it. Did you mean "hover:flex"?

External stylesheets

Allow classes supplied by CSS outside the theme's import graph by name or pattern, or limit them to the component that uses them. An exception does not generate CSS. Start at warning while you add them.

"no-unknown-classes": ["warning", {
  "allow": ["editor-root", "editor-toolbar"],
  "contracts": [{ "pattern": "^editor$", "allow": ["editor-*"] }]
}]

Limits

• By default the linter does not run Tailwind: the grammar accepts a little more than Tailwind does (some invented values on open-ended utilities) and never reports a class it cannot judge. ui:check --oracle asks the project's own Tailwind v4 instead, when Node and tailwindcss are installed.
• Classes from a Tailwind plugin, such as prose, are unknown unless a stylesheet in the import graph declares them. Allow them by name.
• A known class can still be used in the wrong place; that is no-restyle's job.

Configure

In the lint.rules block of ui.json. It accepts allow, deny, contracts, message, include, exclude; see the policy for what the entries match.

"no-unknown-classes": ["warning", { "allow": [...], "deny": [...], "contracts": [], "message": "...", "include": ["resources/views/components/ui"], "exclude": ["resources/views/legacy/**"] }]

php artisan ui:check --explain no-unknown-classes

Suppress one line

{{-- ui-lint-disable-next-line no-unknown-classes: reason --}}