Next.js で TailwindCSS スタイルを適用すると、スタイルがレンダリングされないという問題が発生します。

Question

TailwindCSS を使用して背景表紙を設定し、useEffect の bookId (10 桁) から色を抽出しました。色が更新され、コンポーネントは更新された色の値で再レンダリングされますが、レンダリングされたページの背景色は親 div の色のままです。

const Colors = [
    'from-red-500',
    'オレンジ 500 から',
    'from- yellow-500',
    'from-green-500',
    'from-シアン-500',
    'from-blue-500',
    'from-indigo-500',
    'from-violet-500',
    'from-purple-500',
    'from-pink-500',
】

関数 BgCover(props) {
    const [color, setColor] = useState(null)
    const ルーター = useRouter()

    useEffect(() => {
        const id = router.query.bookId
        const Index = id.slice(-1) //bookIdからインデックスを抽出
        const bgColor = カラー[インデックス]
        setColor(bgColor)
    }、[])

    戻る （
        ＜フラグメント＞
            {色 ？ （
                <div className='flex-grow スクロールバー-非表示選択-相対なし'>
                    <div className={`bg-gradient-to-b ${color} to-black`}>
                        <セクション
                            className={`flex flex-col md:flex-row items-center justify-center p-4`}>
                            {props.children}
                        </セクション>
                    </div>
                </div>
            ):(
                <p className='text-2xl'>読み込み中..</p>
            )}
        </フラグメント>
    )
}

ただし、カラー変数をカラー値 (たとえば「from-red-500」) に置き換えると、レンダリングされたページに背景色が表示されます。

useEffect の setColor コードを getStaticProps に置き換えてみましたが、コードの静的バージョンでは問題は解決されませんでした (カラー変数を使用する場合)。

ご協力いただきありがとうございます。

Answer 1

これは、tailwindcss および動的クラスに関する既知の問題です。クラスはレンダリング後に適用されるため、静的クラスと同じクラスを持つ別の要素がない限り、その効果は tailwind によって生成されません。

したがって、tailwind の「セーフリスト」を使用してこの問題を解決できます。 tailwind.config で、コード内に静的クラスとして存在しない、生成する必要があるすべての tailwind クラスを含むセーフリスト配列を定義します。

tailwind.config.js:

リーリー

これらのクラスは常に生成されるため、動的に適用すると、それに応じて変更されます。

セーフリストに追加した後はサーバーを再起動する必要があることに注意してください。

＃＃＃＃＃＃ソース＃＃＃＃＃＃

もう 1 つの手動解決策は、非表示要素を作成し、そこに必要なクラスをすべて追加して、レンダリング後に動的に取得した場合でもクラスが生成されるようにすることです。 リーリー しかし、セーフリストの方が良いと思います。