Fix "Unknown at rule @tailwind" errors in VS Code

TailwindCSS is something I've only just come into recently, while working on an existing project started by someone else. So I'm a complete beginner when it comes to Tailwind.

Initially I couldn't really see the point of Tailwind. I mean it really just looked to me like writing inline-style rules, but in the class attribute instead of the style attribute. But since the project was already using it, I had to at least understand the basics.

Well, after using it for a while, and reading through some of the Tailwind docs, I can now see the benefits, and I'm actually starting to really like it. So when I started bootstrapping a new project a few weeks ago, I thought "Hey, why not use Tailwind?"!

So after bootstrapping my app, and since I'm building the app using Next.JS, I started by installing TailwindCSS following the Tailwind docs for a Next JS installation.

The Problem

After getting Tailwind installed, I checked out a few of the files, and I noticed an issue that had been bothering me in my last project ... Visual Studio Code's IntelliSense wasn't working for the @tailwind and @apply directives in my global styles file! 😡

So while the directives should have looked something like this, with no errors:

@tailwind base;
@tailwind components;
@tailwind utilities;

Visual Studio Code was underlining them with the yellow squiggly line, indicating a problem:

Specifically, Visual Studio Code was throwing the errors "Unknown at rule @tailwind" or "Unknown at rule @apply", depending on which one(s) I was using.

On the last project, laziness got the better of me and I just ignored it, and it didn't seem to be causing any issues. But this time, starting a new project, I had to do something about it or I knew it would just drive me nuts! 😒

So after some quick digging, I found a few stackoverflow posts that addressed the issue a few different ways, but this more recent one was the most up to date, and to the point.

However, like the other answers I found, it was missing a crucial step I needed to get it working. So after doing some more digging, and a bit of trial and error, I was finally able to get things working.

Here's what I did to fix the issue:

Fix VS Code's IntelliSense for TailwindCSS

1. First off, if you haven't already, start by installing the TailwindCSS package in your project:
   

   # Using npm
   npm install tailwindcss
   
   # Using Yarn
   yarn add tailwindcss
   

   Or, for a Next.JS project, like I'm doing:
   

   # Using npm
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   
   # Using Yarn
   yarn add -D tailwindcss postcss autoprefixer
   yarn dlx tailwindcss init -p
   

2. Next, in your tailwind.config.css, which was just created with the tailwindcss init -p command, add the following to the module.exports content key:
   

   content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   

   Or, if you're using the 'src' folder in your project:
   

   content: [
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   

3. Once that's done, and this was the crucial missing step in the answers I found online:

   1. Go into your extensions in Visual Studio Code, and
   2. Install the Tailwind CSS IntelliSense extension.

   This is what will allow Visual Studio Code to actually recognize the directives.

4. And then finally, after the TailwindCSS IntelliSense extension is installed, you'll need to add a file association. To do this:

   1. Go into your Visual Studio Code settings:
      • On a Mac, you can do this by going to Code > Settings... > Settings, or by using the keyboard shortcut ⌘ + ,.
      • On a PC, you can do this by going to File > Preferences > Settings, or by using the keyboard shortcut Ctrl + ,.
   2. Then, in the search bar, type in "files associations", and click on the Add Item button under the 'Files: Associations' section.
   3. Under the Item column, add "*.css" (without the quotes), and under the Value column, add "tailwindcss" (again, without the quotes). Click the Ok button to save the changes.

And that's all there is to it!

Simple eh? 😁

Now, when you use the @tailwind and @apply directives in your CSS files, Visual Studio Code will no longer throw the "Unknown at rule @tailwind" or "Unknown at rule @apply" errors, and you'll get the IntelliSense you're used to with CSS!

Notes

If you've followed posts online that miss the installation of the TailwindCSS IntelliSense extension, you'll end up with broken IntelliSense for CSS, and your CSS files will look like regular text files without any highlighting:

So if you've followed other instructions online that left you with non-highlighted CSS files and broken IntelliSense, you're just missing the TailwindCSS IntelliSense extension to fix things up!

Hope this post was able to help if you were in the same boat as me!