Enforce consistent css variable syntax in Tailwind CSS class strings.
Note
This rule might interfere with better-tailwindcss/enforce-canonical-classes if both rules are enabled. It is recommended to use only one of them to avoid conflicting fixes.
The syntax to enforce for css variables in Tailwind CSS class strings.
The shorthand syntax uses the (--variable) syntax in Tailwind CSS v4 and [--variable] syntax in Tailwind CSS v3.
Type: "variable" | "shorthand"
Default: "shorthand"
Common options
These options are common to all rules and can also be set globally via the settings object.
Flat list of selectors that determines where Tailwind class strings are linted.
Type: Array of Selectors Default: See defaults API
// ❌ BAD: Incorrect css variable syntax with option `syntax: "shorthand"`
<div class="bg-[var(--primary)]" />;// ✅ GOOD: With option `syntax: "shorthand"` in Tailwind CSS v4
<div class="bg-(--primary)" />;// ✅ GOOD: With option `syntax: "shorthand"` in Tailwind CSS v3
<div class="bg-[--primary]" />;// ❌ BAD: Incorrect css variable syntax with option `syntax: "variable"` in Tailwind CSS v4
<div class="bg-(--primary)" />;// ❌ BAD: Incorrect css variable syntax with option `syntax: "variable"` in Tailwind CSS v3
<div class="bg-[--primary]" />;// ✅ GOOD: With option `syntax: "variable"`
<div class="bg-[var(--primary)]" />;