Tailwind CSS Tutorial · Tailwind Basics · Lesson 9 of 27
Tailwind CSS History & Versions
How Tailwind CSS started as a side project in 2017, how utility-first CSS went mainstream, every major version from 0.1 to 4.3 on one timeline, and what changed in v4.
How Tailwind started
Adam Wathan had been building web apps with small, single-purpose CSS classes and wrote about "utility-first" CSS in 2017. Together with Jonathan Reinink, David Hemphill and designer Steve Schoger, he turned the approach into a framework. Tailwind CSS 0.1.0 was released on 1 November 2017.
The idea was controversial: putting dozens of classes in HTML looked like inline styles. But developers found it faster to build and safer to change, and with a carefully designed scale of spacing, colours and type it produced consistent designs. Adam Wathan and Steve Schoger founded Tailwind Labs, funded by commercial products such as Tailwind UI (now Tailwind Plus), while the framework stays free and open source (MIT).
Timeline
- Tailwind CSS 4.3Current
scrollbar-*,zoom-*andtab-*utilities,@container-size, stacked and compound@variant
- Tailwind CSS 4.2Supported
- Mauve, olive, mist and taupe palettes, logical-property utilities (
pbs-*,inline-*,inset-s-*), a webpack plugin
- Mauve, olive, mist and taupe palettes, logical-property utilities (
- Tailwind CSS 4.1Supported
- Text shadows, masks,
drop-shadow-<color>, pointer variants,user-valid/user-invalid,@source inline()
- Text shadows, masks,
- Tailwind CSS 4.0Supported
- New engine (much faster builds), CSS-first configuration with
@theme, automatic content detection, OKLCH colours, container queries built in
- New engine (much faster builds), CSS-first configuration with
- Tailwind CSS 3.0Historic
- The just-in-time engine always on, every colour by default, arbitrary properties, the Play CDN
- Tailwind CSS 2.0Historic
- Dark mode, an extended colour palette,
ringutilities, the2xlbreakpoint
- Dark mode, an extended colour palette,
- Tailwind CSS 1.0Historic
- The first stable release
- Tailwind CSS 0.1Historic
- The first public release
How Tailwind changed CSS
- Utility-first went mainstream: Tailwind became one of the most used CSS frameworks, built into tools such as Laravel, Next.js starters and component systems like shadcn/ui.
- Just-in-time (2021): generating CSS on demand removed the huge development stylesheets and made arbitrary
values (
w-[37rem]) practical. - CSS-first (2025): v4 moved configuration from JavaScript into CSS (
@theme), embracing modern CSS features such as cascade layers,@property,color-mix()and container queries.
Version comparison
| v3 | v4 | |
|---|---|---|
| Setup | @tailwind directives + tailwind.config.js |
@import "tailwindcss"; |
| Configuration | JavaScript | CSS theme variables (@theme) |
| Content detection | content globs |
Automatic |
| Colours | sRGB hex | OKLCH (wider gamut) |
| Container queries | Plugin | Built in |
| Browsers | Older browsers supported | Safari 16.4+, Chrome 111+, Firefox 128+ |
Which version should you use? v4 for new projects. Stay on v3.4 only if you must support older browsers.
Official resources
Last reviewed 21 October 2026. Release and support dates come from the official release pages linked above.