-
|
just a simple vue file like this: It warning: but it does not warning if I place I had followed with the document: https://tailwindcss.com/docs/guides/vue-3-vite
I do not want to see the warning line, and how to do? |
Beta Was this translation helpful? Give feedback.
Replies: 40 comments 151 replies
-
|
Has anyone solved this? I know this is not probably a tailwind issue but I would think that someone has solved this |
Beta Was this translation helpful? Give feedback.
-
|
16/02/2024 aun funciona😁 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, it's working |
Beta Was this translation helpful? Give feedback.
-
awesome man |
Beta Was this translation helpful? Give feedback.
-
|
@shivee-yadav Thanks, your solution worked. |
Beta Was this translation helpful? Give feedback.
-
cool， thanks |
Beta Was this translation helpful? Give feedback.
-
|
Trick is to use the PostCSS language extension for VS Code usually: |
Beta Was this translation helpful? Give feedback.
-
|
Sorry but the PostCSS Language Support plugin (that works great with Tailwind CSS) does absolutely nothing. |
Beta Was this translation helpful? Give feedback.
-
|
@adamwathan PostCSS Language extension works on |
Beta Was this translation helpful? Give feedback.
-
|
UPDATE 2023 Here are the steps:
{
"css.customData": [".vscode/tailwind.json"]
}
{
"version": 1.1,
"atDirectives": [
{
"name": "@tailwind",
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
}
]
},
{
"name": "@apply",
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
}
]
},
{
"name": "@responsive",
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
}
]
},
{
"name": "@screen",
"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
}
]
},
{
"name": "@variants",
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
}
]
}
]
}Credits: HISTORY For anyone in the future, if you are working in VSCode, you need to disable the lint rule of
here is how the file will look like in the case of .vscode > settings.json {
"scss.lint.unknownAtRules": "ignore"
}It helps you push the change in git and share the fix with the team. For Nuxt users, please add: SECOND WAY:
Usually, it fixes the issue right away, but you can reload browser if needed. Fix: For Update: |
Beta Was this translation helpful? Give feedback.
-
|
The second way you mentioned worked for me. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
The UPDATE 2023 RECOMMENDED FIX doesn't work anymore. The right answer is comment 7307604. |
Beta Was this translation helpful? Give feedback.
-
|
Because the original issue was fixed, and people come here with similar symptoms but different issue, I see people having this issue with React fixing it very easily, but people with Vue or other frameworks having mixed files (HTML & CSS in the same file, like |
Beta Was this translation helpful? Give feedback.
-
|
Also there's a 2025 update as well, try that one, maybe it works for your specific case... |
Beta Was this translation helpful? Give feedback.
-
|
Answer edited, I found the fix and knew it should have been a simple one. Thanks for answering though. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. It works for my Angular scss files. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @mrfambo , this is an amazing solution. |
Beta Was this translation helpful? Give feedback.
-
|
I have updated my answer with your credits just for future viewers! |
Beta Was this translation helpful? Give feedback.
-
could you please attach reference to your solution? |
Beta Was this translation helpful? Give feedback.
-
Here it is. #5258 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
Second Way worked for me. |
Beta Was this translation helpful? Give feedback.
-
|
we can also add custom data example, in setting.json add and create a custom data can also be added by extensions, so I would hope it gets added to Tailwind CSS IntelliSense extension. |
Beta Was this translation helpful? Give feedback.
-
|
@wootra answer creates a different problem in my VS Code. Note: I used |
Beta Was this translation helpful? Give feedback.
-
|
I believe tailwind is post css and scss is pre css.. I saw some answer that put postcss instead of tailwind for the setting. didnt test it yet |
Beta Was this translation helpful? Give feedback.
-
|
This solution worked. I have a React project using Typescript and have the postcss language extension installed. The "css-data.json" file needs to be in the parent folder of the .vscode folder, and you need to close and re-open VS code to have the error message disappear. |
Beta Was this translation helpful? Give feedback.
-
|
This is the correct solution as it requries no extensions and can be sournce controlled and shared with the whole team. |
Beta Was this translation helpful? Give feedback.
-
|
@Drol Just because it requires no extensions doesn't mean it's the correct solutions, there are no "correct" solutions in software, just better and worse solutions, I do believe the best solution so far (unless VSCode team decides Tailwind is widespread enough to include it into the base VSCode source) is this: #5258 (comment) |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
This worked for me beautifully. Thanks |
Beta Was this translation helpful? Give feedback.
-
|
@adamwathan Do you have an idea, why my comment was deleted? I can't remember having done that... Is there anywhere a history which would provide more insight? |
Beta Was this translation helpful? Give feedback.
-
|
@adamwathan ?? |
Beta Was this translation helpful? Give feedback.
-
|
Thank you the "css.lint.unknownAtRules": "ignore" in settings.json works perfectly! thank you. |
Beta Was this translation helpful? Give feedback.
-
For VueKeep in mind the type of i.e <style lang="scss">
.actions {
a{
@apply underline pr-2;
}
}
</style>As you can see above we have Note: if changes doesn't take effect immediately reload vs-code |
Beta Was this translation helpful? Give feedback.
-
|
fix, add lang in style, working me too. |
Beta Was this translation helpful? Give feedback.
-
|
but scss intelesense not working anymore |
Beta Was this translation helpful? Give feedback.
-
|
This is the one that worked for me in Svelte |
Beta Was this translation helpful? Give feedback.
-
|
But this loses syntax highlighting（I have installed the postcss plugin of vscode）： |
Beta Was this translation helpful? Give feedback.
-
|
@vaseala add following to |
Beta Was this translation helpful? Give feedback.
-
But this will change the highlighting rules of the code in the script tag in my template。 after I add the filesAssociations, the code preview like: |
Beta Was this translation helpful? Give feedback.
-
|
The accepted solution didn't work for me in Nuxt 2. |
Beta Was this translation helpful? Give feedback.
-
|
have you tried specifying the <style lang="css" scoped> |
Beta Was this translation helpful? Give feedback.
-
Yes, didn't work: |
Beta Was this translation helpful? Give feedback.
-
|
use |
Beta Was this translation helpful? Give feedback.
-
|
This seems to remove all color highlighting; everything is white. How is this a sensible thing? |
Beta Was this translation helpful? Give feedback.
-
"files.associations": {
"*.css": "postcss"
}, |
Beta Was this translation helpful? Give feedback.
-
|
me sirvió muchas gracias. |
Beta Was this translation helpful? Give feedback.
-
|
For anyone still struggling with this same issue. Installing PostCss language support was very helpful to me. It solved the error I had |
Beta Was this translation helpful? Give feedback.
-
|
Perhaps the Tailwind Intellisense plugin should somehow declare a dependency on postcss language support. |
Beta Was this translation helpful? Give feedback.
-
|
This is probably more future proof and generic, if your postcss config uses other plugins than just Tailwind |
Beta Was this translation helpful? Give feedback.
-
|
Actually I lose formatting with this approach and can't find a setting to tell to use CSS formatter |
Beta Was this translation helpful? Give feedback.
-
|
The recommended fix is unacceptable and a workaround at best. Why disable all warnings when one wants to ignore a single case? As a Svelte user, @rowild's solution worked for me: I am now using |
Beta Was this translation helpful? Give feedback.
-
@idleberg |
Beta Was this translation helpful? Give feedback.
-
|
@idleberg With all due respect. I have mentioned that it may stop useful warnings. |
Beta Was this translation helpful? Give feedback.
-
|
Works perfectly for Nuxt 3 as well. |
Beta Was this translation helpful? Give feedback.
-
|
Works for svelte thanks! |
Beta Was this translation helpful? Give feedback.
-
|
If you use VSCode, installing Tailwind CSS IntelliSense then VSCode settings: "files.associations": {
// "*.scss": "tailwindcss", // If you use .scss
"*.css": "tailwindcss"
}It is worked for me. |
Beta Was this translation helpful? Give feedback.
-
|
hi, can i ask another Q, there is no warning, after i set as you like, but when i run git commit, i got this so please! |
Beta Was this translation helpful? Give feedback.
-
I don't know what is your husky hooks did. Could you check your husy hooks? |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
The problem you are encountering is different from the topic of this issue. By the way, you shouldn't need to post duplicate questions under every single comment. |
Beta Was this translation helpful? Give feedback.
-
|
thanks, and sorry i'll delete it immediately |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately none of these recommendations (other than disabling unkownAtRules linting entirely, which feels a bit over the top) seem to work in .vue files. Changing the lang attribute to 'postcss' removes all highlighting, and the tailwind & postcss extensions don't seem to look in .vue files for rules. |
Beta Was this translation helpful? Give feedback.
-
|
https://www.codeconcisely.com/posts/tailwind-css-unknown-at-rules/ |
Beta Was this translation helpful? Give feedback.
-
|
This #5258 (comment) is the right answer for me. 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.
Now your CSS file is associated with Tailwind CSS and the warnings should be gone. |
Beta Was this translation helpful? Give feedback.
-
|
Wouldn't this change it temporarily? the permanent one would be to change the file associations. |
Beta Was this translation helpful? Give feedback.
-
|
PHPStorm support? |
Beta Was this translation helpful? Give feedback.
-
|
Any "official" solution? |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
In 2024,I think the best solution is this: Install cpylua.language-postcss to fix it in vue,and change settings like below don`t forget set style lang in vue file,then the highlight and format will be ok.
|
Beta Was this translation helpful? Give feedback.
-
|
use vs code extension PostCSS Language Support |
Beta Was this translation helpful? Give feedback.
-
|
You can go to settings and type Unknown At Rules and select ignore |
Beta Was this translation helpful? Give feedback.
-
|
Actually, I made an extension named Tailwind CSS directives a while ago. I could have mentioned this earlier. https://marketplace.visualstudio.com/items?itemName=QuentiumYT.vscode-tailwindcss-directives It works with CSS / SCSS language server (not needed to switch to tailwindcss, or create extra configs |
Beta Was this translation helpful? Give feedback.
-
|
The best current solution is the |
Beta Was this translation helpful? Give feedback.
-
|
@deisner Ah this is a vue file, this fix only works for files with the proper extension, meaning |
Beta Was this translation helpful? Give feedback.
-
|
@deisner If you use vue template of You need to install |
Beta Was this translation helpful? Give feedback.
-
|
@regchiu I do have it installed (and that's the guide I used to scaffold the demo). 
|
Beta Was this translation helpful? Give feedback.
-
|
@deisner Because vue mixes html, css and js in the same file, you would need a vue extension to support this, I don't know of a way to fix this in vue other than disabling the warning, or another extension like |
Beta Was this translation helpful? Give feedback.
-
|
@deisner Do you have try to change |
Beta Was this translation helpful? Give feedback.
-
|
Still no fix for Webstorm? |
Beta Was this translation helpful? Give feedback.
-
There might be a work around that change to according to this youtrack issue |
Beta Was this translation helpful? Give feedback.
-
|
For Lazyvim users, what worked for me was adding volar settings. Here is my config for disabling this rule everywhere. return {
"neovim/nvim-lspconfig",
opts = {
servers = {
tailwindcss = {
settings = {
tailwindCSS = {
lint = {
invalidApply = false,
},
},
},
},
cssls = {
settings = {
css = {
validate = true,
lint = {
unknownAtRules = "ignore",
},
},
scss = {
validate = true,
lint = {
unknownAtRules = "ignore",
},
},
},
},
volar = {
settings = {
css = {
validate = true,
lint = {
unknownAtRules = "ignore",
},
},
scss = {
validate = true,
lint = {
unknownAtRules = "ignore",
},
},
},
},
},
},
} |
Beta Was this translation helpful? Give feedback.
-
|
Until now, is there still no perfect solution to this problem in the Vue project? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks it is working the way you explained. Great work buddy. |
Beta Was this translation helpful? Give feedback.
-
|
The accepted solution didn't work for me in Vue 3. Adding |
Beta Was this translation helpful? Give feedback.
-
|
Well, it removes syntax highlighting in vscode even with postcss syntax highlighting extensions. |
Beta Was this translation helpful? Give feedback.
-
Yep, same goes for me.. |
Beta Was this translation helpful? Give feedback.
-
Update 2025: Tailwind 4 versionI have updated the {
"version": 4.0,
"atDirectives": [
{
"name": "@import",
"description": "Use the `@import` directive to inline import CSS files, including Tailwind itself.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#import-directive"
}
]
},
{
"name": "@theme",
"description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
}
]
},
{
"name": "@source",
"description": "Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
}
]
},
{
"name": "@utility",
"description": "Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
}
]
},
{
"name": "@variant",
"description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS. If you need to apply multiple variants at the same time, use nesting.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
}
]
},
{
"name": "@custom-variant",
"description": "Use the `@custom-variant` directive to add a custom variant in your project. This lets you write utilities like `pointer-coarse:size-48` and `theme-midnight:bg-slate-900`.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
}
]
},
{
"name": "@apply",
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you’re used to using in your HTML.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
}
]
},
{
"name": "@reference",
"description": "If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context. To do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
}
]
},
{
"name": "@config",
"description": "Use the `@config` directive to load a legacy JavaScript-based configuration file.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
}
]
},
{
"name": "@plugin",
"description": "Use the `@plugin` directive to load a Javascript-based plugin. The `@plugin` directive accepts either a package name or a local path.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
}
]
}
]
} |
Beta Was this translation helpful? Give feedback.
-
|
Hi all, Running into this Just putting my two cents in here.. |
Beta Was this translation helpful? Give feedback.
and others
UPDATE 2023
RECOMMENDED FIX:
Here are the steps:
.vscodeat the root of your project with the two files namedsettings.jsontailwind.jsonsettings.jsonfile{ "css.customData": [".vscode/tailwind.json"] }tailwind.jsonfile{ "version": 1.1, "atDirectives": [ { "name": "@tailwind", "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" } ] }, { "name": "@apply", …