tailwind css 를 이용해서 javascript 코드 내에서 템플릿으로 작성할시 적용안되는 점

[asdfqaz74]

safelist 에 관한 Tailwind Document

https://tailwindcss.com/docs/content-configuration#safelisting-classes

뤼튼한테 질문 했을 때 답변

Tailwind CSS는 빌드 시점에 사용되지 않는 스타일을 제거하는 'purge' 옵션을 사용하고 있습니다. 이 'purge' 기능은 프로젝트의 HTML 파일들을 스캔하여 실제로 사용된 클래스만 최종 빌드 파일에 포함시키는 역할을 합니다.

따라서 JavaScript로 동적으로 클래스를 추가하거나 변경하는 경우, 빌드 시점에 해당 클래스가 HTML에 없다면 Tailwind CSS는 그것을 사용되지 않는 스타일로 간주하고 제거할 수 있습니다. 그 결과, 런타임에 JavaScript로 클래스를 추가하거나 변경해도 해당 스타일이 적용되지 않는 문제가 발생할 수 있습니다.

이런 문제를 해결하는 방법 중 하나는 Tailwind CSS의 purge 옵션 설정에서 JavaScript 파일들을 포함시키는 것입니다. 이렇게 하면 Tailwind CSS는 JavaScript 파일들을 스캔하면서 해당 클래스를 사용하는지 확인하게 되고, 제거하지 않게 됩니다.

module.exports = {
    purge: [
        './src/**/*.html',
        './src/**/*.vue',
        './src/**/*.jsx',
        './src/**/*.js', // JavaScript 파일들 추가
    ],
    // ...
}

[asdfqaz74]

해결 완료

tailwind.config.js 에서 content 에 옵션을 추가

하나하나 safelist 에 추가 안해도 content 에 js 파일을 추가해주면 랜더링 과정 중 css들이 삭제 되지 않고 보호가 된다.

Tailwind CSS의 purge 과정에서 동적으로 생성되는 클래스들이 제거되는 문제를 해결하기 위해 safelist에 클래스를 추가하는 방법이 있습니다. 단, 이 방법은 클래스 이름이 고정되어 있거나, 적은 수의 변형만 있는 경우에만 효과적입니다. 만약 클래스 이름이 동적으로 많이 변한다면, safelist에 모든 가능한 클래스를 추가하는 것은 비효율적일 수 있습니다. 이런 경우에는 다른 해결 방법을 고려해야 할 수 있습니다.

클래스 이름이 JavaScript에서 동적으로 생성되는 경우, 해당 JavaScript 파일을 PurgeCSS의 content 옵션에 추가하여 PurgeCSS가 JavaScript 파일을 스캔하도록 할 수 있습니다. 이렇게 하면, JavaScript에서 실제로 사용된 클래스들이 purge 과정에서 제거되지 않게 됩니다.