Tailwind CSS v4 upgrade S4662 false positive on [at]theme

Rules and Languages Report False-positive / False-negative...
1

  • What language is this for? CSS

  • Which rule? S4662

  • Why do you believe it’s a false-positive/false-negative? [at]theme was generated by tailwind’s own upgrade tool for moving from v3 to v4*

  • Are you using

    • SonarQube Server / Community Build - which version? Server - Enterprise Edition v9.9.6

  • How can we reproduce the problem? Give us a self-contained snippet of code (formatted text, no screenshots)

[global.css in NextJS/React project]

@import 'tailwindcss';

@theme {
  --font-roboto: 'Roboto', sans-serif;

  --color-petrol-blue: rgba(0, 115, 152, 1);
  --color-petrol-blue-o-12: rgba(0, 115, 152, 0.12);
}
3

Hey there.

I’d suggest that you go ahead and customize the rule in your Quality Profile to exclude theme

image
image1880×346 25.7 KB

FYI, this rule is provided by stylelint and run by our analyzers. The version of Stylelint gets upgraded with SonarQube upgrades, and I’d encourage you to upgrade to v2025.1 LTA, although I double-checked, and it doesn’t fix this issue.

I’ll check with our team if @theme should be added to the list of default exclusions in a future update.

1 Like
5

Thanks Colin - This seems to be a standard use case in Tailwindcss, so hopefully it will make it into a future update of the default exclusions.

6

I am also seeing this issue with SonarQube Cloud.
I had to add the following exclusions to the S4662 rule: utility,theme,source,plugin,custom-variant

7

Hi @mvanvoorhies,
Thank you for your report. It is an ongoing race to support each and every framework. I have created a ticket to track its’ progress: Jira

Cheers,
Michal