Title: Tailwind + WebStorm: "unknown CSS at rule"
Tags: webstorm;tailwind-css
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


Here is another answer: 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.
Comment for this answer: As of IntelliJ 2020.3 there's now official Tailwind support via a plugin, hooray!

Here is another answer: 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;

Here is another answer: 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 :)
Comment for this answer: While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
Comment for this answer: But why do that if disabling a couple features also solves the problem, as proposed in the two top answers?

Here is another answer: 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

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 4, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2019:00:12/17/19', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<webstorm><tailwind-css>', 'Title': 'Tailwind + WebStorm: "unknown CSS at rule"', 'ViewCount': 12030, 'id': 59371980, 'user_AboutMe': '<p><a href="https://github.com/FrancescoBorzi" rel="nofollow noreferrer">https://github.com/FrancescoBorzi</a></p>\n', 'user_AccountId': 4177150.0, 'user_DisplayName': 'Francesco Borzi', 'user_Reputation': 50561.0, 'user_Views': 1916.0, 'user_id': 3497671.0}}