Apabila menggunakan gaya TailwindCSS dalam Next.js, saya menghadapi masalah bahawa gaya tidak diberikan.

Question

Menggunakan TailwindCSS untuk menetapkan kulit latar belakang, saya mengekstrak warna daripada bookId (10 digit) dalam useEffect. Warna dikemas kini dan komponen dipaparkan semula dengan nilai warna yang dikemas kini, tetapi warna latar belakang halaman yang diberikan masih sama dengan warna div induknya.

const color = [
    'dari-merah-500',
    'dari-oren-500',
    'dari-kuning-500',
    'dari-hijau-500',
    'dari-cyan-500',
    'dari-biru-500',
    'dari-indigo-500',
    'dari-violet-500',
    'dari-ungu-500',
    'dari-merah jambu-500',
]

fungsi BgCover(props) {
    const [warna, setColor] = useState(null)
    penghala const = useRouter()

    useEffect(() => {
        const id = router.query.bookId
        const index = id.slice(-1) //Ekstrak indeks daripada bookId
        const bgColor = warna[indeks]
        setColor(bgColor)
    }, [])

    kembali (
        <Pecahan>
            {warna ? (
                <div className='flex-grow scrollbar-hide select-none relative'>
                    <div className={`bg-gradient-to-b ${color} to-black`}>
                        <bahagian
                            className={`flex flex-col md:flex-row items-center justify-center p-4`}>
                            {props.children}
                        </section>
                    </div>
                </div>
            ) : (
                <p className='text-2xl'>Memuatkan..</p>
            )}
        </Fragment>
    )
}

Walau bagaimanapun, apabila saya menggantikan pembolehubah warna dengan nilai warna (katakan 'from-red-500'), warna latar belakang kelihatan dalam halaman yang diberikan.

Saya juga cuba menggantikan kod setColor dalam useEffect dengan getStaticProps, tetapi versi statik kod itu tidak menyelesaikan masalah (apabila menggunakan pembolehubah warna).

Terima kasih atas sebarang bantuan.

Answer 1

Ini ialah isu yang diketahui dengan kelas tailwindcss dan dinamik, kerana kelas digunakan selepas pemaparan, kesannya tidak akan dijana oleh tailwind melainkan terdapat elemen lain dengan kelas yang sama dengan kelas statik.

Jadi anda boleh menggunakan "safelist" tailwind untuk menyelesaikan masalah ini. Dalam tailwind.config anda, tentukan tatasusunan senarai selamat yang mengandungi semua kelas tailwind yang anda perlukan untuk hasilkan yang tidak wujud sebagai kelas statik dalam kod anda.

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',
  ]
  // ...
}

Kini kelas ini akan sentiasa dijana, jadi apabila anda menggunakannya secara dinamik, ia akan berubah dengan sewajarnya.

Sila ambil perhatian bahawa anda perlu memulakan semula pelayan selepas menambah ke senarai selamat.

Sumber

Satu lagi penyelesaian manual ialah mencipta elemen tersembunyi dan menambah semua kelas yang diperlukan padanya supaya ia dijana walaupun anda mendapatkannya secara dinamik selepas rendering.

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

Tetapi saya rasa safelist lebih baik.