The Power of Tailwind CSS

We’ve completely revamped our blog’s architecture and design system. By leveraging the power of Tailwind CSS v4 and Astro Content Collections, we’ve created a writing experience that is as beautiful as it is performant.

Why Tailwind CSS?

Tailwind allows us to build modern websites without ever leaving your HTML. It’s a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Key Benefits

1. Rapid Development: No more switching between HTML and CSS files.
2. Consistency: Utility classes ensure we stick to a defined design system.
3. Performance: Unused CSS is automatically purged (or JIT compiled).

Typography That Breathes

With @tailwindcss/typography, we get beautiful defaults for our content. Lists, headings, and code blocks just work:

• Clean, legible font stacks (Inter, Merriweather, etc.)
• Proper line-height and spacing
• Responsive scaling

// Example Component
export const Button = ({ children }) => {
  return (
    <button className="bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-md">
      {children}
    </button>
  );
};

Dark Mode Ready

Our new setup automatically respects your system preferences. Try toggling your system theme! The dark: modifier in Tailwind makes this incredibly easy to implement.

“Good design is as little design as possible.” — Dieter Rams

We hope you enjoy the new reading experience!