Tailwind 사용 시 grid-cols-? 동적으로 사용하기

Next.js / tailwind

 

나의 경우 여러단계로 진행이 되는 등록 컴포넌트를 만들고 있었다.

그리고 stpper라는 스탭을 보여주는 컴포넌트를 만들어 사용자가 총 몇단계인지 몇번째 단계를 등록중인지 보여주고 싶었다.

 

이때 stpper는 grid로 개수와 현재 페이를 구분하고 있었다. 

그런데 잘 되지 않아 찾아보니 tailwind는 기본적으로 빌드 시 사용하지 않는 스타일을 제거하는 Purge 기능이 있는데 직접적으로 참조하지 않는 클래스를 최종 css 파일에서 제거되어 제대로 작동하지 않는 것 이었다.

 

 

 

이런 경우 클래스들이 제거되지 않도록 tailwind.config.ts 에서 safelist 옵션을 사용해 동적으로 생성될 수 있는 클래스 이름을  주면 된다!

 

 

 

 

stpper에 동적으로 클래스 이름을 주었을때 잘 적용되는 것을 볼 수 있다.