在Next.js中套用TailwindCSS樣式時，遇到樣式未渲染的問題
P粉933003350
2023-08-27 09:05:26
<p>使用TailwindCSS設定背景封面，我在useEffect中從bookId（10位數）中提取了顏色。顏色已更新，元件使用更新後的顏色值重新渲染，但渲染頁面的背景顏色仍然是其父div的相同顏色。 </p>
<pre class="brush:php;toolbar:false;">const colors = [
'from-red-500',
'from-orange-500',
'from-yellow-500',
'from-green-500',
'from-cyan-500',
'from-blue-500',
'from-indigo-500',
'from-violet-500',
'from-purple-500',
'from-pink-500',
]
function BgCover(props) {
const [color, setColor] = useState(null)
const router = useRouter()
useEffect(() => {
const id = router.query.bookId
const index = id.slice(-1) //從bookId中擷取索引
const bgColor = colors[index]
setColor(bgColor)
}, [])
return (
<Fragment>
{color ? (
<div className='flex-grow scrollbar-hide select-none relative'>
<div className={`bg-gradient-to-b ${color} to-black`}>
<section
className={`flex flex-col md:flex-row items-center justify-center p-4`}>
{props.children}
</section>
</div>
</div>
) : (
<p className='text-2xl'>載入中..</p>
)}
</Fragment>
)
}</pre>
<p>但是，當我用顏色值（例如'from-red-500'）取代color變數時，渲染頁面中的背景顏色是可見的。 </p>
<p>我還嘗試用getStaticProps取代useEffect中的setColor程式碼，但靜態版本的程式碼無法解決這個問題（當使用color變數時）。 </p>
<p>感謝任何幫助。 </p>
這是tailwindcss和動態類別的已知問題，因為類別是在渲染後應用的，所以它的效果不會被tailwind生成，除非有另一個元素具有與靜態類別相同的類別。
因此，您可以使用tailwind的"safelist"來解決這個問題。 在您的tailwind.config中，定義一個safelist數組，包含您需要產生的所有tailwind類，而這些類別在您的程式碼中不存在作為靜態類別。
tailwind.config.js:
module.exports = { content: [ './pages/**/*.{html,js}', './components/**/*.{html,js}', ], safelist: [ 'from-red-500', 'from-orange-500', 'from-yellow-500', 'from-green-500', 'from-cyan-500', 'from-blue-500', 'from-indigo-500', 'from-violet-500', 'from-purple-500', 'from-pink-500', ] // ... }現在這些類別將始終被生成，因此當您動態應用它們時，它們將相應地更改。
請注意，在新增到safelist後，您需要重新啟動伺服器。
來源
另一個手動解決方案是建立一個隱藏元素，並將所有所需的類別新增到它中，這樣即使在渲染後動態取得它們，它們也會被產生。
但我認為safelist更好。