Tailwind 동적 클래스 생성이 동작하지 않을 때

 

어제부터 토로또 웹버전을 만들기 시작했고, next, tailwind 조합으로 UI 작업을 했다.

오늘 다시 작업을 시작하느라 빌드를 새로 했더니 당첨 번호가 보이지 않았다.(정확히는 배경 색상이 표시되지 않음)

 

 

어디갔어!!!!! 

 

tailwind.config.ts에 커스터마이징 색상을 추가하고 로또 번호별로 색상을 지정해서 동적클래스를 만들어놨었다. 어제는 분명히 됐는데, 오늘은 안된다.

 

tailwind.config.ts, 나머지 부분은 임시로 지우고 캡쳐했다.

1개의 로또 번호 표시되는 컴포넌트

 

로또 번호에 따라 색상을 가져오는 함수

 

 

커스터마이징 색상을 잘 인식하지 못하나 해서 bg-symbol-sky를 강제로 입력해봤더니 파란색만 뜬다.

 

 

tailwind가 만든 css에 bg-symbol-sky만 생성되어 있는 걸 확인할 수 있었다. 커스터마이징 색상에는 문제가 없다는 것을 알았다. 어제 잘 표시된 이유는 각 색상별 클래스를 사용하고 나서 함수를 만들었기 때문인 것 같다. 

 

 

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

 

Content Configuration - Tailwind CSS

 

 

찾아보니 동적으로 이름을 생성하지 말라고 한다.

 

 

 

그래서 함수에서 동적으로 이름 전체를 만들었는데, 이래도 안된다! 

 

 

이렇게 전체 이름을 다 입력해주어야만 tailwind가 클래스를 만들어준다.

클래스가 만들어졌는지는 .next > static > css 폴더에 있는 css 파일을 확인해보면 된다! 

 

 

 

오늘 하나 배웠다!