[Solved] Unknown at rule @tailwind warning in VS Code

Introduction

The unknown at rule @tailwind warning is a common issue that many beginner developers encounter when working with Tailwind CSS in Visual Studio Code (VS Code). This warning arises because VS Code has not recognized the @tailwind directive, which is crucial for injecting Tailwind CSS into our stylesheets. In this blog post, we'll address this issue with a simple solution that can be implemented with just a few clicks.

Sweet Tip: This warning is ignorable i.e. it won't cause any serious issue as its related to your IDE more than project itself. You will need to install official tailwindcss extension for vs code.

When using Tailwind CSS, we typically utilize @tailwind directives to import Tailwind CSS into our main stylesheet. These directives usually look like this:

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

Solution

To fix the unknown at rule @tailwind warning and associate Tailwind CSS with your CSS files in VS Code, follow these steps:

1. At the bottom of the VS Code window, you will see "CSS" and while hovering it, a tooltip "Select Language mode" will occur. Click on "CSS" option .

2. Now choose Configure File Association for '.css' :

3. In search bar type tailwindcss and select Tailwind CSS option:

4. That's it! We have associated our .css files with tailwindcss and now warning should be gone! 

Conclusion

By following these simple steps, you've successfully associated your CSS files with Tailwind CSS settings in VS Code, eliminating the "unknown at rule @tailwind" warning. Now you can continue developing your projects with Tailwind CSS seamlessly. Happy coding !