tailwindcss - 사용하지 않는 클래스 미리 빌드하기

개요

vue로 포트폴리오 프로젝트 진행 중 특정 클래스들을 추가하는 코드를 별도의 데이터 파일로 관리했더니 해당 클래스의 빌드가 정상적으로 이루어지지 않는 오류가 발생했다.

---

해결방법

// tailwind.config.js
module.exports = {

  ...

  safelist: [
    'text-gray-500', // 미리 빌드하고 싶은 클래스
    {
      pattern: /bg-(red|blue|green)-(100|200|500)/, // 정규식을 사용하여 여러 클래스 포함
      variants: ['hover', 'focus'], // 변형 클래스 포함 (예: hover:bg-red-500)
    },
  ],

  ...

}