dynamic 클래스가 안될 때

아래처럼 rotate-[${변수}deg] 이런 식으로 변수를 사용해서 tailwindCSS 클래스를 사용하려고 하면 안 됩니다.

for (let i = 0; i < count; i++) {
    const element = (
      <div
        key={i}
        className={`absolute w-full h-[2px] bg-black transform rotate-[${i}deg] top-[calc(50%-1px)]`}
      ></div>
    );
    list.push(element);
  }

 

 

안 되는 이유는 tailwindCSS가 빌드 타임에 검사를 하는데 안 쓰는 클래스들은 제거하기 때문입니다. 

 

제가 해결한 방법은 사용할 클래스들을 미리 작성해 두고, watilwind.config.js 파일에서 해당 파일을 명시하는 것으로 해결했습니다. 

 

일단 유틸 파일로 빼두고요. 

// size.ts
// rotate deg
export const ROTATE_DEG = [
  'rotate-0',
  'rotate-1',
  'rotate-2',
  'rotate-3',
  'rotate-4',
  'rotate-5',
  'rotate-6',
  'rotate-7',
  'rotate-8',
  'rotate-9',
  'rotate-10',
  'rotate-11',
  'rotate-12',
  'rotate-13',
  'rotate-14',
  'rotate-15',
  
	...
  'rotate-358',
  'rotate-359',
  'rotate-360',
];

 

tailwind.config.js 파일에 해당 파일을 명시해 줍니다.

 

/** @type {import('tailwindcss').Config} */

const ROTATE_360 = { ...Array.from({ length: 361 }, (_, i) => `${i}deg`) };

module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/utils/size.ts',
  ],
  theme: {
    extend: {
      fontFamily: {
        sincer: ['var(--font-sincVariable'],
      },
      colors: {
        accent: 'rgb(252 165 165)',
        main: 'rgb(252 165 165)',
      },
      rotate: ROTATE_360,
    },
  },
  plugins: [],
};

 

이후 미리 작성해둔 클래스 배열을 사용하면 됩니다.

for (let i = 0; i < count; i++) {
    const element = (
      <div
        key={i}
        className={`absolute w-full h-[2px] bg-black transform ${
          ROTATE_DEG[i * 15]
        } top-[calc(50%-1px)]`}
      ></div>
    );
    list.push(element);
  }