如何将@tailwind CSS规则添加到css检查器
回答 12
Stack Overflow用户
发布于 2020-07-09 02:20:00
如果你使用VS代码，你可以使用以下插件：https://marketplace.visualstudio.com/items?itemName=csstools.postcss
Stack Overflow用户
发布于 2018-01-09 17:56:49
这是由vscode的内置列表提供的at- rule -no-unknown规则。
为了摆脱它，您需要执行以下操作：
1。安装stylelint code --install-extension stylelint.vscode-stylelint
2。安装stylelint推荐的配置npm install stylelint-config-recommended --save-dev
3。在您的vscode用户设置中添加以下两行
"css.validate": false, // Disable css built-in lint
"stylelint.enable": true, // Enable sytlelint
"scss.validate": false, // Disable scss lint (optional if using scss)4。将这些行粘贴到项目根目录中名为.stylelintrc的文件中，如果该文件不存在，请创建该文件。有关样式的配置的更多信息，请访问以下链接：https://stylelint.io/user-guide/
{
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [ true, {
"ignoreAtRules": [
"extends",
"tailwind"
]
}],
"block-no-empty": null,
"unit-allowed-list": ["em", "rem", "s"]
}
}Stack Overflow用户
发布于 2020-04-21 07:23:57
Visual Studio代码允许您定义Custom Data for CSS Language Service。
例如，在工作区的.vscode/settings.json中，您可以添加：
{
"css.customData": [".vscode/css_custom_data.json"]
}然后在.vscode/css_custom_data.json中添加：
{
"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"
}
]
}
]
}请注意，您必须重新加载VS Code窗口，更改才能生效。
下面是.vscode/css_custom_data.json的一个副本，它包含所有具有简短用法片段的指令(这些片段反过来会在vs代码中突出显示语法)：
{
"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"
}
]
}
]
}以下是结果的预览：
唯一缺少的指令是@apply，因为它是在CSS属性级别声明的。CSS可能不会期望属性级的atRules，也不会接受这样的指令。
https://stackoverflow.com/questions/47607602
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号