Fix "Unknown at rule @tailwind" errors in VS Code
Tags: vscode, tailwindcss, webdev, howtofix
Published: 2024-01-06 14:00:00

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](https://tailwindcss.com/docs/guides/nextjs).

## 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:

```CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

![Unknown at rule @tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6me80tk4wzqmo99fwcrn.jpg)

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](https://stackoverflow.com/questions/76970920/how-to-make-vscode-recognize-tailwinds-apply) 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:
    ```bash
    # Using npm
    npm install tailwindcss

    # Using Yarn
    yarn add tailwindcss
    ```

    Or, for a Next.JS project, like I'm doing:
   
    ```bash
    # 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:
    ```json
    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:

    ```json
    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.  
       ![VS Code TailwindCSS IntelliSense extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3pdajrrrzoz420eo1ys.jpg)
  
    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:
    ![VS Code Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z43m39jqc4028nmzofas.jpg)
        - On a Mac, you can do this by going to **Code > Settings... > Settings**, or by using the keyboard shortcut <kbd>&#8984;</kbd> + <kbd>,</kbd>.
        - On a PC, you can do this by going to **File > Preferences > Settings**, or by using the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>,</kbd>.

    2. Then, in the search bar, type in "files associations", and click on the **Add Item** button under the 'Files: **Associations**' section.  
        ![VS Code Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3arvf8ya6q1j82hdnah.jpg)

    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.  
        ![VS Code Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kx5iekdo6cxgf59046lm.jpg)

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!

![Tailwind CSS IntelliSense installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vf4gzffh7p8gs5w7owtd.jpg)

## 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:

![Tailwind CSS IntelliSense installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8124deyfz0k5t3pzeqw.jpg)

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!