React Router NavLink使用Tailwind条件类 本地正常构建后颜色不生效

问题原因 #

• Tailwind 生产构建时会自动剔除未被检测到使用的工具类样式，你当前的代码将响应式前缀 lg: 和颜色类做动态拼接，Tailwind 的静态扫描逻辑无法识别这种动态生成的完整类名，因此 lg:text-white、lg:text-teal-200 两个类的样式在生产包中被直接删除。
• 本地开发环境默认不开启严格的样式摇树优化，所有Tailwind类都会保留，所以本地运行正常。

修复方法 #

不要动态拼接类名的任意部分，将完整的类名写在条件判断中即可，修改后代码如下：

<NavLink
  to={`${Routes.main}`}
  className={`m-2 block mt-4 lg:inline-block lg:mt-0 ${
    heroSection ? "lg:text-white" : "lg:text-teal-200"
  }`}
>

修改后两个完整的响应式颜色类会被Tailwind扫描到，生产构建时会正常打包对应样式，功能即可恢复正常。

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