Tailwind CSSで動的に色を指定できないときの解決方法

問題

Tailwind CSSでは，16進数のカラーコードを動的に指定できない．すなわち，次のようなことはできない．

const colorInHex = "ffffff";
return <Hoge className=`bg-[#${colorInHex}]`>

これは，Tailwind CSSではビルド時にCSSのコンパイルが行われるためである．

解決法

styleプロパティで指定する．

const colorInHex = "#ffffff";
return <Hoge style={{backgroundColor: colorInHex}}>

あとは，styled-components等のCSS in JSライブラリを使っても多分できる．