Skip to main content
Full Stack Radio

135: Lessons Learned Building Tailwind UI

98 min episode · 2 min read
·
Sam Selakoff

Episode

98 min

Read time

2 min

Topics

Leadership, Design & UX, Software Development

AI-Generated Summary

Key Takeaways

  • Line Height Math: Tailwind UI uses 14px font with explicit 20px line height (leading-5) instead of relative 1.5 multiplier to ensure even-numbered button heights of 38px, preventing one-pixel misalignment when centering odd-height elements inside even-height containers like navigation bars with 40px avatars.
  • Fixed Line Heights Over Relative: Switching from relative line heights (leading-tight, leading-normal) to explicit pixel values (leading-5 for 20px, leading-6 for 24px) solves layout predictability issues. This approach ensures all UI elements use even numbers, making vertical centering mathematically precise across all component combinations and screen sizes.
  • CSS Grid for Pricing Cards: Three-row grid with middle card spanning all rows while outer cards span only row two creates automatic vertical centering. Browser calculates equal empty space above and below outer cards, eliminating Flexbox negative margin hacks and making layouts resilient to content changes without media query adjustments.
  • Gap Property Replaces Margins: CSS Grid gap property eliminates negative margin techniques for gutters between columns and rows. One-column grids with gap handle vertical spacing better than margin-top patterns. Upcoming Flexbox gap support will enable fluid wrapping layouts where buttons drop below headers without manual breakpoint management or spacing adjustments.
  • Alpine JS for HTML-Only Interactivity: Alpine JS attributes (x-data, x-show) document interactive component behavior directly in HTML without separate script blocks, making state management readable as pseudocode. React and Vue developers can translate Alpine syntax instantly, maintaining the HTML-only paradigm while showing exact class toggles and transition specifications for dropdowns and mobile menus.

What It Covers

Adam Wathan shares technical lessons from building Tailwind UI, covering line height calculations for even-numbered button heights, CSS Grid implementation strategies, the gap property for layout spacing, and architectural decisions around HTML-only components with Alpine JS for interactivity patterns.

Key Questions Answered

  • Line Height Math: Tailwind UI uses 14px font with explicit 20px line height (leading-5) instead of relative 1.5 multiplier to ensure even-numbered button heights of 38px, preventing one-pixel misalignment when centering odd-height elements inside even-height containers like navigation bars with 40px avatars.
  • Fixed Line Heights Over Relative: Switching from relative line heights (leading-tight, leading-normal) to explicit pixel values (leading-5 for 20px, leading-6 for 24px) solves layout predictability issues. This approach ensures all UI elements use even numbers, making vertical centering mathematically precise across all component combinations and screen sizes.
  • CSS Grid for Pricing Cards: Three-row grid with middle card spanning all rows while outer cards span only row two creates automatic vertical centering. Browser calculates equal empty space above and below outer cards, eliminating Flexbox negative margin hacks and making layouts resilient to content changes without media query adjustments.
  • Gap Property Replaces Margins: CSS Grid gap property eliminates negative margin techniques for gutters between columns and rows. One-column grids with gap handle vertical spacing better than margin-top patterns. Upcoming Flexbox gap support will enable fluid wrapping layouts where buttons drop below headers without manual breakpoint management or spacing adjustments.
  • Alpine JS for HTML-Only Interactivity: Alpine JS attributes (x-data, x-show) document interactive component behavior directly in HTML without separate script blocks, making state management readable as pseudocode. React and Vue developers can translate Alpine syntax instantly, maintaining the HTML-only paradigm while showing exact class toggles and transition specifications for dropdowns and mobile menus.

Notable Moment

Wathan discovered iOS Safari ignores line-height values below 1.15 on text inputs, reverting to browser defaults instead of clamping to a minimum value. This undocumented behavior forced abandoning line-height: 1 for form elements, requiring the team to find alternative solutions for achieving consistent even-numbered heights across buttons, inputs, and textareas.

Know someone who'd find this useful?

Episode Transcript

