tailwindcss - 동적 클래스 이름 사용 이슈

tailwindcss 사용시 동적으로 클래스 이름 삽입하면 실제 css에 적용되지 않는 이슈가 발생.
알아보니 기본적으로 tailwindcss는 동적 클래스 이름을 인식하지 않도록 세팅되어 있다.

interface Props = {
	bgColor: string;
}

const customButton = ({ bgColor }: Props) => (
  // 클래스 이름 동적으로 삽입
  <button className={`${bgColor}`}>text</button>
)

safelist 필드 추가

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  safelist: [
    'bg-powerball_three_class_one',
    'bg-powerball_three_class_two',
    'bg-powerball_three_class_three',
    'bg-powerball_three_class_one_bar',
    'bg-powerball_three_class_two_bar',
    'bg-powerball_three_class_three_bar',
    'bg-powerball_graph_odd_even_icon',
    'bg-powerball_graph_under_over_icon',
    'bg-powerball_graph_normal_ball_odd_even_icon',
    'bg-powerball_graph_normal_ball_under_over_icon',
  ],

safelist 배열에 추가된 클래스 이름들은 동적으로 삽입되어도 css코드로 들어가 인식된다!