ts 新手问个问题，我最近在用 tailwind + react + ts 写项目，当一个 component 的 classname 太长的时候我想把它分离出来

用 css modules ，在 scss 里使用 tailwind 。

别用 tailwind ，有毒，class 来就不该承载这种规模的复杂度。

@joesonw
@nomagick 感谢两位的回复，但这不是我要的答案，我明白我在做什么，所以完全是个人编程习惯的问题。

首选项 - 设置 - Tailwind CSS: Class Attributes

@Whatk 感谢线索，解决了，我的设置是
{
"tailwindCSS.classAttributes": [
"class",
"className",
"ngClass",
"HTMLAttributes<HTMLDivElement>"
]
}

如果有错误欢迎各位大佬指出

是什么编辑器? 我在 VS Code 里没搜到这个插件的名称。

我自己是在 VS Code 里安插的 tailwind 官方的 Tailwind CSS IntelliSense 插件，直接把 className 声明成 string 就行了，本来 className 就是字符串。

示例代码如下，当我在 TestComp 的 className 中输入 m-a 的时候就自动出现了 m-auto 的提示。(截图不知道该怎么贴)

```
const TestComp: React.FC<{ className: string }> = ({ className }) => {
return <div className={className} />
}

const TestPage: React.FC = () => {
return (
<div className='w-96 m-auto'>
<h1 className='text-center'>Test Page</h1>
<TestComp className='w-10 m-a...'/>

</div>
)
}
```

@sparkle2015 我搞错了，之前不知道怎么回事应该是抽风了，这么设置还不行，这个应该只是设置标签属性提示名称的 /

我回头再研究一下

@sparkle2015 我用的是 lunarvim

这个跟 TypeScript 的关系其实不大，Tailwind 的 LSP 可以支持根据正则来匹配要启用 Tailwind IntelliSense 的代码区域，详细可以参考 twin.macro 这个项目的 issue 来自己设置：
https://github.com/ben-rogerson/twin.macro/discussions/227

对于 OP 这种类似的需求，我个人的设置是像下图这样的：
https://imgur.com/5FRvbFU

在 Tailwind 的样式类的字符串前加一个 /* tw */ 的注释来标记启用 Tailwind IntelliSense ，相关的配置如下：

```json
{
"tailwindCSS.experimental.classRegex": [
"\\/\\* tw \\*\\/\\s+`([^`]*)"
]
}
```

@TunkShif 试了一下，太感谢了朋友，这目前应该是最优解了。

顺便贴个图


终于可以满足纯 ts 开发的变态梦了。

tailwind 挺好用的