Tailwind + WebStorm: "unknown CSS at rule"

Question

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

Answer 1

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.

Answer 2

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;