Unknown at rule @tailwindcss(unknownAtRules)

[huntedking150]

I am following all the steps outlined in the installation guide on the Tailwind CSS website. However, I consistently encounter the error shown in the screenshot. While some of the code functions correctly and doesn't completely crash, Tailwind CSS does not produce the expected effects.

I havenot added anything extra code to any file. Just I am just trying to configure tailwind css in my project with default code generated by "npm create vite@latest".

I have used the following commands:
npm create vite@latest
then I entered project name and selected vite for my project
cd
npm i
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
then changed the content of tailwind.config.js file
with :
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
added :
@tailwind base;
@tailwind components;
@tailwind utilities;
in index.css
and I started getting error in my index.css file

[wongjn]

It's a warning from VSCode, not explicitly an error. Tailwind should still work regardless. If you really want to get rid of the error though, you could do one of:

• Use the PostCSS plugin
• Use the Tailwind intelliSense plugin
• Turn off CSS validation

[waxben]

helped

[noah-tah]

worked for me when i installed Tailwind intelliSense plugin

[Pyr33x]

You can easily fix it by setting up a new language mode, ctrl + shift + p then type language Mode: tailwindcss
and make sure you are setting language mode when you're currently in index.css file

[muhammadmahfuj]

thanks a lot. this fixed the issue for me.

[ADTC]

You need to install Tailwind CSS Intellisense extension first.

[Anuragh33]

it works thank you.

[BlackSheep47]

thanks it's helped

[huntedking150]

Installing Plugin helped me. Thanks Everyone

[zaighamhussain786]

Install plugin Post CSS Language Support in VS Code then it'll end

[Pyr33x]

permanent fix: just add this to your vscode settings.json

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

and if it was helpful, please hit the anwser mark

[jerry-xon]

Thanks alot this helped me !!!!!

[NickDatLe]

permanent fix: just add this to your vscode settings.json

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

and if it was helpful, please hit the anwser mark

This worked on Cursor AI, thanks!

[advaitju]

Just an FYI, you need the Tailwind CSS Intellisense VSCode plugin for this to work.

[zaighamhussain786]

1. Open VSCode.

2. Access Settings:

   • Click on the gear icon (⚙️) in the lower-left corner of the VSCode window and select Settings.
   • Alternatively, you can press Ctrl+, (Windows/Linux) or Cmd+, (Mac) to open the settings directly.

3. Open settings.json:

   • In the top right of the Settings tab, click on the {} icon to open the settings.json file. This provides a direct view of your settings file where you can make manual changes.

4. Add the files.associations Setting:

   • In the settings.json file, add the following configuration:

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

   • If there are already other settings in the file, just add this block within the existing JSON structure, ensuring proper syntax (commas between entries, etc.).

5. Save the File:

   • Save the changes by pressing Ctrl+S (Windows/Linux) or Cmd+S (Mac).

6. Verify Changes:

   • Open a .css file in VSCode to ensure that TailwindCSS syntax highlighting and features are now applied.

Notes:

• The files.associations setting tells VSCode to treat files with a .css extension as TailwindCSS files, which can improve syntax highlighting and linting support for TailwindCSS classes.
• Make sure you have the TailwindCSS extension installed in VSCode for full functionality.

This approach helps tailor your editor to better support TailwindCSS-specific syntax and features in .css files.

[zaighamhussain786]

Thanks alot. It helped.

You're welcome.
Keep learning and growing ✨️

[andresmateo]

@tailwind base;
@tailwind components;
@tailwind utilities;
This code does not take effect in the browser despite all the changes. Please!!!! Help me. Thank you everyone The problem was solved.

[zaighamhussain786]

@tailwind base; @tailwind components; @tailwind utilities; This code does not take effect in the browser despite all the changes. Please!!!! Help me.

If you’re sure that everything is ok so now you only need to restart your server or close everything and reopen that's very simple

[classmateoula]

use Tailwind CSS IntelliSense

[ADTC]

Worth noting that if only some of your projects use Tailwind, it maybe better to add the setting in workspace level (that is, .vscode/settings.json at the project root) instead of user level.

[zaighamhussain786]

Thank you 😊

…

On Fri, 4 Oct 2024, 19:46 Manudev, ***@***.***> wrote: It's work for me — Reply to this email directly, view it on GitHub <#13881 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYERV27GMLL7X37JLSBSWOTZZ2PKJAVCNFSM6AAAAABJXK2TRWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAOBUGQ4TKMY> . You are receiving this because you commented.Message ID: ***@***.*** com>

[fuyalasmit]

You can fix this by setting up a new language mode.
Here's how you can do it in vs code:

1. Press ctrl + shift + p

2. Click on change language Mode

3. Choose or type Tailwind CSS

Also, make sure you are setting language mode when you're currently in index.css file.

Hope it helps, thank you!

[ADTC]

You need to install Tailwind CSS Intellisense extension first.