Tsuyoshi

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>