如何配置Tailwind CSS和VS Code，消除Vue CLI单文件组件中的规则与空标签错误

我之前也碰到过一模一样的问题！在Vue CLI创建的单文件组件里用Tailwind的@apply时，VS Code老是弹出“期望规则或选择器”“应为}”这类错误提示，折腾了好一会儿才彻底搞定，给你分享下我的解决方案：

1. 先装Tailwind官方的VS Code插件 #

首先安装Tailwind CSS IntelliSense插件，这是官方出的，不仅能让VS Code正确识别Tailwind的语法（包括@apply），还能提供类名智能提示，从根源上解决大部分语法识别错误。

2. 确保Tailwind在Vue CLI项目中正确配置 #

如果还没完成项目里的Tailwind基础配置，先做这一步：

• 安装依赖：

  npm install tailwindcss postcss autoprefixer
  

• 初始化配置文件：

  npx tailwindcss init -p
  

• 修改tailwind.config.js，确保它能扫描到你的Vue单文件组件：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {
        // 这里可以添加你自定义的主题，比如你用到的font-source、font-pt
        fontFamily: {
          'source': ['Source Sans Pro', 'sans-serif'],
          'pt': ['PT Serif', 'serif'],
        },
      },
    },
    plugins: [],
  }
  

• 新建src/assets/css/tailwind.css文件，导入Tailwind的核心样式：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• 在main.js中导入这个样式文件：

  import './assets/css/tailwind.css'
  

3. 关闭VS Code默认的CSS/SCSS校验 #

VS Code自带的CSS验证器不认识Tailwind的@apply，所以会误报错误。我们可以在VS Code的设置里关掉它：

• 打开VS Code的设置面板（快捷键Ctrl+,），点击右上角的打开设置(JSON)图标，添加以下配置：

  {
    "css.validate": false,
    "scss.validate": false, // 因为你的<style>标签用了lang="scss"
    "tailwindCSS.experimental.classRegex": [
      ["@apply\\s+([^;]+);", "'([^']*)'"] // 确保插件能识别@apply里的自定义类
    ]
  }
  

4. （可选）如果用了Stylelint，配置兼容Tailwind #

如果你的项目用了Stylelint做代码检查，需要让它兼容Tailwind语法：

• 安装Stylelint的Tailwind配置：

  npm install stylelint-config-tailwindcss --save-dev
  

• 修改.stylelintrc（或.stylelintrc.json）文件：

  {
    "extends": [
      "stylelint-config-standard",
      "stylelint-config-tailwindcss"
    ]
  }
  

做完这些步骤后，你Vue单文件组件里的@apply就不会再被VS Code误报错误了，那些“期望规则或选择器”“应为}”的提示应该都会消失。

内容的提问来源于stack exchange，提问作者RomkaLTU