Tailwind CSS + VueJS 单文件组件和 VS Code 集成

Posted 2023-02-22

【中文标题】Tailwind CSS + VueJS 单文件组件和 VS Code 集成

【英文标题】：Tailwind CSS + VueJS single file component and VS Code integration

【发布时间】：2019-09-27 12:08:46

【问题描述】：

如何正确配置 Tailwind CSS 和 VS Code，以至少禁用 VueJS 单文件组件 (vue-cli) 中关于 at-rule 和空标记错误的错误？

<template>
...
</template>

<style lang="scss">
  body 
    //  expected
    @apply font-source pt-4;
   // at-rule or selector expected

  h5,h4,h3,h2,h1 
    //  expected
    @apply font-pt font-bold;
   // at-rule or selector expected
</style>

【问题讨论】：

禁用es-lint 让它工作

大声笑我不想禁用 es-lint lint。

然后保持es-lint

【参考方案1】：

在guide 的帮助下，我得到了它的帮助

TLDR

安装 VS Code 插件 stylelint（发布者名称：stylelint）

为项目禁用 scss / css 验证。按 F1 并搜索“设置 json”。

settings.json

"scss.validate": false
"css.validate": false

添加和配置 stylelint 插件。将以下文件和内容添加到项目根目录。

stylelint.config.js

module.exports = 
    rules: 
        'at-rule-no-unknown': [
            true,
            
                ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
            
        ],
        'declaration-block-trailing-semicolon': null,
        'no-descending-specificity': null
    

（可选）您“可能”需要重新启动 vs 代码才能看到更改

【讨论】：

以后的任何人，如果您的验证设置已经是错误的并且您仍然遇到问题，请将它们设置为 true 然后再设置为 false 对我有用。

【参考方案2】：

也许删除 lang="scss" 或直接在模板中使用该类应该可以吗？

【参考方案3】：

我通过将样式的 lang 属性更改为“postcss”来修复此错误。 Tailwind 本质上是一个 PostCSS 插件。

<style lang="postcss">