RedwoodJS默认安装TailwindCSS后任意值类名不生效问题

在通过yarn rw setup ui tailwind命令完成TailwindCSS默认安装的Redwood项目中开发时，Tailwind常规类名均可正常生效，但arbitrary values（任意值）类名无法正常工作。
问题复现代码如下：

return (
  <ul>
    {names.map((name: string, index: number) => {
      let shiftVal: number = 96;
      let classNameLink: string = `text-red-500 bg-red-500 hover:text-white
      flex justify-around box-border w-96 
      relative left-[${index * shiftVal}px] py-4 mb-[${shiftVal * ((index / (index + 5e-324)) + 1)}px]
      transition-all
      `
      return (
        <a href={links[index]} key={index} className={classNameLink} >{name}</a>
      )
    })}
  </ul>
)

上述代码内text-red-500、flex、w-96等常规Tailwind类名可正常渲染，仅动态拼接的left-[${index * shiftVal}px]、mb-[${shiftVal * ((index / (index + 5e-324)) + 1)}px]这类任意值写法的类名未生效。

Tailwind的样式生成逻辑是构建阶段静态扫描，它不会执行项目里的JavaScript/TypeScript逻辑，只会匹配源码里存在的、格式符合要求的完整类名字符串，再生成对应的CSS规则。
你代码里的任意值类名是通过模板字符串动态拼接的，Tailwind扫描时拿到的是带变量插值的代码片段，无法拿到left-[96px]、mb-[192px]这类实际渲染时的完整类名，自然不会生成对应的样式规则。而text-red-500这类写死的固定类名，在源码里是完整字符串，能被Tailwind正常扫描识别，所以可以正常工作。

• 优先使用内联样式承载动态计算的样式值：这是最适配当前场景的方案，固定不变的样式类名继续写在className里，动态计算的偏移、间距值直接写入style属性，不需要依赖Tailwind生成动态类，也不会有类名扫描不到的问题。
  修正后的代码示例：

  return (
    <ul>
      {names.map((name: string, index: number) => {
        const shiftVal: number = 96;
        const leftPos = index * shiftVal;
        const bottomMargin = shiftVal * ((index / (index + 5e-324)) + 1);
        const classNameLink = `text-red-500 bg-red-500 hover:text-white
        flex justify-around box-border w-96 
        relative py-4 transition-all
        `
        return (
          <a 
            href={links[index]} 
            key={index} 
            className={classNameLink}
            style={{
              left: `${leftPos}px`,
              marginBottom: `${bottomMargin}px`
            }}
          >
            {name}
          </a>
        )
      })}
    </ul>
  )
  

• 若必须使用Tailwind任意值类，需保证所有可能用到的类名以完整静态字符串的形式存在于源码中：这种方案仅适合类名可选范围固定且有限的场景，你当前场景下动态值随index线性变化、可能取值无限，不适合该方案。使用时需要提前将所有用到的类名以完整字符串形式枚举，比如做类名映射表，保证Tailwind扫描时能识别到所有类名。
• 开发规范提醒：Tailwind官方明确不推荐动态拼接类名的写法，不管是常规工具类还是任意值类，只要是运行时拼接生成的类名，构建阶段都无法被静态扫描识别，日常开发尽量保证传入className的Tailwind类都是源码中可直接扫描到的完整字符串。

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