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

发布于 1周前 作者 sinazl 来自 nodejs/Nestjs

Nodejs 环境下，ts 新手问个问题，我最近在用 tailwind + react + ts 写项目，当一个 component 的 classname 太长的时候我想把它分离出来
但是我想保留 tailwind lsp 插件的自动提示功能，我该怎么声明一个 ts 的 className 类型让它能像在 component 中一样自动提示 tailwind 的类名呢。

Harmonyos Next教程
14 回复

用 css modules ，在 scss 里使用 tailwind 。


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


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

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

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

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

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

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

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

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

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

我回头再研究一下

我用的是 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<br>{<br> "tailwindCSS.experimental.classRegex": [<br> "\\/\\* tw \\*\\/\\s+`([^`]*)"<br> ]<br>}<br>

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

顺便贴个图


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

tailwind 挺好用的

在 Node.js 环境下使用 TypeScript (TS) 结合 Tailwind CSS 和 React 时，确实可能会遇到组件的 className 变得非常长且难以管理的问题。为了提升代码的可读性和维护性，你可以将 className 分离到一个单独的变量或对象中。这里有两种常见的方法来实现这一点：

方法一：使用字符串模板

你可以将 className 拆分为多个部分，并使用模板字符串将它们组合起来：

const MyComponent: React.FC = () => {
  const baseClass = "flex items-center justify-between";
  const activeClass = "bg-blue-500 text-white";
  const inactiveClass = "bg-gray-200 text-black";

  return (
    <div className={`${baseClass} ${isActive ? activeClass : inactiveClass}`}>
      {/* 你的组件内容 */}
    </div>
  );
};

方法二：使用对象语法（推荐）

对于更复杂的项目，你可以使用对象语法来管理 className，这有助于进一步的组织和重用：

const classes = {
  base: "flex items-center justify-between",
  active: "bg-blue-500 text-white",
  inactive: "bg-gray-200 text-black",
};

const MyComponent: React.FC = () => {
  return (
    <div className={cx(classes.base, isActive ? classes.active : classes.inactive)}>
      {/* 你的组件内容 */}
    </div>
  );
};

// 注意：cx 是一个用于组合 class 名称的实用工具函数，你可以从 'classnames' 库中导入它。

这样，你的 className 管理将变得更加清晰和模块化。

回到顶部