noInvalidTailwindSyntax (or noInvalidTailwindAtRules)

[gameroman]

Disallow invalid nesting or usage of @variant inside @theme or inside @layer theme without a scoping target (for example :root)

Directives like @variant are supported inside @utility blocks or attached to DOM/theme targets, but @variant in @theme, or inside @layer theme without a scoping selector results in invalid CSS or ignored styles

---

AI agents often hallucinate invalid syntax so I think catching it early with a linter would be a good idea

❌ Invalid

Completely invalid syntax

@theme {
  --color-primary: oklch(41% 0.12 302);

  @variant dark {
    --color-primary: oklch(24% 0.07 273);
  }
}

Valid syntax but gives not what you'd expect

@layer theme {
  @variant dark {
    --color-primary: oklch(24% 0.07 273);
  }
}

✅ Valid

@theme {
  --color-primary: oklch(41% 0.12 302);
}

@layer theme {
  :root {
    @variant dark {
      --color-primary: oklch(24% 0.07 273);
    }
  }
}

---

Could also be 2 separate rules

[dyc3]

Syntax errors are raised by our css parser automatically. But, as you pointed out, you can have css that is technically valid syntactically, but tailwind won't interpret correctly. So I think a noInvalidTailwindAtRules rule makes sense.

Do you have any more examples we would flag? What docs can we reference for what's valid and invalid?

[gameroman]

These are examples that I found, but there might be more

Tailwind docs can be helpful for valid examples

For completely invalid syntax, tailwind playground can be helpful

For valid syntax that gives not what you'd expect, I don't think there's much