Go back to articles

Crafting a Modern UI with Tailwind and Catalyst

How I combined Tailwind CSS v3 with Tailwind UI's Catalyst components to create a professional admin interface, all adapted for Phoenix LiveView — with some AI assistance.

Crafting a Modern UI with Tailwind and Catalyst

With Phoenix as my foundation, the next challenge was creating a beautiful, professional interface. I needed something polished out of the box but fully customizable.

Why Tailwind CSS?

Tailwind’s utility-first approach felt like a revelation after years of fighting CSS frameworks:

  • No context switching: write HTML and styles together
  • Consistency by default: predefined spacing, color, and typography scales
  • Tiny production builds: PurgeCSS removes unused classes (~12KB gzipped)
  • Dark mode made easy: dark: variants for everything

Catalyst UI Kit

Catalyst from Tailwind Labs provided beautiful pre-built React components. My task was converting them to Phoenix.Component function components — replacing Headless UI interactions with LiveView JS commands.

AI-Powered Development

GitHub Copilot with Claude Sonnet was an invaluable pair programming partner. It helped with pattern recognition, boilerplate generation, and translating React/TypeScript patterns to Elixir — while I handled architecture, security, UX design, and all critical decisions.

In 2 days I built a complete admin dashboard with 8+ CRUD interfaces, media management, multi-language support, and dark mode throughout. AI is a force multiplier for experienced developers, not a replacement.

Results

  • Professional admin interface comparable to commercial SaaS
  • Only 12KB of CSS in production
  • Every component supports dark mode
  • Fully responsive, mobile-first design
  • Accessible with ARIA attributes

Next: My Current Design State