찾다

 >  Q&A  >  본문

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

<p>TailwindCSS를 사용하여 배경 표지를 설정하고 useEffect의 bookId(10자리)에서 색상을 추출했습니다. 색상이 업데이트되고 구성요소가 업데이트된 색상 값으로 다시 렌더링되지만 렌더링된 페이지의 배경색은 여전히 ​​상위 div의 색상과 동일합니다. </p> <pre class="brush:php;toolbar:false;">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> )} </조각> ) }</pre> <p>그러나 색상 변수를 색상 값(예: 'from-red-500')으로 바꾸면 렌더링된 페이지에 배경색이 표시됩니다. </p> <p>또한 useEffect의 setColor 코드를 getStaticProps로 바꾸려고 시도했지만 코드의 정적 버전에서는 문제가 해결되지 않았습니다(color 변수를 사용할 때). </p> <p>도움을 주셔서 감사합니다. </p>
P粉933003350P粉933003350460일 전611

모든 응답(1)나는 대답할 것이다

  • P粉191323236

    P粉1913232362023-08-28 00:23:31

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

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

    tailwind.config.js:

    으아악

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

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

    출처

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

    으아악

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

    회신하다
    0
  • 취소회신하다