React router Link 标签颜色在构建环境中没有改变
React router Link tag color is not changing in build environment
我将 tailwind 与 react 结合使用，并使用条件渲染根据不同的屏幕更改导航栏中 link 标签的颜色。它在本地主机上运行良好，但是当我 运行 构建并将其放置在服务器上时，link 的颜色保持不变。这是 link
的代码
<NavLink
to={`${Routes.main}`}
className={`m-2 block mt-4 lg:inline-block lg:mt-0 lg:${
heroSection ? "text-white" : "text-teal-200"
}`}
>
它在本地环境中工作而不在构建中工作的原因是什么？
不要使用字符串连接来创建 class 名称：
lg:${heroSection ? "text-white" : "text-teal-200"}
动态做select一个完整的class名字：
${heroSection ? "lg:text-white" : "lg:text-teal-200"}
这意味着避免在模板中使用字符串连接动态创建 class 字符串很重要，否则 PurgeCSS 将不知道要保留那些 classes。
我将 tailwind 与 react 结合使用，并使用条件渲染根据不同的屏幕更改导航栏中 link 标签的颜色。它在本地主机上运行良好，但是当我 运行 构建并将其放置在服务器上时，link 的颜色保持不变。这是 link
的代码 <NavLink
to={`${Routes.main}`}
className={`m-2 block mt-4 lg:inline-block lg:mt-0 lg:${
heroSection ? "text-white" : "text-teal-200"
}`}
>
它在本地环境中工作而不在构建中工作的原因是什么？
不要使用字符串连接来创建 class 名称：
lg:${heroSection ? "text-white" : "text-teal-200"}
动态做select一个完整的class名字：
${heroSection ? "lg:text-white" : "lg:text-teal-200"}
这意味着避免在模板中使用字符串连接动态创建 class 字符串很重要，否则 PurgeCSS 将不知道要保留那些 classes。