如何让VSCode自动补全React中自定义CSS类的className属性？

完全可以实现自定义类名的自动补全，甚至能让TypeScript检测非法类名并报错，关键步骤如下：

一、配置VSCode类名自动补全 #

1. 安装VSCode插件：安装「Tailwind CSS IntelliSense」插件，它不仅支持Tailwind类，还能识别自定义全局CSS文件中的类名并提供补全。
2. 修改VSCode settings.json：在现有配置中添加以下内容，让插件扫描你的项目文件和自定义CSS：

"tailwindCSS.includeLanguages": {
  "javascript": "javascript",
  "typescript": "typescript",
  "typescriptreact": "typescriptreact"
},
"tailwindCSS.content": [
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
  "./styles/base.css" // 替换为你的CSS文件路径
]

保存配置后，VSCode就会在输入className时自动提示你的自定义类名。

二、实现TypeScript非法类名检测 #

要让TypeScript对不存在的类名报错，可通过类型约束实现：

1. 自动生成类名类型文件：安装tailwindcss-types工具，它能从CSS文件中提取所有类名并生成TypeScript类型：

npm install -D tailwindcss-types

2. 添加生成脚本：在package.json的scripts中加入：

"scripts": {
  "generate-css-types": "tailwindcss-types --input ./styles/base.css --output ./types/css-classes.ts"
}

3. 生成类型文件：运行命令生成类型：

npm run generate-css-types

4. 使用类型约束：在组件中导入生成的类型，用工具函数约束className的取值：

import type { CSSClass } from '../types/css-classes';

function cn(...classes: CSSClass[]) {
  return classes.join(' ');
}

// 使用示例，输入非法类名会触发TS报错
<div className={cn('border-solid', 'border-width-3')}></div>

后续CSS类名更新时，重新运行generate-css-types即可同步类型。

如果不想安装额外工具，也可以手动创建类型文件，把所有自定义类名列成联合类型，效果一致。

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