CODEWITHSUNDEEP
webstormtailwind-css
Francesco Borzi
Francesco Borzi

Reputation: 61994

Tailwind + WebStorm: "unknown CSS at rule"

I'm trying to use Tailwind with my WebStorm IDE, however, I get this error:

Unknown CSS at rule

whenever I use @apply or @tailwind

Upvotes: 13

Views: 15789

Answers (5)

lena
lena

Reputation: 93868

Tailwind is not currently supported, please follow WEB-42792 and linked tickets for updates.

Disabling Unknown CSS at-rule inspection in Preferences | Editor | Inspections | CSS | Invalid elements is the only way to avoid Unknown CSS At Rule error; note that some Tailwind rules can cause syntax errors that come from low level checking and can't be disabled (like Unexpected token, etc.). In such cases, I can only suggest turning the syntax highlighting off for such files to avoid errors: open your file in editor, click the Hector icon in the lower right corner and then move the slider to change the Highlighting level to None, then re-open the project. See https://www.jetbrains.com/help/phpstorm/disabling-and-enabling-inspections.html#change-highlighting-level-for-file.

Update: Tailwind is officially supported starting from version 2020.3.

Upvotes: 7

Laban
Laban

Reputation: 2502

Install tailwind css plugin to support tailwind. See link below https://www.jetbrains.com/help/webstorm/tailwind-css.html

Upvotes: 3

Mazerty
Mazerty

Reputation: 161

IMHO disabling the inspection is the wrong way to go since the point of this inspection is to warn whether the rule is correct or not, and here the problem is merely that the IDE doesn't know of it :)

To fix that you can add the Tailwind plugin (https://plugins.jetbrains.com/plugin/15321-tailwind-css). It will make the IDE aware of the new rules, and add a lot of new features like class autocompletion :)

Upvotes: 6

unloogle
unloogle

Reputation: 81

If you don't want to disable at-rules errors in your configuration IDE. You can choose this syntax. Hope this will help :)

// noinspection CssInvalidAtRule
@tailwind base;
// noinspection CssInvalidAtRule
@tailwind components;
// noinspection CssInvalidAtRule
@tailwind utilities;

Upvotes: 8

Francesco Borzi
Francesco Borzi

Reputation: 61994

Apparently I had to disable the inspection Unknown CSS at-rule - This inspection detects unknown CSS at-rules. from my Preferences -> Editor -> Inspections under the CSS -> Invalid elements category

Upvotes: 3

Related Questions