Vue Tailwind 및 동적 클래스

최근 진행하고 있는 프로젝트에서는 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은 프로젝트의 다른 곳에서는 사용되지 않습니다

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

<template>
    <h3 :class="['font-bold', colorClass]">{{ heading }}</h3>
</template>
<script type="text/javascript">
    const colorClass = ref('')

    // color being set somewhere else in the component logic
    colorClass.value = 'text-custom-green-50'
</script>

아래 예제가 작동합니다.

<template>
    <h3 :class="['font-bold', colorClass]">{{ heading }}</h3>
    <p class="text-custom-green">Green text</p>
</template>
<script type="text/javascript">
    const colorClass = ref('')

    // color being set somewhere else in the component logic
    colorClass.value = 'text-custom-green-50'
</script>

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

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

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

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

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

위 내용은 Vue Tailwind 및 동적 클래스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!