최근 제가 진행하고 있는 프로젝트에서는 Vite, Vue 및 Tailwind를 활용하고 있습니다.

맞춤 색상으로 작업한 후 약간의 혼란에 빠졌습니다.

템플릿에 맞춤 색상을 추가하고 사용하는 것은 문제가 되지 않았습니다. Tailwind 문서를 사용하면 프로세스가 매우 명확해졌습니다.

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
          'custom-green': {
              50: '#9bd1b2',
              ...
              700: '#284735'
          },
        }
    }
}

내 문제는 Vue 템플릿에서 동적 및 정적 CSS 클래스와 함께 사용자 정의 색상을 사용할 때 발생했습니다.

npm run dev 또는 vite로 프로젝트를 실행할 때 bg-custom-green-50 또는 text-custom-green-50이 작동하지 않았고 CSS 파일에 나타나지 않았습니다.

내 이해에 따르면 전체 CSS 클래스 이름이 템플릿에 없으면 tailwind가 해당 클래스를 CSS 파일에 추가하거나 생성하지 않습니다.

CSS 클래스 가정: text-custom-green-50 또는 bg-custom-green-50은 프로젝트의 다른 곳에서는 사용되지 않습니다.

아래 예는 작동하지 않습니다

아래 예제가 작동합니다.

두 예시의 차이점은 text-custom-green CSS 클래스가 템플릿에 추가되어 tailwind가 이를 생성된 CSS 파일에 추가한다는 것입니다.

이 문제를 극복하려면 tailwind.config.js 파일 내의 허용 목록에 사용자 정의 색상이나 tailwind 클래스를 추가할 수 있습니다.

// tailwind.config.js
module.exports = {
    safelist: [
        'text-custom-green-50',
        'bg-custom-green-50'
    ]
}

이러한 색상은 템플릿에서 직접 사용되지 않지만 다른 지점에서 동적으로 추가되는 경우에도 사용할 수 있습니다.

다른 누군가가 이 내용이 도움이 되기를 바랍니다.