8

I'm using Tailwind CSS v4 in my Next.js project and getting the following errors in globals.css:

Unknown at rule @plugin css(unknownAtRules)
Unknown at rule @custom-variant css(unknownAtRules)
Unknown at rule @theme css(unknownAtRules)
Unknown at rule @utility css(unknownAtRules)
Unknown at rule @variant css(unknownAtRules)
Unknown at rule @apply css(unknownAtRules)
Unknown at rule @source css(unknownAtRules)
Unknown at rule @reference css(unknownAtRules)

Here is my globals.css file:

@import "tailwindcss";

@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* theme customization */
}

enter image description here

1
  • The extension needs to be configured properly - see here. Also, in Module CSS, the official stance of TailwindCSS is to avoid using things like @apply, etc. whenever possible - see here. Commented May 30 at 9:48

3 Answers 3

34

These are custom TailwindCSS directives that CSS IDEs don't understand by default. For VSCode, use the official TailwindCSS IntelliSense extension.

After that, tell VSCode that you want to treat your .css files as TailwindCSS. You can do this in the settings under files.associations like this:

{
  "files.associations": {
    "*.css": "tailwindcss",
    "*.scss": "tailwindcss",
  },
}

Since these are just IDE error messages, the code will work as expected if you have properly installed TailwindCSS. However, they can be frustrating, so it is definitely recommended to use the extension.

Known Issues

It may happen that the syntax highlighting for the mentioned syntax will not work properly with the solution, this is a known issue:

Sign up to request clarification or add additional context in comments.

5 Comments

You may want to do this just for the workspace, since doing this in vsCode settings JSON globally will effect every project containing .css file, so if you're not using tailwind css in all projects, it'll not be desireable. To change it just for current project go to .vscode(create in project root if required)>settings.json(create in project root if required). Add the above mentioned solution.
@AkshatParashar Yes, that can work too, though I do it the other way around. By default (User Setting), Tailwind is enabled everywhere (USERPATH/settings.json > "files.associations": {"*.css": "tailwindcss"}), and if I happen not to use it somewhere, I disable it in that specific workspace (.vsocde/settings.json > "files.associations": {"*.css": "css"}). Each person chooses according to their preference, either in the user settings.json (CTRL + SHIFT + P -- "Open User Settings") or the workspace .vscode/settings.json.
But it's worth going through the recommended troubleshooting steps, as certain special VSCode settings can cause these issues: stackoverflow.com/a/79808734/15167500
2

The approch when you use files.associations is the best way,Just a little observation,to know when configure css to tailwind, press ctrl + shift + p and search 'Open Workspace Settings (JSON)' and paste the code and the error disapper

1 Comment

Yes, but without the official extension, this does nothing at all. The extension is what adds TailwindCSS's special rules to VSCode. As I already explained earlier, before your answer: stackoverflow.com/a/79513027/15167500
0

Ignoring the warnings in VS Code work for me

VScode settings -> extension -> CSS language feature -> CSS

Find Lint: Unknown at rules and set it to ignore.

This solved my problem. property to igonre

2 Comments

Although the "solution" may seem to produce good results, it doesn't actually solve the problem - it merely hides it. The real issue is that VSCode doesn't recognize TailwindCSS's special CSS directives - and that's exactly how it should be. TailwindCSS provides the necessary rule definitions to VSCode through its official extension. You just need to install it and associate it with the appropriate file extensions, such as .css. See here: stackoverflow.com/a/79513027/15167500
If you follow the advice to disable warnings about unknown rules, then VSCode truly won’t alert you - even when a directive doesn’t actually exist in CSS or TailwindCSS. So either you know everything by heart, or you won't understand why, for example, @themes doesn’t work - because only @theme actually exists, etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.