135: Lessons Learned Building Tailwind UI
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.
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.
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 — FreeKeep Reading
More from Full Stack Radio
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
Aug 21 · 76 min
Startups For the Rest of Us
Episode 825 | Talking Tailwind CSS and Founder Fitness (with Adam Wathan)
Mar 24
More from Full Stack Radio
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
Jan 28 · 47 min
Lenny's Podcast
AI is critical for humanity’s survival: Cisco president on the AI revolution | Jeetu Patel
Feb 26
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?
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
151: DHH – Building HEY with Hotwire
150: Secret Screencasting Tips & Behind the Scenes of Tailwind CSS 2.0
149: Choosing a Payment Processor, Radical Icons & W3C Hype
Similar Episodes
Related episodes from other podcasts
Startups For the Rest of Us
Mar 24
Episode 825 | Talking Tailwind CSS and Founder Fitness (with Adam Wathan)
Lenny's Podcast
Feb 26
AI is critical for humanity’s survival: Cisco president on the AI revolution | Jeetu Patel
The AI Breakdown
Feb 12
How I Built My 10-Agent OpenClaw Team
We Study Billionaires
Dec 14
RWH063: Avoid Disaster w/ Howard Marks
On Purpose with Jay Shetty
Nov 21
6 Lessons I Wish I Knew in My 20’s & 30’s (This Will INSTANTLY Give You Direction!)
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 DigestNo credit card · Unsubscribe anytime