Post

[Tailwind CSS] Dynamic rendering 시 스타일 적용 안되는 현상 해결 방법

Tailwind CSS에서 스타일을 적용하는 방식

Tailwind CSS를 사용할 때, state나 props를 통해 클래스를 지정하면 스타일이 적용이 안되는 경우가 있습니다. Tailwind CSS는 스타일을 적용하기 위해 먼저 코드를 전부 스캔한 후, 코드에서 사용된 스타일을 모아둔 CSS 파일을 만드는데, state같은 가변 데이터는 CSS 파일에 포함되지 않기 때문에 스타일이 적용이 안되는 것이라고 합니다.

가변 데이터 사용 시

1
2
3
4
5
6
7
export default function page() {
    // 1~6 랜덤 숫자
    const randomNum = Math.floor(Math.random() * 7);

    // 배경색 프리셋 1~6 중에 랜덤으로 나옴
    return <div className={`bg-color-[${randomNum}]`}></div>
}

정적으로 사용 시

1
2
3
4
export default function page() {
    // 배경색 프리셋 1로 고정
    return <div class="bg-color-1"></div>
}

 

해결 방법 1 - 스타일을 빈 div에 적용하고 숨김

가장 간단한 방법은 약간 야메(?)같은 방법이지만 빈 div에 적용하고 싶은 스타일을 전부 넣은 후 숨기면 됩니다. div에 직접 넣은 스타일은 숨김 처리되어도 Tailwind가 인식하고 CSS 파일에 포함시키기 때문입니다.

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export default function page() {
    // 1~6 랜덤 숫자
    const randomNum = Math.floor(Math.random() * 7);

    return (
    	<>
            {/* 배경색 모두 미리 적용 */}
            <div className="bg-color-1 hidden"></div>
            <div className="bg-color-2 hidden"></div>
            <div className="bg-color-3 hidden"></div>
            <div className="bg-color-4 hidden"></div>
            <div className="bg-color-5 hidden"></div>
            <div className="bg-color-6 hidden"></div>

            {/* 배경색 프리셋 1~6 중에 랜덤으로 나옴 */}
            <div className={`bg-color-[${randomNum}]`}></div>
        </>
    )
}

 

해결 방법 2 - config 파일 safelist에 추가

다른 방법은 tailwind.config.js 파일에 safelist를 추가하는 방법입니다. safelist는 CSS 파일에 무조건 포함시킬 스타일을 지정하는 리스트입니다. 리스트는 정규표현식(regex)으로 작성하면 됩니다.

tailwind.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/** @type {import('tailwindcss').Config} */

module.exports = {
    .
    .
    .
    /* 
        bg-color-1부터 bg-color-6, 
        text-color-1부터 text-color-6까지 무조건 적용
    */
    safelist: [
        { pattern: /(bg|text)-color-(1|2|3|4|5|6)/ }
    ]
}

 

레퍼런스

This post is licensed under CC BY 4.0 by the author.