no-inline-styles

Examples

Style through classes; pass dynamic values through CSS custom properties. Each disallowed property is reported separately. Custom properties are checked for hardcoded colours, not for every kind of value, so --panel-width: {{ $width }}px is the sanctioned path. Alpine :style objects are read by their keys; an echoed or bound value the linter cannot read is a dynamic style finding.

{{-- Allowed: classes, and a custom property carrying a dynamic value. --}}
<div class="text-primary">Account settings</div>
<div class="w-(--panel-width)" style="--panel-width: {{ $width }}px"></div>

{{-- Reported: an ordinary property, a hardcoded colour in a custom property,
     a value the linter cannot read, and a <style> element. --}}
<div style="color: var(--color-primary)">Account settings</div>
<div style="--label-color: #ec4899">Account settings</div>
<div style="{{ $panelStyle }}"></div>
<div :style="styles"></div>
<style>.panel { color: red; }</style>

Allow an exception

Entries are CSS property names, not Tailwind classes: backgroundColor and background-color match the same property, border-* matches a family, --* every custom property. An allowed property is not checked further. Contracts match the component name as written; plain elements use the top-level policy.

"no-inline-styles": ["error", {
  "allow": ["transform"],
  "contracts": [{ "pattern": "^motion$", "allow": ["transform", "opacity"] }]
}]

Limits

• Echoed style values and Alpine bindings without readable keys are reported as unreadable rather than inspected.
• Class and property exceptions do not exempt <style> elements or unreadable values.
• Inline colours, lengths and z-index values are also reported by the narrower token rules (UI-301, UI-302, UI-303).

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-inline-styles": ["warning", { "allow": [...], "deny": [...], "contracts": [], "message": "...", "include": ["resources/views/components/ui"], "exclude": ["resources/views/legacy/**"] }]

php artisan ui:check --explain no-inline-styles

Suppress one line

{{-- ui-lint-disable-next-line no-inline-styles: reason --}}