解决vscode的css文件中tailwind修饰器的报错
July 29, 2024 by
在 vscode
中打开 .css
文件编写 tailwind
时遇到报错:
Error
解决方法
在项目根目录下找到 .vscode/settings.json
文件, 添加以下配置:
.vscode/settings.json
{
"css.customData": [".vscode/tailwind.json"],
}
然后在项目根目录下创建 .vscode/tailwind.json
文件, 内容如下:
.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"
}
]
}
]
}
这样就可以解决 vscode
中 .css
文件中 tailwind
修饰器的报错了
如果是 scss
文件
如果是 scss
文件, 需要在 .vscode/settings.json
文件中添加以下配置:
.vscode/settings.json
{
"scss.lint.unknownAtRules": "ignore",
}
忽略 scss
文件中 tailwind
修饰器的报错
如果在其它类型的文件中使用 tailwind
修饰器, 可以在 .vscode/settings.json
文件中添加以下配置:
.vscode/settings.json
{
"[FILE EXTENSION].lint.unknownAtRules": "ignore"
}
[FILE EXTENSION]
为文件后缀名, 如 vue
, html
等
对于 vue
或 nuxt
项目
如果是 nuxt
项目, 需要在 .vue
文件中的 style
标签中添加 lang="css"
或 lang="scss"
属性, 这样 vscode
才能识别为 css
文件
.vue
<style lang="css">
/* css */
</style>
<style lang="scss">
/* scss */
</style>