How to deal with duplicated Tailwind classes in Vue
What I’ve accomplished
Vue
YourFileName.vue
<script setup></script>
<template>
<div v-if="..." class="font-sans text-3xl italic"></div>
<div v-if-else="..." class="font-sans text-3xl italic"></div>
<div v-else="..." class="font-sans text-3xl italic"></div>
</template>
Declare Tailwind class in setup
YourFileName.vue
<script setup>
const divClass = 'font-sans text-3xl italic'
</script>
<template>
<div v-if="..." :class="divClass">...</div>
<div v-if-else="..." :class="divClass">...</div>
<div v-else="..." :class="divClass">...</div>
</template>
Create a component
Component.vue
<script setup>
const divClass = 'font-sans text-3xl italic'
</script>
<template>
<ChildComponent v-if="...">...</ChildComponent>
<ChildComponent v-if-else="...">...</ChildComponent>
<ChildComponent v-else="...">...</ChildComponent>
</template>