Tailwind CSS Colors in Svelte Projects

Tailwind Colors in Svelte Components

Svelte's concise syntax makes Tailwind integration straightforward. Apply color classes directly in markup and use reactive declarations for conditional styling.

Conditional Color Classes

<script>
  export let variant = 'default';
  const variants = {
    default: 'bg-slate-100 text-slate-800',
    primary: 'bg-blue-600 text-white',
    danger: 'bg-red-600 text-white',
    success: 'bg-emerald-600 text-white',
  };
  $: colorClass = variants[variant] || variants.default;
</script>

<button class="px-4 py-2 rounded-lg font-medium {colorClass}">
  <slot />
</button>

Theme Store Pattern

// stores/theme.js
import { writable } from 'svelte/store';

export const theme = writable('light');

theme.subscribe(value => {
  if (typeof document !== 'undefined') {
    document.documentElement.classList.toggle('dark', value === 'dark');
  }
});

Tips for Svelte and Tailwind

• Use class: directive for toggling single classes like class:bg-blue-500={isActive}
• Keep color mappings in objects so Tailwind can detect all class names at build time
• Add './src/**/*.svelte' to Tailwind content configuration
• Use Svelte stores for global theme state management