Lint UI-309

require-static-classes

Class values on design-system components must be readable by the linter.

UI-309 default: warning tokens DYNAMIC_CLASSES

Examples

What the linter cannot read is invisible to every other rule, so on a design-system component it is a finding of its own. Only the unreadable part is reported; the classes around it are still checked. Tailwind needs complete class names too, so this rule and your production CSS agree.

orders/edit.blade.php Blade

{{-- Allowed: complete class strings, and a choice between complete strings. --}}
<brok:button class="mt-4">Save changes</brok:button>
<brok:button class="{{ $wide ? 'w-full' : 'w-auto' }}">Save changes</brok:button>
<brok:button :class="{ 'w-full': wide }">Save changes</brok:button>
<brok:button @class(['mt-4', 'w-full' => $wide])>Save changes</brok:button>

{{-- Reported: a class built around a value, an echoed variable, a call, an array lookup. --}}
<brok:button class="bg-{{ $tone }}">Save changes</brok:button>
<brok:button class="{{ $classes }}">Save changes</brok:button>
<brok:button class="{{ $errors->has('email') ? 'border-destructive' : '' }}">Save changes</brok:button>
<brok:button @class([$extra, 'mt-4'])>Save changes</brok:button>

terminal

Dynamically built class value on <button> cannot be checked (bg-{{ $tone }}). Use complete class strings,
or choose between them with a condition.

Limits

Only installed design-system components are checked. Plain elements are outside this rule.
The rule has no allow, deny or contracts: it checks whether a value can be read; the other rules decide whether it is allowed.
Component internals are outside the default scan, so a component may still build its own classes from props; include adds the directory when you want them checked.

Configure

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

ui.json JSON

"require-static-classes": ["warning", { "message": "...", "include": ["resources/views/components/ui"], "exclude": ["resources/views/legacy/**"] }]

terminal

php artisan ui:check --explain require-static-classes

Suppress one line

blade

{{-- ui-lint-disable-next-line require-static-classes: reason --}}