Hey, everyone. Before we get into the show, I just want to share some pretty exciting news and that is that last week we finally launched early access to Tailwind UI, which is a collection of professionally designed, fully responsive HTML components built with Tailwind CSS put together by myself, the creator of Tailwind, Adam Wadden, and Steve Schoger, co author of Refactoring UI. If you love working with Tailwind but maybe don't consider yourself much of a designer or maybe you just wanna move really fast and don't wanna get hung up on tricky layout problems or weird CSS behavior, definitely check it out. I promise it's gonna save you hours and hours of time and it'll make building beautiful modern user interfaces a breeze. We're super proud of everything that we've published so far and excited to keep adding new components every single month until we run out of ideas. So So head over to tailwindui.com and check it out. Picking up is a great way to support both Tailwind CSS as well as this podcast. In this episode of Fullstack Radio, Sam Selakoff joins the show to talk to me about the lessons I learned building Tailwind UI. This is Fullstack Radio episode one thirty five. Yeah. So I guess maybe for anyone who has just hasn't really been following along with this project, Steve Shoger and I, my business partner who I worked on refractoring UI with for the last, I mean, I think our first prototype was March, so just about a year now. We've kind of been tossing around this idea of putting together some sort of commercial product on top of Tailwind CSS that, offers, like, premium either, like, themes or templates or a UI kit. It was kind of like we didn't really have it totally figured out at the beginning, but we just knew that there was there was something we could build somewhere that would, like, help people move faster with Tailwind who weren't as design inclined or maybe not as good with CSS as you kinda need to be to really achieve really good results with Tailwind or just to help people move faster in general where we work out some annoying edge cases and, stuff like that. We just thought, okay. There's there's something we can build that's like an HTML only product that gives people a bunch of, kind of starter templates for achieving common things, with Tailwind. And we think people will pay for it, and we think it's a good way to help, sort of sustain development, on the product. So Tailwind UI is, that essentially, and we can talk more about what it is, specifically. But, yeah, that's kind of, like, where the story starts at least. Yeah. And it was I mean, correct me if I'm wrong, but it was really born out of a lot of the feedback from refactoring UI. Right? I mean, I I kinda think this is funny because …

Get the full transcript (20,123 words) + summary by email — free

One-time email with the complete transcript and AI summary of this episode. No account needed.

One email, no spam. We’ll also show you what SignalCast does.

Browse all Full Stack Radio transcripts →

You just read a 3-minute summary of a 95-minute episode.

Get Full Stack Radio summarized like this every Monday — plus up to 2 more podcasts, free.

Pick Your Podcasts — Free

Keep Reading

Books, tools, and gear mentioned in this episode

SignalCast may earn commission on purchases via these links.

Tools

  • Three-row grid with middle card spanning all rows while outer cards span only row two creates automatic vertical centering. Browser calculates equal empty space above and below outer cards, eliminating Flexbox negative margin hacks and making layouts resilient to content changes without media query adjustments.
  • Adam Wathan shares technical lessons from building Tailwind UI, covering line height calculations for even-numbered button heights, CSS Grid implementation strategies, the gap property for layout spacing, and architectural decisions around HTML-only components with Alpine JS for interactivity patterns.
  • Alpine JS attributes (x-data, x-show) document interactive component behavior directly in HTML without separate script blocks, making state management readable as pseudocode. React and Vue developers can translate Alpine syntax instantly, maintaining the HTML-only paradigm while showing exact class toggles and transition specifications for dropdowns and mobile menus.
  • Gap Property Replaces Margins: CSS Grid gap property eliminates negative margin techniques for gutters between columns and rows. One-column grids with gap handle vertical spacing better than margin-top patterns. Upcoming Flexbox gap support will enable fluid wrapping layouts where buttons drop below headers without manual breakpoint management or spacing adjustments.

More from Full Stack Radio

We summarize every new episode. Want them in your inbox?

Similar Episodes

Related episodes from other podcasts

Explore Related Topics

This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.

Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.

You're clearly into Full Stack Radio.

Every Monday, we deliver AI summaries of the latest episodes from Full Stack Radio and 192+ other podcasts. Free for one show.

Start My Monday Digest

No credit card · Unsubscribe anytime