Tailwind CSS Colors in Astro Sites

Tailwind Colors in Astro Pages

Astro's static-first approach works seamlessly with Tailwind. Colors render at build time, so there is no runtime overhead. For interactive theming you can use client-side islands.

Basic Astro Color Usage

---
// src/pages/index.astro
const features = [
  { title: 'Fast', color: 'bg-blue-500' },
  { title: 'Secure', color: 'bg-emerald-500' },
  { title: 'Scalable', color: 'bg-purple-500' },
];
---
<div class="grid grid-cols-3 gap-4">
  {features.map(f => (
    <div class={`${f.color} text-white p-6 rounded-xl`}>
      <h3 class="font-bold text-lg">{f.title}</h3>
    </div>
  ))}
</div>

Dark Mode with Astro Islands

// src/components/ThemeToggle.tsx (React island)
export default function ThemeToggle() {
  return (
    <button
      onClick={() => document.documentElement.classList.toggle('dark')}
      className="bg-slate-200 dark:bg-slate-700 text-slate-800 dark:text-white px-3 py-1 rounded"
    >
      Toggle Theme
    </button>
  );
}

// Usage in .astro file:
// <ThemeToggle client:load />

Best Practices

• Colors in Astro frontmatter arrays are detected by Tailwind's content scanner
• Use CSS variables for theme colors that need to change at runtime
• Keep interactive color logic in client:load or client:visible islands
• Astro scopes styles per component; use global Tailwind classes for consistency