SonarCloud: Fixing unexpected unknown at-rule @tailwind

SonarCloud: Fixing unexpected unknown at-rule @tailwind

I'm a big fan of using SonarCloud. Not only does it help to maintain the quality of your projects but the error descriptions are good enough to provide a nice training aspect to developers.

However at some point your going to receive bug reports for things that just aren't bugs.

For example if you are using Tailwind, you may get a Unexpected unknown at-rule "@tailwind" bug reported if you use @tailwind in your code.

Unexpected unknown at-rule "@tailwind"

You know your code is correct, it's just that SonarCloud doesn't know about Tailwind.

Fortunately Sonar allows you to extend all of the built in rules so that you can add customizations to work around things like this.

Fixing unexpected unknown at-rule @tailwind in Sonar

In Sonar, go to the Quality Profiles section.

The Quality Profiles screen lists out to collections of rules which are applied during analysis. From here you can make completely new collections, extend collections and change the defaults ones. With multiple profiles configured you could even have different collections per project.

Filter by the language CSS and then use the settings menu at the end of the Sonar way profile to extend the profile.

Sonar Cloud Quality Profiles screen filtered to CSS

Your new profile will appear under the Sonar way one. Now set it as the default using the settings drop down again. From now on our extended profile will be used during analysis and because its an extension of the Sonar Way, we haven't lost any existing rules. Equally as new rules are added to the default, our extended profile will pick these up too.

Sonar quality profile, set as default.

To update the rule causing unexpected unknown at-rule @tailwind go to the Rules section and filter by CSS.

Sonar CSS Rules

Pick the rule that needs updating. In our case this is "at-rules" should be valid.

At the bottom of this page you will see our Extended profile and the Sonar way profile.

Sonar Rule profile

Click the change button on the Extended profile.

You will get the rule definition. Simply add tailwind to this list of values.

Sonar Edit Rule

Once you save, the profiles on the rules will show that the extended rule has been changed.

Sonar rule updated

That's it. Now when your analysis next runs your extended profile will be used and @Tailwind in your code will no longer fail the at-rule.