109: The Road to Tailwind CSS v1.0

What It Covers

Adam Wathan discusses Tailwind CSS version 1.0 release plans, explaining major configuration file restructuring, the shift toward convention over configuration with curated defaults, breaking changes focused on consistency, and future roadmap including transitions, CSS Grid, and premium component libraries.

Key Questions Answered

• •Config File Restructuring: Tailwind 1.0 moves all design system values under a new `theme` key, renames modules to `variants`, and promotes top-level options. This separates framework configuration from design tokens, making the config file more logical and enabling easier theme extraction for reuse across projects.
• •Convention Over Configuration Philosophy: Default config scaffolds as empty file instead of 900 lines of values. Users inherit Tailwind's curated defaults automatically and only specify overrides, reducing upgrade friction and creating portable knowledge across projects. The `extend` key allows adding values without replacing entire scales.
• •Minimal Breaking Changes Strategy: Only one class name changes (roman to not-italic). Most breaking changes occur in configuration keys, not HTML classes. Spacing scale consolidates into single source for padding, margin, width, and height. Backward compatibility prioritized over micro-optimizations since class names only matter during initial learning phase.
• •PurgeCSS Integration Plans: Future versions will incorporate PurgeCSS as first-class feature that only affects Tailwind-generated classes, not custom CSS or third-party styles. Automatic regex generation based on config file eliminates manual extractor configuration and whitelisting concerns while maintaining 99 percent of size reduction benefits.
• •Component Ecosystem Strategy: Post-1.0 roadmap includes premium HTML component marketplace with multiple visual themes built on Tailwind. Renderless component libraries for Vue and React provide complex JavaScript behavior without enforcing presentation. Official plugins for transitions and CSS Grid developed separately before potential core integration, following Rails gem model.