Fix the Unknown at rule @tailwind warning in VSCode
If you are using TailwindCSS in your project, you have probably already encountered the warning message Unknown at rule @tailwind .
If you use VSCode, you can see the wavy underline in the CSS file and the warning list in the Problems tab.
Several solutions are available online. These include setting the Lint message to ignore or creating a custom rule. These are not very nice solutions.
Recommended VS Code Settings
Fortunately, the officially recommended and easiest solution is to set the correct file association in VS Code. You should set the CSS files to be treated as tailwindcss files.
Open VS Code settings using CTRL + , keyboard shortcut or from the menu File -> Preferences -> Settings
Type "file assoc" into the search field and add or edit exisitng mapping as you can see here:
Save the settings and you are done.
Alternatively, you can edit the settings.json file directly. In this case, add the following code:
"files.associations": {
"*.css": "tailwindcss",
"*.scss": "tailwindcss",
},And the result is:
Resources