Skip to content

How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code

New Course Coming Soon:

Get Really Good at Git

Problem: you include Tailwind in a project like this, but you get the warning Unknown at rule @tailwindcss(unknownAtRules) in VS Code:

Here’s how to fix this.

Open a CSS file in your project, and from the VS Code Command Palette choose “Change Language Mode”, then pick “Tailwind CSS” from the list.

Another way is to open .vscode/settings.json (create it if you don’t have it in your project) and type

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

In VS Code you can also hide those warnings, because they’re just …warnings we don’t need to be warned about.

Open the settings, search for “unknown”, the first result should be the one you’re looking for: CSS > Lint: Unknown At Rules:

Change that to ignore:

Done!

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching Summer 2024. Join the waiting list!
→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code
→ Read my Tailwind CSS Tutorial on The Valley of Code

Here is how can I help you: