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

Question

如何正确配置Tailwind CSS和VS代码，以至少禁用有关VueJS单文件组件(vue-cli)中的规则错误和空标签错误的错误？

<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>

Answer 1

我是在这个guide的帮助下让它工作的

TLDR

css安装VS代码插件样式(发布者名称:项目的stylelint)

• Disable

1. /css验证。点击F1，搜索"settings json“。

settings.json

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

1. 添加和配置样式提示插件。将以下文件和内容添加到项目根目录。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
    }
}

1. (可选)您可能需要重新启动vs代码才能看到

的更改

Answer 2

也许移除lang="scss“或者直接在模板中使用这个类应该行得通？

Answer 3

我通过将我的样式的lang属性更改为"postcss“修复了这个错误。顺风本质上是一个PostCSS插件。

<style lang="postcss">