How to Fix TailwindCSS At Rule Warning? 2 Quick Tips for #tailwindcss

If you use Tailwind CSS, you have probably seen this warning. When you add these 3 lines required by Tailwind to your CSS file, VS Code will throw a "unknow at rule" warning at you. It won't break your program, but it's still annoying. Here are two quick ways to fix this issue.

First of all, these are custom CSS rules provided by Tailwind CSS, and Tailwind is actually a PostCSS plugin. So if your code editor supports PostCSS, this won't be an issue. And of course, VS Code can do that with an extension. After installing the "PostCSS Language Support" extension, the warnings will be gone.

On the other hand, you can just tell VS Code to ignore this issue. Go to Preference, and then Settings in your VS Code, search for unknown. The first one will be the CSS Lint Unknow At Rule, it's set to warning by default, change it to ignore. No more warnings.

#tailwindcss #tailwind #css #PostCSS #unknownAtRule

[birkbirk]

i was about to break my monitor :D, thanks dude

[guest]

it was working. Really helpfull video . thank you .

[francodosha]

Thanks bro those errors are annoying af

[rorschach]

here is a new problem, vscode emmet can not work properly

[traconisek]

f it doesnt work just install another postcss (ie intellisense) and then uninstall it and restart extensions.

[larcdianhide]

if you use that plugin you'll loose emmet, just specify that you are using tailwind css down right on the document into vscode and solve it