How to Fix unknownAtRules Warnings From Tailwind CSS - Code Concisely

Published
Published
Description
Slug
URL
https://www.codeconcisely.com/posts/tailwind-css-unknown-at-rules/
Tags
Date
Apr 3, 2023
category
notion image

If you are using VSCode to work on a project that uses Tailwind CSS, you might see warnings in the CSS file that imports Tailwind CSS.
notion image
Unknown at rule @tailwind
The warning can be easy to miss, unless you use a plugin like Error Lens, which shows errors and warnings inline. Then warnings become hard to ignore.
So, how do you resolve “Unknown at rule @tailwind” warnings? There are a few solutions to try:

Installing Tailwind CSS IntelliSense Plugin

To fix “Unknown at rule @tailwind” warning, start by installing Tailwind CSS IntelliSense plugin.
When that is done, you need to associate your CSS file with Tailwind CSS.
    1. Open the CSS file where you import Tailwind CSS
    1. Press Shift + P and search for “change language mode
      notion image
    1. Inside the search bar, type “tailwindcss” and select it.
      notion image
Now your CSS file is associated with Tailwind CSS and the warnings should be gone.
If you want all CSS files from now on to be associated with Tailwind CSS, you can adjust VSCode settings for that.
    1. Open Settings by pressing Shift + P and searching for ”open user settings“.
      notion image
    1. Inside the search bar, type “file associations”.
    1. Under Files: Associations, press Add Item
    1. In the Key field type *.css and in the Value field type tailwindcss
      notion image
However, this solution won’t work if you are using Sass or another CSS preprocessor.

Ignoring Warnings

You can ignore the “Unknown at rule @tailwind” warning with a custom settings file.
    1. Create a .vscode folder in the root of your project
    1. Add a settings.json file inside that folder
    1. Add the following object to the settings.json file:
      { "css.lint.unknownAtRules": "ignore" }
If you are using Sass, adjust the settings.json file accordingly:
{ "scss.lint.unknownAtRules": "ignore" }
This will hide the warnings in your current project.
If you want to hide this warning in all your projects, you can change VSCode settings.
    1. Open Settings by pressing Shift + P and searching for “open user settings”.
    1. Inside the search bar, type “unknown at rules”.
      notion image
    1. From the CSS > Lint: Unknown At Rules dropdown, select ignore.
      notion image

Adding Custom At Rules

An alternative to ignoring the warnings is to describe the directives yourself.
Create a css-data.json file inside .vscode directory in the root folder of your project.
{ "version": 1.1, "atDirectives": [ { "name": "@tailwind", "description": "Use the @tailwind directive to insert Tailwind's `base`, `components`, `utilities`, and `screens` styles into your CSS." }, { "name": "@apply", "description": "Use @apply to inline any existing utility classes into your own custom CSS." } ] }
In this file you can add objects that contain the name of the directive and a description. When you hover this directive in your code, the contents of description will show up.
Inside .vscode/settings.json, add a css.customData key that points to the css-data.json file relative to the workspace root directory.
{ "css.customData": ["./.vscode/css-data.json"] }
There are other directives that Tailwind CSS uses that you might need to add. You can see the full list in this StackOverflow answer.

Making Error Lens Ignore Warnings

If you are a user of Error Lens VSCode plugin, you can change its settings to not show warnings.
    1. In VSCode, open Preferences: Open User Settings by pressing Shift + P and searching for “open user settings”.
    1. At the top, type in the Search settings search bar “error lens”
    1. Under Error Lens extension settings, look for Error Lens: Enabled Diagnostic Levels
      notion image
    1. Remove warning level by pressing the cross icon (X) on the right
This will get rid of the “Unknown at rule @tailwind” warning. Of course, it will stop showing other warnings as well. But, you will still be able to see errors.
You can always go back and revert these changes by resetting Error Lens settings or pressing Add Item button.

Read Next