tailwind css部分样式无效的一个原因

const Test=()=>{
    const calcColor=()=>{
        return dynamicColorString
    }
return (<div className={`text-${calcColor()}-600`}>someColorString</div>)
}

以上组件的calcColor是动态计算的，编译出的html中的类也是动态改变的，但是文字颜色并不会改变。

以下是个人总结：

组件中的颜色是通过匹配动态变化的，而tailwind css引入JIT( just in time)模式，JIT 会动态编译 CSS，在使用时生成样式，从而显著减小文件大小。

在上述例子中，如果calcColor在计算后得到“red”，但在编译的时候，tailwind css 任务‘text-red-600’并没有被使用，所有就不会将对应的样式打包进最终的css文件中。

解决方法：在tailwindcss的config文件中配置extends，将需要的颜色打包进最终的css文件。或者在某个角落把要用到的颜色写死，然后隐藏一下:p。