2022-05 Update
The official Tailwind CSS IntelliSense extension now extends the built-in CSS language mode to fix these lint warnings, without losing any of VS Code’s default IntelliSense features.
Review the Recommended VS Code Settings section to enable this for all CSS files in your workspace.
I leave my original answer intact below if you don’t want to install an additional extension, but since v0.8.0 it no longer conflicts with the built-in CSS support so that would be my recommended approach.
Old Answer Without Extension
Visual Studio Code allows you to define Custom Data for CSS Language Service.
For example, in your workspace’s .vscode/settings.json you can add:
{
"css.customData": [".vscode/css_custom_data.json"]
}
And then in .vscode/css_custom_data.json add:
{
"atDirectives": [
{
"name": "@tailwind",
"description": "Use the @tailwind directive to insert Tailwind’s `base`, `components`, `utilities`, and `screens` styles into your CSS.",
"references": [
{
"name": "Tailwind’s “Functions & Directives” documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives/#tailwind"
}
]
}
]
}
Note that you may have to reload the VS Code window for the change to be picked up.
Here is a copy of .vscode/css_custom_data.json, which contains all directives with short usage snippets (which in turn get syntax highlighted in vs code):
{
"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"
}
]
}
]
}
Here's a preview of the result:
The only directive missing is @apply, because it's declared at the CSS property level. The CSS Language Service probably doesn't expect atRules at the property level and won't pick up such directives.
