Next.js에서 TailwindCSS 스타일을 적용할 때 스타일이 렌더링되지 않는 문제가 발생합니다.

Question

TailwindCSS를 사용하여 배경 표지를 설정하고 useEffect의 bookId(10자리)에서 색상을 추출했습니다. 색상이 업데이트되고 구성요소가 업데이트된 색상 값으로 다시 렌더링되지만 렌더링된 페이지의 배경색은 여전히 ​​상위 div의 색상과 동일합니다.

const colors = [
    'from-red-500',
    '오렌지-500',
    '프롬-옐로우-500',
    'from-green-500',
    'from-시안-500',
    '프롬-블루-500',
    'from-indigo-500',
    'from-바이올렛-500',
    'from-purple-500',
    '프롬-핑크-500',
]

함수 BgCover(props) {
    const [색상, 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 스크롤바-hide select-none 상대'>
                    <div className={`bg-gradient-to-b ${color} to-black`}>
                        <섹션
                            className={`flex flex-col md:flex-row items-center justify-center p-4`}>
                            {소품.어린이}
                        </섹션>
                    </div>
                </div>
            ) : (
                <p className='text-2xl'>로드 중..</p>
            )}
        </조각>
    )
}

그러나 색상 변수를 색상 값(예: 'from-red-500')으로 바꾸면 렌더링된 페이지에 배경색이 표시됩니다.

또한 useEffect의 setColor 코드를 getStaticProps로 바꾸려고 시도했지만 코드의 정적 버전에서는 문제가 해결되지 않았습니다(color 변수를 사용할 때).

도움을 주셔서 감사합니다.

Answer 1

이는 tailwindcss 및 동적 클래스에 대해 알려진 문제입니다. 클래스는 렌더링 후에 적용되기 때문에 정적 클래스와 동일한 클래스를 가진 다른 요소가 없으면 tailwind에 의해 해당 효과가 생성되지 않습니다.

따라서 tailwind의 "safelist"를 사용하여 이 문제를 해결할 수 있습니다. tailwind.config에서 코드에 정적 클래스로 존재하지 않지만 생성해야 하는 모든 tailwind 클래스를 포함하는 허용 목록 배열을 정의합니다.

tailwind.config.js:

으아악

이제 이러한 클래스는 항상 생성되므로 동적으로 적용하면 그에 따라 변경됩니다.

허용 목록에 추가한 후에는 서버를 다시 시작해야 하니 주의하세요.

출처

또 다른 수동 솔루션은 숨겨진 요소를 생성하고 여기에 필요한 모든 클래스를 추가하여 렌더링 후 동적으로 가져오더라도 생성되도록 하는 것입니다.

으아악

하지만 저는 safelist가 더 나은 것 같아요.