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

Next.js / tailwind 나의 경우 여러단계로 진행이 되는 등록 컴포넌트를 만들고 있었다.그리고 stpper라는 스탭을 보여주는 컴포넌트를 만들어 사용자가 총 몇단계인지 몇번째 단계를 등록중인지 보여주고 싶었다. 이때 stpper는 grid로 개수와 현재 페이를 구분하고 있었다. 그런데 잘 되지 않아 찾아보니 tailwind는 기본적으로 빌드 시 사용하지 않는 스타일을 제거하는 Purge 기능이 있는데 직접적으로 참조하지 않는 클래스를 최종 css 파일에서 제거되어 제대로 작동하지 않는 것 이었다.   이런 경우 클래스들이 제거되지 않도록 tailwind.config.ts 에서 safelist 옵션을 사용해 동적으로 생성될 수 있는 클래스 이름을  주면 된다!    stpper에 동적으로 클래스..
카테고리 없음 2024. 6. 6. 20:08
1