Problem: you include Tailwind in a project and VS Code shows warnings like Unknown at rule for Tailwind-specific CSS.

With Tailwind v4, your CSS usually starts like this:

@import "tailwindcss";

@source "../views/**/*.blade.php";

@import is standard CSS, but Tailwind directives like @source (or @theme) can still trigger the warning.

Here are three ways to fix it.

1) Use Tailwind CSS language mode

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.

2) Associate CSS files with Tailwind CSS

Open .vscode/settings.json (create it if you don’t have it) and add:

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

3) Hide the warnings

Open the VS Code settings, search for “unknown”, and set CSS > Lint: Unknown At Rules 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
12:	Show-hide an element based on existence of a parent class in Tailwind
13:	The Tailwind Cheat Sheet
14:	How to set up Tailwind CSS (v4)
15:	You can’t generate classes dynamically in Tailwind