Problem with #tailwind base in own .css (Unknown at rule #tailwindcss(unknownAtRules) - tailwind-css

Question

I have a problem with custom css in tailwind and vite.
My maian.js look like:
import "./styles.css";
// import "tailwindcss/tailwind.css";
document.querySelector("#app").innerHTML = `
<h1>Hello Vite!</h1>
Documentation
`;
My styles.css looks like:
#tailwind base;
#tailwind components;
#tailwind utilities;
.header-nav-section {
#apply bg-gradient-to-br from-gray-100e to-gray-300;
}
But vscode informed me that:
What is wrong, I readed documentation and this case will working.
P.S
Full repo:
https://github.com/mxcdh/vite-tailwind

Answer 1

Follow the following steps
Add the the following Custom Data for CSS file css_custom_data.json.
Declare it into the VSCode settings file.
.vscode/settings.json:
{
"css.customData": [".vscode/css_custom_data.json"]
}
.vscode/css_custom_data.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": "#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"
}
]
}
]
}
If thisn't work , Try to update your node.js to the latest current stable version and try again

Answer 2

Does your tailwind work? Could just be a faulty installation.
Otherwise try installing the official vscode extension or disable custom at rules validation

Answer 3

If you are working in VSCode, you need to disable the lint rule of unknownAtRules.
RECOMMENDED FIX:
Create .vscode at the root of your project
Create file named settings.json
Identify the filetype you are using for example css or scss
Create an empty json object {}
Inside json object add, "[FILE EXTENSION OF STEP 3].lint.unknownAtRules": "ignore"
here is how the file will look like in the case of scss extension:
.vscode > settings.json
{
"scss.lint.unknownAtRules": "ignore"
}
It helps you push the change in git and share the fix with the team.
SECOND WAY:
Do the same as explained above inside your VSCode Global settings.json. It will fix the problem for you but not for others using the same codebase. You can open the file by using, Cmd+Shift+P and then choosing "Preferences: Open Settings (JSON)".
Usually, it fixes the issue right away, but you can reload browser if needed.
Fix: For vue use "css.lint.unknownAtRules": "ignore". Credits => #zijizhu
https://github.com/tailwindlabs/tailwindcss/discussions/5258
https://flaviocopes.com/fix-unknown-at-rule-tailwind/#:~:text=Here's%20how%20to%20fix%20this,Done!