tailwind css에서 동적 스타일링을 할 때 주의할 점

시간 배열의 개수에 따라 grid cols 수를 동적으로 스타일링 하고 싶었다.

그런데 이런식으로 계산한 값을 템플릿 리터럴로 넣었더니 문제가 발생했다.

const gridColNum =
   dateInfo.times.length <= 4 ? '2' : dateInfo.times.length > 4 && dateInfo.times.length <= 6 ? '3' : '4'; // 등록된 시간 개수에 따라 grid 숫자 조절
   
<div key={dateInfo.dateId} className={`grid grid-cols-${gridColNum} gap-2 w-full mb-3`}>

브라우저 요소 창에는 grid-cols-3 이런식으로 적혀있는데 막상 스타일은 grid가 적용이 되지 않고 있었다.

그런데 브라우저 창에서 개발자도구로 grid를 직접 입력해주면 스타일이 적용되는 이상한 버그가 일어나고 있었다..

구글링을 해보니 나와 똑같은 문제를 겪고 있는 사람이 많았다.

문제의 원인은 tailwind css의 최적화 기능에서 발생하고 있었다.

테일윈드는 컴파일시 사용되지 않는 속성들을 모두 제거해서 적용한다고 한다.

즉 컴파일시 내가 동적으로 작성했던 grid-cols- 부분을 인식하지 못하고 완성되지 않은 문법으로 간주되어 제거되어서 적용되지 않았던 것이다.

해결방법은 두가지가 있다.

1. 완전한 문법으로 동적 스타일링하기

  const GridCols = {
    2: 'grid-cols-2',
    3: 'grid-cols-3',
    4: 'grid-cols-4'
  };
  
<div key={dateInfo.dateId} className={`grid ${GridCols[gridColNum]} gap-2 w-full mb-3`}>

 

이런식으로 완성된 문법 자체를 객체로 만들고 계산한 숫자에 따라 스타일이 적용되도록 하면 된다.

 

2. tailwind config에 safeList 에 추가하기

동적으로 스타일링하려는 스타일을 config 파일에 작성한다.

safelist: [
    'grid-cols-2',
    'grid-cols-3',
    'grid-cols-4
  ],

이런식으로 작성해주면 컴파일시 safeList에 작성한 스타일은 제거되지 않고 남아있게 된다.

 

Content Configuration - Tailwind CSS

Content Configuration - Tailwind CSS