Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme, @utility, @variant, @apply, @source, @reference in global.css

Question

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

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. — rozsazoltan
– rozsazoltan, Commented May 30 at 9:48

rozsazoltan · Accepted Answer · 2025-03-17 10:48:30Z

34

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

TailwindCSS IntelliSense - VSCode Marketplace

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",
  },
}

Recommended VSCode settings for TailwindCSS IntelliSense - GitHub

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

Auto-completion and suggestions not working with TailwindCSS v4 - StackOverflow

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

tailwindlabs/tailwindcss-intellisense issue #1250 - GitHub

edited Mar 17 at 10:48

answered Mar 16 at 18:21

rozsazoltan

18.5k8 gold badges50 silver badges147 bronze badges

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

5 Comments

rozsazoltan Jul 3 at 11:23

Related: Displaying color boxes next to the TailwindCSS class names indicating the color, anywhere such as in class or className attributes

Akshat Parashar Aug 25 at 9:56

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.

rozsazoltan Aug 25 at 10:02

@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.

rozsazoltan Nov 4 at 9:08

Related: Tailwind CSS IntelliSense plugin just isn't working on my VSCode

rozsazoltan Nov 4 at 9:30

But it's worth going through the recommended troubleshooting steps, as certain special VSCode settings can cause these issues: stackoverflow.com/a/79808734/15167500

Ricardo Colunga · Accepted Answer · 2025-04-21 23:44:48Z

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

answered Apr 21 at 23:44

Ricardo Colunga

112 bronze badges

1 Comment

rozsazoltan May 24 at 6:47

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

MrBoxed · Accepted Answer · 2025-05-22 05:49:22Z

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

answered May 22 at 5:49

MrBoxed

11 bronze badge

2 Comments

rozsazoltan May 24 at 6:43

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

rozsazoltan May 24 at 6:45

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.

Collectives™ on Stack Overflow

Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme, @utility, @variant, @apply, @source, @reference in global.css

3 Answers 3

Known Issues

5 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Known Issues

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related