Tailwind CSS Colors in Vue.js Applications

Tailwind Colors with Vue Bindings

Vue's class binding system pairs naturally with Tailwind. Use v-bind:class or the shorthand :class to conditionally apply color utilities based on component state.

Dynamic Color Classes in Vue

<template>
  <span :class="badgeClasses">
    {{ label }}
  </span>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({ status: String, label: String });

const badgeClasses = computed(() => {
  const base = 'px-2 py-1 rounded-full text-xs font-medium';
  const map = {
    active: 'bg-emerald-100 text-emerald-700',
    inactive: 'bg-slate-100 text-slate-600',
    pending: 'bg-amber-100 text-amber-700',
  };
  return `${base} ${map[props.status] || map.inactive}`;
});
</script>

Reactive Theme Switching

<script setup>
import { ref } from 'vue';
const isDark = ref(false);

function toggleTheme() {
  isDark.value = !isDark.value;
  document.documentElement.classList.toggle('dark');
}
</script>

<template>
  <div class="bg-white dark:bg-slate-900 min-h-screen">
    <button @click="toggleTheme"
      class="bg-slate-200 dark:bg-slate-700 text-slate-800 dark:text-slate-200 px-3 py-1 rounded">
      Toggle Theme
    </button>
  </div>
</template>

Best Practices for Vue + Tailwind Colors

• Use computed properties to build class strings cleanly
• Store color mappings in composables for reuse across components
• Avoid dynamic class construction; always use complete class names
• Configure Tailwind content paths to include .vue files