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

[ChrisFreeMan]

但是我想保留 tailwind lsp 插件的自动提示功能，我该怎么声明一个 ts 的 className 类型让它能像在 component 中一样自动提示 tailwind 的类名呢。

[joesonw]

用 css modules ，在 scss 里使用 tailwind 。

[nomagick]

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

[ChrisFreeMan]

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

[Whatk]

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

[ChrisFreeMan]

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

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

[sparkle2015]

是什么编辑器? 我在 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>
)
}
```

[ChrisFreeMan]

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

[ChrisFreeMan]

我回头再研究一下

[ChrisFreeMan]

@sparkle2015 我用的是 lunarvim

[TunkShif]

这个跟 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+`([^`]*)"
]
}
```

[ChrisFreeMan]

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

[ChrisFreeMan]

顺便贴个图


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

[xling]

tailwind 挺好用的