Designing with Tailwind CSS

Tailwind CSS is a utility-first CSS framework that lets you style your HTML directly in your markup. Combined with Astro, it’s a powerful duo for building beautiful sites fast.

The Utility-First Approach

Instead of writing custom CSS classes, you compose designs using small, single-purpose utility classes:

<h1 class="text-4xl font-bold text-indigo-600">
  Hello, world!
</h1>

This approach has several benefits:

1. No context switching — Style and structure live in the same file.
2. Consistent design — Tailwind’s design tokens ensure spacing, colors, and typography stay consistent.
3. Tiny production bundles — Tailwind purges unused styles, so your CSS is always minimal.

Our Design System

This site uses a simple design system built on Tailwind:

• Primary: Indigo-600 for links, buttons, and accents
• Accent: Violet-500 for gradients and highlights
• Text: Slate-800 for body, Slate-600 for secondary
• Font: Inter for clean, modern readability

Happy styling!