The unknown at rule @tailwind
warning is a common issue that occurs when using Tailwind with VSCode. It means that VSCode does not recognize the @tailwind
directive, which is used to inject Tailwind’s base, components, utilities styles into your CSS files.
Using one of following methods is enough to fix this warning:
@tailwind
warning by adding a custom setting in your workspace or user settings. You can do this by opening the settings.json
file and adding the following line:{
"css.lint.unknownAtRules": "ignore"
}
If you are using SCSS or another CSS preprocessor, you need to adjust the setting accordingly, for example:
{
"scss.lint.unknownAtRules": "ignore"
}
css_custom_data.json
file in your .vscode
folder with following content:{
"version": 1.1,
"atDirectives": [
{
"name": "@tailwind",
"description": "Use the @tailwind directive to insert Tailwind's `base`, `components`, `utilities`, and `screens` styles into your CSS."
}
]
}
Then, you need to reference this file in your settings.json
file:
{
"css.customData": [".vscode/css_custom_data.json"]
}
settings.json
as follow to associate CSS files with Tailwind.{
"files.associations": {
"*.css": "tailwindcss"
}
}
@tailwind
directive with @import
directives if you want to avoid the unknown at rule warning in VSCode. This will inject Tailwind’s styles into your CSS file in the same way as the @tailwind
directive. However, note that using @import
directives may increase your build time and make your CSS file larger.@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@tailwind
directive.{
"files.associations": {
"*.css": "postcss"
}
}
A directive is a custom Tailwind-specific at-rule you can use in your CSS that offers special functionality for Tailwind CSS projects. There are four directives in Tailwind: @tailwind
, @apply
, @layer
and @config
.
@tailwind
directive is used to insert Tailwind’s base, components, utilities and variants styles into your CSS. For example:/* This injects Tailwind's base styles and any base styles registered by plugins. */
@tailwind base;
/* This injects Tailwind's component classes and any component classes registered by plugins. */
@tailwind components;
/* This injects Tailwind's utility classes and any utility classes registered by plugins. */
@tailwind utilities;
@apply
directive is used 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..select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply border border-gray-300 rounded;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
@layer
directive is used to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are base, components, and utilities. Tailwind will automatically move any CSS within a @layer
directive to the same place as the corresponding @tailwind
rule, so you don’t have to worry as much about authoring your CSS in a specific order to avoid specificity issues.@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}
@layer components {
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
}
@layer utilities {
@variants hover, focus {
.filter-none {
filter: none;
}
.filter-grayscale {
filter: grayscale(100%);
}
}
}
@config
directive is a new feature that lets you specify which config file Tailwind should use when compiling that CSS file. This is useful for projects that need to use different configuration files for different CSS entry points./* Use the tailwind.dashboard.config.js file for this CSS file */
@config "./tailwind.dashboard.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
The main difference between @config
and tailwind.config.js
is that @config
allows you to use different config files for different CSS files, while tailwind.config.js
is the default config file that Tailwind will look for at the root of your project.