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!

Lessons in this unit:

0:	Introduction
1:	Box model properties
2:	Colors
3:	Typography
4:	Flexbox and Grid in Tailwind
5:	Modifiers
6:	Responsive design in Tailwind
7:	Apply a style to children with Tailwind
8:	▶︎ How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
9:	How to align center vertically using Tailwind
10:	How to use custom fonts with Tailwind CSS
11:	Setting up Tailwind CSS on Vite - css
12:	Show-hide an element based on existence of a parent class in Tailwind - css
13:	The Tailwind Cheat Sheet
14:	How to setup Tailwind with PurgeCSS and PostCSS
15:	You can’t generate classes dynamically in Tailwind