Tailwind CSS v4.0 released

Just noticed Tailwind 4 has been released:

Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.

  • New high-performance engine — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
  • Designed for the modern web — built on cutting-edge CSS features like cascade layers, registered custom properties with @property, and color-mix().
  • Simplified installation — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
  • First-party Vite plugin — tight integration for maximum performance and minimum configuration.
  • Automatic content detection — all of your template files are discovered automatically, with no configuration required.
  • Built-in import support — no additional tooling necessary to bundle multiple CSS files.
  • CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
  • CSS theme variables — all of your design tokens exposed as native CSS variables so you can access them anywhere.
  • Dynamic utility values and variants — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
  • Modernized P3 color palette — a redesigned, more vivid color palette that takes full advantage of modern display technology.
  • Container queries — first-class APIs for styling elements based on their container size, no plugins required.
  • New 3D transform utilities — transform elements in 3D space directly in your HTML.
  • Expanded gradient APIs — radial and conic gradients, interpolation modes, and more.
  • @starting-style support — a new variant you can use to create enter and exit transitions, without the need for JavaScript.
  • not-* variant — style an element only when it doesn’t match another variant, custom selector, or media or feature query.
  • Even more new utilities and variants — including support for color-scheme, field-sizing, complex shadows, inert, and more.

Anyone used it yet?

There’s a PragProg book on Tailwind (Modern CSS with Tailwind Book Club!) are there any other Tailwind learning resources worth a look?

16 Likes

I was pleasantly surprised see that the v4.0 docs now have a Framework Guides section that includes Phoenix - Install Tailwind CSS with Phoenix.

:tada:

12 Likes

Unfortunately, Tailwind Framework Guides is incorrect for Phoenix and not working :slight_smile:
You should follow the guide from the forum about beta integration.
And what about v4 ? It is nice, simpler to use because of pure CSS, but also I feel like we lost that simplicity in configuration.

3 Likes

I’m newer to Phoenix. When will Phoenix consider upgrading Tailwind v4 as a default?

1 Like

They’re working on it.

1 Like

Amazing!

1 Like