在Next.js中套用TailwindCSS樣式時，遇到樣式未渲染的問題

Question

使用TailwindCSS設定背景封面，我在useEffect中從bookId（10位數）中提取了顏色。顏色已更新，元件使用更新後的顏色值重新渲染，但渲染頁面的背景顏色仍然是其父div的相同顏色。

const colors = [
    'from-red-500',
    'from-orange-500',
    'from-yel​​low-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>
    )
}

但是，當我用顏色值（例如'from-red-500'）取代color變數時，渲染頁面中的背景顏色是可見的。

我還嘗試用getStaticProps取代useEffect中的setColor程式碼，但靜態版本的程式碼無法解決這個問題（當使用color變數時）。

感謝任何幫助。

Answer 1

這是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後，您需要重新啟動伺服器。

來源

另一個手動解決方案是建立一個隱藏元素，並將所有所需的類別新增到它中，這樣即使在渲染後動態取得它們，它們也會被產生。

<div className="hidden from-red-500"></div>

但我認為safelist更好。