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

[Austin1serb]

PostCSS plugin turns off linting for my css files. I had to do an extension bisect to figure out what was messing with it

[mozes22]

PostCSS plugin turns off linting for my css files

Same here, what did you do to resolve this?

[Austin1serb]

PostCSS plugin turns off linting for my css files

Same here, what did you do to resolve this?

I uninstalled the plugin

[mozes22]

PostCSS plugin turns off linting for my css files

Same here, what did you do to resolve this?

I uninstalled the plugin

I don't have PostCSS plugin/extension, I only have Tailwind Extension "bradlc.vscode-tailwindcss" and Stylelint extension "stylelint.vscode-stylelint" and as soon as I add the:

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

in settings.json, the Stylelint linting for all CSS files in my project is turned off.

[KingPsychopath]

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

Tailwind CSS Intellisense VSCode extension details:

Use the files.associations setting to tell VS Code to always open .css files in Tailwind CSS mode.

Thank you so much.

[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

[Masked-Kunsiquat]

thank you @Pyr33x !

[Darkmindy]

Thank you @Pyr33x 🥹

[Pyr33x]

Thank you @Pyr33x 🥹

❤️🙂

[Codeformage]

thank you @Pyr33x

[folsze]

this change makes css variables be highlighted red for me:

$attribution-height: 30px;

ERROR:
{ expectedtailwindcss(css-curlyexpected)

[huntedking150]

Installing Plugin helped me. Thanks Everyone

[zaighamhussain786]

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

[SeekyLeaky]

Thank you, this fixed it for me instantly

[codebdy]

thank you

[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

[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

Huge thanks! You've definitely lowered my frustration level

haha, you're welcome dude. 🫶

[viszec]

haha, 100% thanks, this worked on Cursor!

[jackofsometrade]

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

Nope, this completely disables CSS. All CSS files now look like plain text.

[aervxa]

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

Nope, this completely disables CSS. All CSS files now look like plain text.

Maybe try installing the intellisense vscode plugin

[rmitaccs40]

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

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

and if it was helpful, please hit the anwser mark

Hi, I'm just wonder what is the purpose of this? And in case, if I want to use other CSS framework like Bootstrap. Do I need to remove this?

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