如何在React的className属性中结合Tailwind与自定义函数？

根据你的需求，分两种场景给出具体实现方式：

场景1：执行函数（无返回类名）同时使用Tailwind类 #

如果你只是想在渲染组件时执行aFunction()（比如触发副作用、打印日志等），同时给组件设置Tailwind类名，可以用逗号表达式或者自执行匿名函数：

逗号表达式写法（简洁但可读性稍弱） #

<Component className={(aFunction(), 'some-tailwind-code')} />

JavaScript的逗号表达式会依次执行左侧的aFunction()，然后返回右侧的字符串作为className的值。

自执行函数写法（可读性更好） #

<Component className={(() => {
  aFunction();
  return 'some-tailwind-code';
})()} />

这种写法逻辑更清晰，适合需要在函数里写多行代码的场景。

场景2：函数返回动态类名，和Tailwind类合并 #

如果aFunction()是用来返回动态类名（比如根据组件状态生成的类），需要把它和Tailwind类拼接在一起，推荐以下几种方式：

模板字符串拼接 #

<Component className={`${aFunction()} some-tailwind-code`} />

注意：如果aFunction()可能返回空字符串或undefined，最终className会多出一个空格，不过浏览器会自动忽略，不影响样式。

数组+join拼接（更严谨） #

<Component className={[aFunction(), 'some-tailwind-code'].join(' ')} />

数组的join(' ')会自动过滤掉空值，避免多余空格。

用工具类简化（推荐） #

如果需要处理更复杂的动态类名（比如带条件判断），可以用clsx这个常用工具：

1. 先安装：npm install clsx
2. 使用方式：

import clsx from 'clsx';

<Component className={clsx(aFunction(), 'some-tailwind-code')} />

clsx会自动处理空值、假值，合并类名时不会产生多余空格，非常适合React中处理动态className。

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