135: Lessons Learned Building Tailwind UI

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.