-
|
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: 34 comments 122 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.
-
|
Install the extension "postCSS language support", it'll help you |
Beta Was this translation helpful? Give feedback.
-
|
Well done! Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Idk why this fixed it but thanks. |
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.
-
|
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.
-
|
Or you can do this |
Beta Was this translation helpful? Give feedback.
-
|
@StivenArreglaTech worked for me - thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Just modifying the JSON Settings for VSCode worked like a charm. Thanks for this. God Bless 🙏🏻 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, it's working! |
Beta Was this translation helpful? Give feedback.
-
|
thanks for information provide |
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.
-
@adamwathan what do you think about this solution? could it be included in the extension? – thanks for such a great DX btw 😉 However, this does not seems to be working on |
Beta Was this translation helpful? Give feedback.
-
|
as tailwind CSS IntelliSense extension describes, adding below in your .vscode/settings.json file fix the problem. |
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.
-
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.
-
|
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.
-
|
The best solution here is this method 🎉🎉🎉:
settings.json {
"css.customData": [".vscode/tailwind.json"]
}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"
}
]
}
]
}Credit goes to this articleFixing the unknown @ rule |
Beta Was this translation helpful? Give feedback.
-
|
What about WebStorm? |
Beta Was this translation helpful? Give feedback.
-
|
!!!!!!! |
Beta Was this translation helpful? Give feedback.
-
|
I always forget the turn it off and on again tip, thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Works great! 🎉 |
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.
-
|
Still no correct way to fix this for single file components without doing the disgusting .vscode folder ? |
Beta Was this translation helpful? Give feedback.
-
|
can you explain why this is disgusting, honestly interested. But what are you actually saying? |
Beta Was this translation helpful? Give feedback.
-
It's disgusting to have to go over all of this to fix something that should not even be a thing in the first place, and that it's been a thing for the last 3 years and still not working as expected.
I don't know how to answer that, my question is pretty simple and obvious. I'm asking if there is still no way to fix that thing without going over the recommended fix which is more of a workaround. What don't you understand? |
Beta Was this translation helpful? Give feedback.
-
|
I feel you. So the recommended fix above worked for me, eventually, after working out what was the good part versus the bad part (again, lack of precision). and hence the conflict we find. but as you say the solution is solvable and why haven't they just baked it in? Anyway thanks for the response :) |
Beta Was this translation helpful? Give feedback.
-
|
OMG, this is a very difficult thread to follow. the RECOMMENDED FIX (top section) of above comment worked for me (I stopped at the history section) |
Beta Was this translation helpful? Give feedback.
-
|
what about webstorm? |
Beta Was this translation helpful? Give feedback.
-
|
Still no fix for Webstorm? |
Beta Was this translation helpful? Give feedback.
-
|
|
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.
-
|
Looks like this is the best and permanent solution. If most of your projects use tailwind. |
Beta Was this translation helpful? Give feedback.
-
|
This goes 2 ways:
|
Beta Was this translation helpful? Give feedback.
-
|
Still no fix for Webstorm? |
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", …