Tailwind CSS Blog

Tailwind CSS v4.3: Scrollbars, new colors, and more

Adam Wathan, Robin Malfait — Fri, 08 May 2026 20:00:00 GMT

Tailwind CSS v4.3 is here, and because apparently shipping v4.2 was easier than remembering to blog about it, this post is secretly about two releases worth of new stuff.

Here's what landed in v4.2:

New mauve, olive, mist, and taupe palettes — four more neutral-ish palettes for when gray, zinc, neutral, stone, and slate have somehow failed you.
First-class webpack plugin — for a huge performance boost in frameworks like Next.js.
More logical property utilities — including pbs-*, mbs-*, inline-*, block-*, and new logical inset utilities.
New font-features-* utility — control low-level OpenType features without writing custom CSS every time.

…and here's what's new in v4.3:

New scrollbar utilities — style scrollbars without wondering which half-supported browser API you're supposed to use this week.
New @container-size utility — create size containers for when your container queries need to care about height too.
New zoom-* utilities — use the CSS zoom property directly in your markup, now that every browser has finally agreed it exists.
New tab-* utilities — control the rendered width of tab characters, just please don't make it eight like GitHub used to.
Stacked + compound @variant support — use stacked and compound variants directly in CSS.
Default values for functional utilities — define utilities that work with or without a value.

A lot of the v4.2 improvements, including the new logical property utilities and font-features-* support, came out of collaborations with teams at Netflix and Vercel through our Partners Program. If there are framework improvements like this that would make Tailwind CSS work better for your team, we'd love to help.

Upgrade your projects by installing the latest version of tailwindcss from npm:

Using the Tailwind CLI

npm install tailwindcss@latest @tailwindcss/cli@latest

Using Vite

npm install tailwindcss@latest @tailwindcss/vite@latest

Using PostCSS

npm install tailwindcss@latest @tailwindcss/postcss@latest

Using webpack

npm install tailwindcss@latest @tailwindcss/webpack@latest

New `mauve`, `olive`, `mist`, and `taupe` palettes

In v4.2 we added four new color palettes to the default theme: mauve, olive, mist, and taupe.

These originally came out of Oatmeal, the multi-theme marketing site kit we released for Tailwind Plus back in December, where we needed a few more neutral-ish palettes that still felt distinct from the grays we already ship.

They're all in that useful neutral-adjacent category where you want something that still behaves like gray, but has a little more personality:

100

200

300

400

500

600

700

800

900

950

mauve

olive

mist

taupe

They're a nice substitute for the existing gray palettes when you want the whole design to lean a little warmer, cooler, greener, or… mauver?

<div class="bg-mauve-950 text-mauve-100 ...">Mauve</div><div class="bg-olive-100 text-olive-950 ...">Olive</div><div class="border border-mist-200 shadow-taupe-950/10 ...">Mist and taupe</div>

Check out the colors documentation for a pretty grid of all the available colors.

First-class webpack plugin

Tailwind CSS v4.2 added a dedicated @tailwindcss/webpack loader for integrating Tailwind CSS in webpack projects.

Before this, webpack projects usually ran Tailwind through postcss-loader and @tailwindcss/postcss, which works, but means CSS has to take a little detour through PostCSS just so Tailwind can get its hands on a string it already knows how to compile.

The dedicated loader skips that extra work, and we've seen it make Tailwind over 2x faster in large, complicated webpack projects. For example, here's what we saw testing against the tailwindcss.com docs with Next.js and Turbopack:

Package	Build time
@tailwindcss/postcss	932ms
@tailwindcss/webpack	429ms
	2.17x faster

Using it is the same sort of setup you're used to from other webpack loaders:

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {  plugins: [new MiniCssExtractPlugin()],  module: {    rules: [      {        test: /\.css$/i,        use: [MiniCssExtractPlugin.loader, "css-loader", "@tailwindcss/webpack"],      },    ],  },};

Because Turbopack supports webpack loaders through its compatibility layer, these improvements carry over there too, which is a big deal for frameworks like Next.js where Turbopack is becoming the default.

Check out the @tailwindcss/webpack README for more details.

More logical property utilities

Tailwind CSS v4.2 added a whole bunch of new logical property utilities, making it easier to build layouts that adapt correctly across different writing modes and directions.

For spacing, there are new block-start and block-end utilities for padding, margin, scroll padding, scroll margin, and borders:

<div class="mbs-6 mbe-2 pbs-4 pbe-8 ...">  <!-- ... --></div>

<div class="scroll-mbs-4 scroll-mbe-4 scroll-pbs-12 scroll-pbe-12 ...">  <!-- ... --></div>

<div class="border-bs border-be-2 ...">  <!-- ... --></div>

We've also added logical sizing utilities for inline-size and block-size, along with min and max variants:

<div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0 ...">  <!-- ... --></div>

And we've added logical inset utilities for positioning elements:

<div class="absolute inset-s-0 inset-e-4 inset-bs-2 inset-be-8 ...">  <!-- ... --></div>

The existing start-* and end-* utilities are still available, but they're now deprecated in favor of inset-s-* and inset-e-* so the whole API lines up with inset-bs-* and inset-be-*.

Check out the padding, margin, scroll-padding, scroll-margin, border-width, inline-size, block-size, and top / right / bottom / left docs for more details.

New `font-features-*` utility

We've also added font-features-* utilities for controlling font-feature-settings:

normal

100.00

218.40

864.12

font-features-["tnum"]

100.00

218.40

864.12

<div class='font-features-["tnum"] ...'>  <!-- ... --></div>

For common cases like tabular numbers, you should still reach for higher-level utilities like tabular-nums first, because nobody should have to remember that "tnum" is a thing.

But when you need to enable a font-specific stylistic set or some other OpenType feature we don't have a dedicated utility for, font-features-* gives you a clean escape hatch.

Check out the font-feature-settings docs for more details.

New scrollbar utilities

Tailwind CSS v4.3 adds first-party utilities for the CSS scrollbar APIs, so you can finally do the boring-but-useful scrollbar stuff without opening a second tab and remembering which browser supports what.

Use scrollbar-auto, scrollbar-thin, and scrollbar-none to control scrollbar-width:

Scroll vertically

The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star maps, expedition notes, and brass instruments cataloged by hand.

On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows and settles on the reading tables.

Visitors can request anything from the collection, but most come for the atlases that chart coastlines no longer found on modern maps.

Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next researcher.

<div class="scrollbar-thin scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">  <!-- ... --></div>

You can also control scrollbar colors using scrollbar-thumb-* and scrollbar-track-* utilities:

<div class="scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">  <!-- ... --></div>

They work with the usual color opacity modifiers too:

<div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">  <!-- ... --></div>

And for preventing layout shift when scrollbars appear, we've added scrollbar-gutter-auto, scrollbar-gutter-stable, and scrollbar-gutter-both:

scrollbar-gutter-auto

Hey everyone! It's almost 2027 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

scrollbar-gutter-stable

Hey everyone! It's almost 2027 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

<div class="scrollbar-gutter-stable overflow-auto ...">  <!-- ... --></div>

Check out the scrollbar-width, scrollbar-color, and scrollbar-gutter docs for more details.

New `@container-size` utility

In Tailwind CSS v4.0 we added first-party container query support with the @container utility, which creates an inline-size container.

That's what you want most of the time, but container query length units like cqb and cqh depend on the block size of the container, and inline-size containers don't expose that information.

So in v4.3 we've added @container-size, which creates a size container instead:

<div class="@container-size">  <div class="h-[50cqb]">    <!-- ... -->  </div></div>

You can name size containers too using @container-size/{name}, just like @container/{name}.

Check out the responsive design docs for more details.

New `zoom-*` utilities

Tailwind CSS v4.3 adds zoom-* utilities for the CSS zoom property, one of those ancient browser features that was supported in Chrome 1 back in 2008, but only became fully supported across all major browsers in 2024 after taking the scenic route through a few long-standing SVG bugs:

<div class="zoom-75 ...">Zoomed out</div><div class="zoom-100 ...">Normal</div><div class="zoom-125 ...">Zoomed in</div>

You can also use arbitrary values and CSS variables:

<div class="zoom-[1.1] ...">Zoomed in a little</div><div class="zoom-(--preview-zoom) ...">Zoomed using a variable</div>

Check out the zoom docs for more details.

New `tab-*` utilities

We've also added tab-* utilities for controlling the rendered width of tab characters using tab-size.

This is mostly useful for code examples, editors, and any other UI where you're rendering preformatted text that might contain real tab characters:

tab-2

function indent() {return 'tabbed';}

tab-8

function indent() {return 'tabbed';}

<pre class="tab-2 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre><pre class="tab-8 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre>

Arbitrary values and CSS variables work here too:

<pre class="tab-[12px] ...">...</pre><pre class="tab-(--tab-size) ...">...</pre>

Check out the tab-size docs for more details.

Stacked + compound `@variant` support

Tailwind CSS v4.3 makes @variant more flexible when you're using variants in CSS instead of directly in your markup.

You can now use stacked variants:

CSS

.button {  background: var(--color-sky-500);  @variant hover:focus {    background: var(--color-sky-600);  }}

Compiled CSS

.button {  background: var(--color-sky-500);  &:hover {    @media (hover: hover) {      &:focus {        background: var(--color-sky-600);      }    }  }}

And you can use compound variants to share the same block of CSS across multiple variants:

CSS

.button {  background: var(--color-sky-500);  @variant hover, focus {    background: var(--color-sky-600);  }}

Compiled CSS

.button {  background: var(--color-sky-500);  &:hover {    @media (hover: hover) {      background: var(--color-sky-600);    }  }  &:focus {    background: var(--color-sky-600);  }}

You're usually better off creating a real component and styling it with Tailwind CSS classes directly, but when CSS is the right tool, this makes @variant a lot nicer to work with.

Check out the @variant docs for more details.

Default values for functional utilities

Tailwind CSS v4.0 introduced functional @utility definitions, where you can use --value(…) and --modifier(…) to define utilities that accept theme values, bare values, arbitrary values, and modifiers.

In v4.3, you can now pass --default(…) to --value(…) and --modifier(…) when a utility should work with or without a value:

CSS

@utility tab-* {  tab-size: --value(integer, --default(4));}

Now the bare tab utility can fall back to 4, while tab-2 still resolves to 2:

HTML

<pre class="tab ...">...</pre><pre class="tab-2 ...">...</pre>

Generated CSS

.tab {  tab-size: 4;}.tab-2 {  tab-size: 2;}

That makes it easier to define APIs where the bare utility does the obvious thing, while still supporting explicit values for the same utility family.

It's a small thing, but it lets plugin authors and anyone writing custom utilities create APIs that feel a lot more like the ones we ship in the framework itself.

So that's Tailwind CSS v4.2 and v4.3!

Update to the latest version using npm and start playing with it today:

Using the Tailwind CLI

npm install tailwindcss@latest @tailwindcss/cli@latest

Using Vite

npm install tailwindcss@latest @tailwindcss/vite@latest

Using PostCSS

npm install tailwindcss@latest @tailwindcss/postcss@latest

Using webpack

npm install tailwindcss@latest @tailwindcss/webpack@latest

Try the new stuff and let us know what you run into. Just remember a tab size over 4 is a crime and may result in the suspension of your software engineering license.

Vanilla JavaScript support for Tailwind Plus

Philipp Spiess, Adam Wathan — Fri, 25 Jul 2025 14:30:00 GMT

There are a lot of UI blocks in Tailwind Plus that need JavaScript to really be useful, like dialogs, dropdowns, command palettes, and more. And unless you're a React or Vue user, using those UI blocks has always meant writing all of that tricky JavaScript yourself.

Well today that finally changes — every UI block in Tailwind Plus is now fully functional, accessible, and interactive, including the plain HTML examples.

Now you can use any dropdown, command palette, dialog, drawer, and more in any project you're working on — no JavaScript framework required.

No framework required

To pull this off, we built @tailwindplus/elements — a library we're releasing exclusively for Tailwind Plus customers.

Elements is a collection of headless custom elements that wrap up all of the complex behavior needed to build custom interactive UIs using just HTML, and can be styled any way you like using utility classes or custom CSS.

Instead of being coupled to a specific JavaScript framework, these custom elements work anywhere you can use a <script> tag:

index.html

<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>

Here's what it look like to build a custom dropdown menu with Elements:

<el-dropdown class="relative inline-block text-left">  <button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50">    Options    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="-mr-1 size-5 text-gray-400">      <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />    </svg>  </button>  <el-menu anchor="bottom end" popover class="w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in">    <div class="py-1">      <a href="#" class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">Account settings</a>      <a href="#" class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">Support</a>      <a href="#" class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">License</a>      <form action="#" method="POST">        <button type="submit" class="block w-full px-4 py-2 text-left text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">Sign out</button>      </form>    </div>  </el-menu></el-dropdown>

And here's what it looks like to build a custom select:

<label for="select" class="block text-sm/6 font-medium text-gray-900">Assigned to</label><el-select id="select" name="selected" value="4" class="mt-2 block">  <button type="button" class="grid w-full cursor-default grid-cols-1 ...">    <el-selectedcontent></el-selectedcontent>    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="col-start-1 row-start-1 ...">      <!-- ... -->    </svg>  </button>  <el-options anchor="bottom start" popover class="max-h-60 w-(--button-width) [--anchor-gap:--spacing(1)] ...">    <el-option value="1" class="group/option relative block focus:bg-indigo-600 ...">      <div class="flex items-center">        <span aria-hidden="true" class="inline-block size-2 shrink-0 ..."></span>        <span class="ml-3 block group-aria-selected/option:font-semibold ...">          Wade Cooper          <span class="sr-only"> is online</span>        </span>      </div>      <span class="group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden ...">        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5">            <!-- ... -->        </svg>      </span>    </el-option>    <!-- ... -->  </el-options></el-select>

See those custom HTML elements like <el-select> and <el-options>? Those are the secret sauce that make everything work, including automatic ARIA attribute management, focus handling, keyboard support, and more.

You can even build something as sophisticated as a custom command palette with Elements, without having to write any of your own JavaScript:

<button command="show-modal" commandfor="dialog" class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90">  Open command palette</button><el-dialog>  <dialog id="dialog" class="backdrop:bg-transparent">    <el-dialog-backdrop class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></div>    <div tabindex="0" class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20">      <el-dialog-panel class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in">        <el-command-palette class="divide-y divide-gray-100">          <div class="grid grid-cols-1">            <input type="text" autofocus placeholder="Search..." class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm" />            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400">              <path d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" fill-rule="evenodd" />            </svg>          </div>          <div class="flex transform-gpu divide-x divide-gray-100">            <div class="max-h-96 min-w-0 flex-auto scroll-py-4 overflow-y-auto px-6 py-4">              <el-command-list class="-mx-2 block text-sm text-gray-700">                <el-defaults>                  <h2 class="mx-2 mt-2 mb-4 text-xs font-semibold text-gray-500">Recent searches</h2>                  <div class="text-sm text-gray-700">                    <a id="person-suggestion-6" href="#" class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900">                      <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-6 flex-none rounded-full" />                      <span class="ml-3 flex-auto truncate">Tom Cook</span>                      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block">                        <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />                      </svg>                    </a>                   <!-- ... -->                  </div>                </el-defaults>                <el-command-group hidden class="sm:h-96">                  <a id="person-1" href="#" hidden class="group flex cursor-default items-center rounded-md p-2 select-none focus:outline-hidden aria-selected:bg-gray-100 aria-selected:text-gray-900">                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-6 flex-none rounded-full" />                    <span class="ml-3 flex-auto truncate">Leslie Alexander</span>                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block">                      <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />                    </svg>                  </a>                  <!-- ... -->                </el-command-group>              </el-command-list>              <el-no-results hidden class="block px-6 py-14 text-center text-sm sm:px-14">                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" class="mx-auto size-6 text-gray-400">                  <path d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" stroke-linecap="round" stroke-linejoin="round" />                </svg>                <p class="mt-4 font-semibold text-gray-900">No people found</p>                <p class="mt-2 text-gray-500">We couldn't find anything with that term. Please try again.</p>              </el-no-results>            </div>            <el-command-preview for="person-1" hidden class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto sm:flex">              <div class="flex-none p-6 text-center">                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="mx-auto size-16 rounded-full" />                <h2 class="mt-3 font-semibold text-gray-900">Leslie Alexander</h2>                <p class="text-sm/6 text-gray-500">Co-Founder / CEO</p>              </div>              <div class="flex flex-auto flex-col justify-between p-6">                <dl class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm text-gray-700">                  <dt class="col-end-1 font-semibold text-gray-900">Phone</dt>                  <dd>1-493-747-9031</dd>                  <dt class="col-end-1 font-semibold text-gray-900">URL</dt>                  <dd class="truncate"><a href="https://example.com" class="text-indigo-600 underline">https://example.com</a></dd>                  <dt class="col-end-1 font-semibold text-gray-900">Email</dt>                  <dd class="truncate"><a href="mailto:lesliealexander@example.com" class="text-indigo-600 underline">lesliealexander@example.com</a></dd>                </dl>                <button type="button" class="mt-6 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Send message</button>              </div>            </el-command-preview>            <!-- ... -->          </div>        </el-command-palette>      </el-dialog-panel>    </div>  </dialog></el-dialog>

To support all of the UI blocks in Tailwind Plus, we're shipping the following primitives in this first release of Elements:

Autocomplete — for building things like custom Comboboxes.
Command palette — for building custom Command Palettes.
Dialog — for building custom Modal Dialogs, Drawers, and more.
Disclosure — for building collapsible FAQs, mobile menus in Navbars, and more.
Dropdown menu — for building custom Dropdowns, of course.
Popover — for building custom Flyout Menus and more.
Select — for building custom Select Menus.
Tabs — for building custom tabs, like we use in custom Textareas and Product Overviews.

If you're a Tailwind Plus customer, head over to the brand new Elements documentation to learn more about how everything works and check out some examples.

Leveraging the modern web

We leaned on a lot of modern platform features to keep Elements as light and native as a possible.

Custom elements as a cross-platform component abstraction.
The popover attribute to manage overlays and popovers with automatic top-layer rendering together with beforetoggle to control transitions.
Native <dialog> elements for focus trapping and top-layer rendering.
Invoker commands to declaratively manage interactive elements, like toggling a custom disclosure.
ElementInternals to make our custom form controls work like native form controls.

We also bundle any necessary polyfills for these features to make sure that Elements works in all of the same browsers supported by Tailwind CSS v4.0. This means Elements will only get smaller as these modern platform features become more widely available.

Components that work everywhere

Since HTML is the lowest common denominator between all web frameworks, Elements makes it possible for all of HTML-only UI blocks in Tailwind Plus to work literally anywhere.

Here's one of our Combobox examples wired up with two-way binding in Svelte:

Combobox.svelte

<script>  let input = $state("");  function handleSubmit() {    alert(`Selected: ${input}`);  }</script><form onsubmit={handleSubmit}>  <label for="autocomplete" class="block text-sm/6 font-medium text-gray-900">Assigned to</label>  <el-autocomplete class="relative mt-2 block">    <input bind:value={input} id="autocomplete" type="text" class="block w-full rounded-md ..." />    <button type="button" class="absolute inset-y-0 right-0 flex ...">      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 text-gray-400">        <path d="M5.22 8.22a.75.75 ..." clip-rule="evenodd" fill-rule="evenodd" />      </svg>    </button>    <el-options anchor="bottom end" popover class="max-h-60 w-(--input-width) [--anchor-gap:--spacing(1)] ...">      <el-option value="Leslie Alexander" class="block truncate aria-selected:bg-indigo-600 aria-selected:text-white ...">Leslie Alexander</el-option>    </el-options>  </el-autocomplete>  <button type="submit">Submit</button></form>

Or here's a custom select in Rails that's included in form submissions, just like a native form control:

app/controllers/orders_controller.rb

class OrdersController < ApplicationController  def new    @cars = Car.all    @selected_car = @cars.first  end  def create    car = Car.find(params[:car_id])    flash[:notice] = "Selected car: #{car.name}"    redirect_to root_path  endend

app/views/orders/new.html.erb

<%= form_with do |form| %>  <%= form.label :car_id, "Select model:" %>  <el-select name="car_id" id="car_id" value="<%= @selected_car.id %>">    <button type="button" class="grid w-full cursor-default grid-cols-1 ...">      <el-selectedcontent class="col-start-1 row-start-1 truncate pr-6">        <%= @selected_car.name %>      </el-selectedcontent>      <svg viewBox="0 0 16 16" aria-hidden="true" class="col-start-1 row-start-1 size-5 ...">        <path d="M5.22 10.22a.75.75 ..." clip-rule="evenodd" fill-rule="evenodd" />      </svg>    </button>    <el-options anchor="bottom end" popover="">      <% @cars.each do |car| %>        <el-option value="<%= car.id %>">          <span class="block truncate font-normal group-aria-selected/option:font-semibold">            <%= car.name %>          </span>          <span class="flex group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden ...">            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5">              <path d="M16.704 4.153a.75.75 0 ..." clip-rule="evenodd" fill-rule="evenodd" />            </svg>          </span>        </el-option>      <% end %>    </el-options>  </el-select>  <%= form.submit "Place order" %><% end %>

You can even use Elements in React instead of using a React-only library like Headless UI or React Aria if you want:

import Link from "next/link";export function Menu() {  return (    <el-dropdown className="relative inline-block text-left">      <button className="inline-flex w-full justify-center ...">        Menu        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="-mr-1 size-5 text-gray-400">          <path d="M5.22 8.22a.75.75 ..." clip-rule="evenodd" fill-rule="evenodd" />        </svg>      </button>      <el-menu anchor="bottom end" popover className="transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 ...">        <div className="py-1">          <Link href="/" className="block px-4 py-2 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden ...">Home</Link>          <Link href="/about" className="block px-4 py-2 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden ...">About</Link>          <Link href="/faq" className="block px-4 py-2 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden ...">FAQ</Link>        </div>      </el-menu>    </el-dropdown>  );}

Try it out today

All of the updated UI blocks and the new Elements library are available now to all Tailwind Plus customers.

Check out UI block categories like Dropdowns and Command Palettes to play with these updated interactive examples yourself, and explore the new Elements documentation to learn how it all works and how to customize things for your projects.

We can't wait to see what you'll build with this stuff!

Compass: A starter kit for online courses

Adam Wathan — Wed, 14 May 2025 19:00:00 GMT

I've been itching to get back into screencasting and teaching lately, so a couple of months ago I put together this free Build UIs that don't suck mini-course. People seemed to like it and now I want to do some bigger video projects, but there was a problem.

I am a software developer.

And as a software developer, much like I need to write my own static site generator before I can build my own personal website, I needed to build my own course platform before I could even think about putting together a video course.

Well fast-forward six weeks later and we just released Compass, a starter kit we designed with Tailwind CSS and Next.js for publishing your own online course.

Check out the live preview as always for the full experience.

We had a lot of fun working on this one, and got to play with a bunch of new tools and technologies and solve some interesting problems.

Picture-in-picture video

You might not have seen it before but most modern browsers have native Picture-in-Picture support. These APIs let you take a video and pop it out into a separate window that the user can move around and resize while still browsing the site.

We had this idea for Compass where if you started to play a course video and scrolled down the page, the video would move to the bottom right of the screen so you could still watch it while reading the page content.

We were hoping to use the Picture-in-Picture APIs for this, but it turns out you can't passively trigger them on scroll (for privacy/security reasons I guess?) — the user has to actually click something, similar to the clipboard APIs.

We ended up rolling our own simple thing instead, using IntersectionObserver, video events, and a bit of state to detect when the video was playing and offscreen, and added data attributes to the <video> element to so we could target them with utility classes:

video-player.tsx

<video  data-offscreen={isOffscreen ? "" : undefined}  data-playing={isPlaying ? "" : undefined}  className="data-offscreen:data-playing:fixed data-offscreen:data-playing:right-4 data-offscreen:data-playing:bottom-4"/>

I love using data attributes for this sort of thing, find the code reads a lot more like standard Tailwind stuff compared to a bunch of ternaries and conditional logic in JavaScript.

Parsing VTT files into transcripts

There's a section in Compass for interviews, which each include a video at the top of the page but also a pretty custom transcript UI below:

At first we weren't totally sure how we should approach this. Our first idea was to just write some React components for these pieces and throw the content directly into an MDX file, but it felt sort of unrealistic to expect anyone to ever author their transcripts in this totally custom format.

Then I had the idea to use a standard caption file format, like SRT. The problem was that for our needs, we needed to encode the current speaker (Tom or Annie in the screenshot above), and SRT has no standardized way of encoding that information in the file.

I did some more research and eventually landed on WebVTT, which is similar to SRT but does support speaker information, and is conveniently designed for the web.

annie-king.vtt

WEBVTT00:00.000 --> 00:20.000<v Tom Harris>Hello fellow passengers, welcome to the Compass podcast. Today, we have a special guest, Annie King. She's the author of The Inevitable You: How to Embrace Your Path and Succeed with Relentless Precision. Annie, welcome to the show.00:20.000 --> 00:35.000<v Annie King>Thank you! I'm so happy to be here. And thanks for sending me the questions in advance — I'm really excited to share some of the ideas from the book with your viewers. I think we're going to have a lot of fun unpacking what it means to truly embrace your path.00:35.000 --> 00:45.000<v Tom Harris>Absolutely! I want to get into your book, but first I have to ask — what was it like growing up in a household that treated organization almost like...a sport?

So we wired things up to parse the transcript data from a .vtt file, and then map over that data to render it as a custom UI with React:

src/interview/[slug]/page.tsx

<div>  {transcript.map(({ start, speaker, text }) => (    <div key={start} className="col-span-2 grid grid-cols-subgrid items-baseline">      <TimestampButton start={start} videoId="video" className="justify-self-end" />      <div>        <p className="text-sm/7 font-semibold text-gray-950 dark:text-white">{speaker}</p>        {text.map((p, index) => (          <p key={index} className="mt-2 text-sm/7 whitespace-pre-wrap text-gray-700 dark:text-gray-400">            {p}          </p>        ))}      </div>    </div>  ))}</div>

Turned out pretty cool — I can imagine someone just generating a transcript in VTT format using AI, throwing it into the project and it'll automatically be rendered in a nice custom UI.

Extending Markdown images for dark mode and layout shift

The example content we came up with for Compass includes a lot of diagrams that we wanted to adapt between light and dark mode.

You can do this sort of thing a ton of different ways (the <picture> tag supports it natively for example), but we really wanted to keep the content files feeling as much like vanilla Markdown as possible.

So we came up with this idea of a {scheme} placeholder in the image URL that we replace with light or dark dynamically, loading the correct image based on the user's color scheme:

## The Myth of Free Will![Neurological Proof](/img/neuro-proof.{scheme}.png)Your brain makes decisions before you are even aware of them.

Now the underlying image component will automatically render neuro-proof.light.png or neuro-proof.dark.png depending on the current color scheme. And if you just want to use the same image in both, just don't include {scheme} in the URL at all.

We also wanted to avoid layout shift in the content, which you can do pretty easily these days by ensuring you give your images width and height attributes so the browser can compute the aspect ratio and reserve space for the image when it loads.

There's no standard way to express this in Markdown's image syntax, but after a bit of research we discovered some precedent in Obsidian.

Obsidian tacks the image dimensions on to the alt text, like this:

## The Myth of Free Will![Neurological Proof|2000x990](/img/neuro-proof.{scheme}.png)Your brain makes decisions before you are even aware of them.

So we used a custom MDX component to pull out the dimensions using the same format, and add those to the image to make sure there's no layout shift as the content loads.

So there you go — that's Compass! As always it's a free update for anyone with a Tailwind Plus license, so go and download the codebase, poke around, and have fun with it.

If you don't already have a Tailwind Plus license, think about getting one! Picking one up is the best way to support our work on Tailwind CSS and there's a ton of useful stuff in there.

Looking forward to using this template for some upcoming projects myself in the next couple of months!

Tailwind CSS v4.1: Text shadows, masks, and tons more

Adam Wathan, Dan Hollick — Thu, 03 Apr 2025 20:00:00 GMT

I wasn't sure it would ever happen but we did it — we released a version of Tailwind CSS that includes text-shadow utilities.

Tailwind CSS v4.1 is here and it's packed with new utilities, variants, and developer experience improvements that will help you (or your LLM, you coward) build even better interactive experiences.

Here's all the best stuff we got into this release:

New text-shadow-* utilities — only about twenty years after they were first supported by a browser.
Mask elements with the mask-* utilities — use images and gradients to mask elements with new ergonomic APIs.
Improved compatibility with older browsers — we've made things degrade way more gracefully for older browsers, while still taking advantage of modern features in browsers that support them.
Fine-grained text wrapping with overflow-wrap — defend the integrity of your layouts from even the longest German words your users will throw at you.
Colored drop-shadow support — can't really remember why we didn't have these before but we do now.
Target input devices with pointer-* and any-pointer-* — tweak your design for touch devices explicitly instead of relying on viewport size.
Align items to the last baseline — align flex or grid items to the baseline of the last line of text using the new items-baseline-last and self-baseline-last utilities.
Keep content visible with safe alignment — center content in flex and grid layouts without it disappearing when there's not enough space.
Ignore specific paths with @source not — explicitly ignore irrelevant large directories and speed up your builds even more.
Safelist specific utilities with @source inline(…) — force Tailwind to include classes that aren't in your source files.
A bunch of other new variants — including noscript, user-valid, inverted-colors, and more.

That's all the cool stuff, but there's a few other little things hiding in the release notes that you might want to check out too.

Upgrade your projects by installing the latest version of tailwindcss from npm:

Using the Tailwind CLI

npm install tailwindcss@latest @tailwindcss/cli@latest

Using Vite

npm install tailwindcss@latest @tailwindcss/vite@latest

Using PostCSS

npm install tailwindcss@latest @tailwindcss/postcss@latest

New `text-shadow-*` utilities

We've been threatening to add text shadows for at least the last six years and today they are finally here.

We've added five text shadows to the default theme, from text-shadow-2xs to text-shadow-lg. They are particularly useful for making headings stand out against a busy background:

The quick brown fox jumps over the lazy dog.

<p class="text-shadow-2xs ...">The quick brown fox...</p><p class="text-shadow-xs ...">The quick brown fox...</p><p class="text-shadow-sm ...">The quick brown fox...</p><p class="text-shadow-md ...">The quick brown fox...</p><p class="text-shadow-lg ...">The quick brown fox...</p>

You can change the color of the shadow using the text-shadow-<color> utilities. For instance, you can create a sort of embossed effect by using a small white shadow on dark text:

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button><button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>

If you just want to adjust the opacity of a text shadow without changing the color, you can slap an opacity modifier directly on text shadow size utilities like text-shadow-lg.

For example, text-shadow-lg/50 is the same as setting text-shadow-lg and text-shadow-black/50 at the same time:

The quick brown fox jumps over the lazy dog.

<p class="text-shadow-lg ...">The quick brown fox...</p><p class="text-shadow-lg/20 ...">The quick brown fox...</p><p class="text-shadow-lg/30 ...">The quick brown fox...</p>

Check out the text-shadow docs for more details.

Mask elements with the `mask-*` utilities

One of the coolest features of modern CSS is the ability to use images and gradients as masks - basically using the opacity of an image to hide certain parts of an element:

Speed

Built for power users

Work faster than ever with our keyboard shortcuts

<div class="mx-auto flex items-center p-16 max-sm:p-8">  <img    src="/img/keyboard.png"    class="mask-radial-from-transparent mask-radial-from-15% mask-radial-to-black mask-radial-to-55% mask-radial-at-right ..."  />  <div class="font-medium">    <p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">      Work faster than ever with our keyboard shortcuts    </p>  </div></div>

Because you can use any background-image as a mask, the logical thing to do was to copy the bg-* utilities so they share the same API. The problem with that approach is you often want to combine multiple masks together and the bg-* utilities are not composable.

So instead, we created a new set of utilities to work with mask-image that are composable and purpose-built for the masking use case. For example, you can use utilities like mask-b-from-<value> and mask-t-to-<value> to add a linear gradient mask to a single side of an element:

mask-t-from-50%

mask-r-from-30%

mask-l-from-50% mask-l-to-90%

mask-b-from-20% mask-b-to-80%

<div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

It's more natural to think about which side you want to mask, rather than trying to work out the exact gradient you need to use.

The gradient mask utilities are also composable, so you can combine radial, conic and linear gradients together to create more complex masks:

<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>

Masking is a super powerful technique and there's a lot more to the API than we can cover here. For a full breakdown of the new utilities, check out the documentation.

Improved compatibility with older browsers

We went all-in on modern platform features with Tailwind CSS v4.0 to make the best framework we could, and give this version the longest shelf-life possible.

Unfortunately some of those features degrade really poorly in older browsers, to the point where even basic things like colors and shadows might not render at all for someone visiting from an old iPhone or iPad that's stuck on Safari 15.

For Tailwind CSS v4.1, we put a bunch of effort into coming up with and testing our own framework-specific fallbacks to make your sites render as best as possible in older browsers, even if some super modern things still don't behave quite the same.

Here's a list of the things we've managed to improve in this release:

Colors defined in oklab now render in older versions of Safari
Features that depend on custom properties defined with @property (like shadows, transforms, gradients and more) now work in older versions of Safari and Firefox
Colors using the opacity modifier now render with inlined fallbacks in older browsers
Gradients using explicit interpolation methods fall back to the browser default when not supported

Tailwind CSS v4 is still designed for modern browsers like Safari 16.4 and up and still depends on a lot of modern features for everything to work perfectly, but at least now your sites will render and be usable in older browsers, even if in certain specific situations the odd shadow color be different.

To learn everything you need to know about browser compatibility in Tailwind CSS v4, you can read the full browser compatibility documentation.

Fine-grained text wrapping with `overflow-wrap`

The new overflow-wrap utilities let you control how text wraps within an element. The wrap-break-word utility is especially useful for long words or URLs that might otherwise break your layout:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<p class="wrap-break-word">The longest word in any of the major...</p>

The one case where this doesn't quite behave like you'd expect is inside a flex container and that's where you probably want to use the new wrap-anywhere utility instead.

It's similar to wrap-break-word, but it allows mid-word line breaks when calculating the intrinsic size of the element, replacing the need to set min-width: 0 on the child element:

wrap-break-word

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

wrap-anywhere

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

<div class="flex max-w-sm">  <img class="size-16 rounded-full" src="/img/profile.jpg" />  <div class="wrap-break-word">    <p class="font-medium">Jay Riemenschneider</p>    <p>jason.riemenschneider@vandelayindustries.com</p>  </div></div><div class="flex max-w-sm">  <img class="size-16 rounded-full" src="/img/profile.jpg" />  <div class="wrap-anywhere">    <p class="font-medium">Jay Riemenschneider</p>    <p>jason.riemenschneider@vandelayindustries.com</p>  </div></div>

There's not much more to it than that, but here's the overflow-wrap documentation if you want to read it again in slightly different words.

Colored `drop-shadow` support

While we were building out text-shadow support we thought we might as well add another feature we never got around to implementing: colored drop shadows.

Now you can use utilities like drop-shadow-indigo-500 and drop-shadow-cyan-500/50 to change the color of a drop shadow:

drop-shadow-cyan-500/50

drop-shadow-sky-500/50

drop-shadow-indigo-500/50

<svg class="fill-cyan-500 drop-shadow-xl drop-shadow-cyan-500/50 ...">...</svg><svg class="fill-blue-500 drop-shadow-xl drop-shadow-blue-500/50 ...">...</svg><svg class="fill-indigo-500 drop-shadow-xl drop-shadow-indigo-500/50 ...">...</svg>

There isn't much more to it but here's the drop-shadow documentation anyway.

Target input devices with `pointer-` and `any-pointer-`

The new pointer-fine and pointer-coarse variants let you style something differently depending on whether the user is using a device with a mouse or using a touchscreen.

Use pointer-fine to target precise pointing devices like mouses and trackpads, and pointer-coarse to target devices lower precision like touchscreens:

Try emulating a touch device in your developer tools to see the changes

<fieldset aria-label="Choose a memory option">  <div class="flex items-center justify-between">    <div>RAM</div>    <a href="#"> See performance specs </a>  </div>  <div class="mt-4 grid grid-cols-6 gap-2 pointer-coarse:mt-6 pointer-coarse:grid-cols-3 pointer-coarse:gap-4">    <label class="p-2 pointer-coarse:p-4 ...">      <input type="radio" name="memory-option" value="4 GB" className="sr-only" />      <span>4 GB</span>    </label>    <!-- ... -->  </div></fieldset>

If you're on your phone, you'll see the pointer-coarse styles applied, which make the touch targets larger and easier to hit. If you're on a desktop, you'll see the pointer-fine styles applied, which make the touch targets smaller and more precise.

The any-pointer-* variants work the same way but instead of just checking the user's primary pointing device, they check if any pointing device matches. So any-pointer-coarse will match on a laptop with a touchscreen for a example, even if the user also has a mouse connected.

Align items to the last baseline

When working with flex or grid layouts, sometimes you need to align something to the baseline of the last line of text rather than the end of the container.

The new items-baseline-last utility does just that:

Spencer Sharp

Working on the future of astronaut recruitment at Space Recruit.

spacerecruit.com

Alex Reed

A multidisciplinary designer.

alex-reed.com

<div class="grid grid-cols-[1fr_auto] items-baseline-last">  <div>    <img src="img/spencer-sharp.jpg" />    <h4>Spencer Sharp</h4>    <p>Working on the future of astronaut recruitment at Space Recruit.</p>  </div>  <p>spacerecruit.com</p></div>

We've also added self-baseline-last for when you need to align just a single item, and not all items in the flex or grid container.

Keep content visible with `safe` alignment

Ever had center aligned content overflow in both directions when the container got too small? Now you don't have to use a container query to switch the alignment at different sizes.

The new safe alignment utilities will change the alignment to start when the container starts to overflow, so it only overflows in one direction.

Resize the container to see the alignment behavior

justify-center

Sales
Marketing
SEO
Analytics
Design
Strategy
Growth
UX/UI

justify-center-safe

Sales
Marketing
SEO
Analytics
Design
Strategy
Growth
UX/UI

justify-center

<ul class="flex justify-center gap-2 ...">  <li>Sales</li>  <li>Marketing</li>  <li>SEO</li>  <!-- ... --></ul>

justify-center-safe

<ul class="flex justify-center-safe gap-2 ...">  <li>Sales</li>  <li>Marketing</li>  <li>SEO</li>  <!-- ... --></ul>

These utilities work with both flexbox and grid layouts, and are available for all alignment properties.

Ignore specific paths with `@source not`

Sometimes you need to specifically exclude some parts of your code base from being scanned by Tailwind. Now you can use @source not to ignore specific paths when scanning for class names:

CSS

@import "tailwindcss";@source not "./src/components/legacy";

This is useful when you have a large number of files in your project, but only want to scan a specific subset of them.

Safelist specific utilities with `@source inline(…)`

If you need to make sure Tailwind generates certain class names that don’t exist in your content files, you can force them to be generated by using @source inline():

CSS

@import "tailwindcss";@source inline("underline");

Generated CSS

.underline {  text-decoration: underline;}

This is the equivalent of the safelist configuration option in previous versions of Tailwind, but now you can use it in your CSS files instead of your config file.

The source input is brace-expanded, so you can generate multiple classes at once. For example, to generate all the red shades with hover variants, you can add a range to the source input:

CSS

@import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

Generated CSS

.bg-red-50 {  background-color: var(--color-red-50);}.bg-red-100 {  background-color: var(--color-red-100);}.bg-red-200 {  background-color: var(--color-red-200);}/* ... */.bg-red-800 {  background-color: var(--color-red-800);}.bg-red-900 {  background-color: var(--color-red-900);}.bg-red-950 {  background-color: var(--color-red-950);}@media (hover: hover) {  .hover\:bg-red-50:hover {    background-color: var(--color-red-50);  }  /* ... */  .hover\:bg-red-950:hover {    background-color: var(--color-red-950);  }}

This will generate shades of red from 100 to 900 in increments of 100, as well as the 50 and 950 shades. It also adds the hover: variant for each of those classes.

You can also use @source inline() with the not modifier to exclude specific classes from being generated:

CSS

@import "tailwindcss";@source not inline("container");

This will specifically prevent the container class from being generated, even if the word container is detected in your source files.

For more details, check out the detecting classes in source files documentation.

A bunch of other new variants

Prettier accordions with `details-content`

While you could always add styles to the children of a <details> element, it's been impossible to style the content container itself.

The new details-content variant targets the content container which is useful for positioning the content container relative to the <summary> element:

Why do they call it Ovaltine?

The mug is round. The jar is round. They should call it Roundtine.

<details class="rounded-lg border border-transparent p-6 details-content:mt-3 details-content:-ml-0.5" open>  <summary class="text-sm leading-6 font-semibold text-gray-900 select-none dark:text-white">    Why do they call it Ovaltine?  </summary>  <div class="border-gray-200 bg-gray-50 py-3 pl-3 dark:border-white/10 dark:bg-gray-800/50 ...">    <p>The mug is round. The jar is round. They should call it Roundtine.</p>  </div></details>

Target `inverted-colors` mode

Use the inverted-colors variant to conditionally add styles when the user has enabled an inverted color scheme in their OS:

<div class="shadow-xl inverted-colors:shadow-none ...">  <!-- ... --></div>

This is useful for things like preventing black shadows being turned white when inverted colors are enabled.

New `noscript` variant

Yes, some people disable JavaScript and now you can tell them your app doesn't work without it. The noscript variant lets you conditionally apply styles when JS is disabled:

<div class="hidden noscript:block">Please enable JavaScript to use this app.</div>

You could already do this with the <noscript> tag but now you can do it with CSS too, which Tailwind lets you write in your HTML, so… yeah.

Better form validation with `user-valid` and `user-invalid`

Ever tried the :invalid pseudo-class only for the page to be full of red invalid states as soon as it loads, before the user has even touched your form?

The new user-valid and user-invalid variants try to solve this problem, by only applying validation-related styling after the user has actually interacted with the controls:

<input required class="border user-valid:border-green-500" /><input required class="border user-invalid:border-red-500" />

So that's it, that's Tailwind CSS v4.1! Update to the latest version using npm and start playing with it today:

Using the Tailwind CLI

npm install tailwindcss@latest @tailwindcss/cli@latest

Using Vite

npm install tailwindcss@latest @tailwindcss/vite@latest

Using PostCSS

npm install tailwindcss@latest @tailwindcss/postcss@latest

Looking forward to seeing what you build with the new features!

Tailwind UI is now Tailwind Plus

Adam Wathan — Tue, 04 Mar 2025 16:00:00 GMT

We just shipped a huge rebrand project, turning what was previously known as Tailwind UI into Tailwind Plus.

Before you jump to any conclusions, here's what's not changing:

No subscription pricing — it's still a one-time purchase with lifetime access, just like it always has been.
No upgrade cost — if you already had a Tailwind UI All-Access license, you've now got a Tailwind Plus license. The price isn't changing for new customers either.
All the same content — you get access to all of the same content, including all of our components, templates, and our Catalyst UI kit.

So why the change? Simply put, there's a lot we want to do for our community that doesn't feel like it fits into the Tailwind UI box.

Here are some of the ideas we've been exploring for Tailwind Plus:

Tailwind Play accounts — so you can save your experiments and find old ideas more easily, and even update existing Plays without losing the original URL.
Custom editor themes — people ask us about the custom syntax themes we use for our stuff all the time, and Tailwind Plus feels like a cool way to make them available to people.
Color palettes — alternatives to the Tailwind CSS default color palette, curated for you by expert designers.
Typography themes — more typography styles like what you get with our typography plugin, but with different stylistic choices.
Building a stronger private community — Tailwind is used by millions of people which is incredible, but also means there's a ton of noise in public channels. We want to build a great community where you can have high-quality conversations about front-end development with other UI engineers and connect directly with the Tailwind CSS team.
Early access to beta documentation — get access to the documentation for unreleased features before it goes public, and help us refine things before they go stable.
Early registration for in-person events — like the Tailwind Connect meetups we've hosted, where you can hang out with the Tailwind team and talk shop with others in the community.

Some of these ideas are further along than others and some of them might not end up being good ideas at all, but I'm really excited to keep exploring them in the coming months.

Of course we're also going to keep investing into more component examples, templates, and Catalyst improvements! We're itching to design a combobox for Catalyst soon for example, and we're also about to start prototyping plain HTML versions of our templates for people who don't use React.

So ultimately Tailwind Plus is the all same high-quality resources you know from Tailwind UI, but with all-new possibilities and potential.

It's a big risk to make a change like this, but it's something I've wanted to do for years and I'm excited to finally pull the trigger and ship it.

So here's to a new era — can't wait to build you some awesome new stuff.

Tailwind CSS v4.0

Adam Wathan — Wed, 22 Jan 2025 22:00:00 GMT

Holy shit it's actually done — we just tagged Tailwind CSS v4.0.

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.

Start using Tailwind CSS v4.0 today by installing it in a new project, or playing with it directly in the browser on Tailwind Play.

For existing projects, we've published a comprehensive upgrade guide and built an automated upgrade tool to get you on the latest version as quickly and painlessly as possible.

New high-performance engine

Tailwind CSS v4.0 is a ground-up rewrite of the framework, taking everything we've learned about the architecture over the years and optimizing it to be as fast as possible.

When benchmarking it on our own projects, we've found full rebuilds to be over 3.5x faster, and incremental builds to be over 8x faster.

Here are the median build times we saw when we benchmarked Tailwind CSS v4.0 against Catalyst:

	v3.4	v4.0	Improvement
Full build	378ms	100ms	3.78x
Incremental rebuild with new CSS	44ms	5ms	8.8x
Incremental rebuild with no new CSS	35ms	192µs	182x

The most impressive improvement is on incremental builds that don't actually need to compile any new CSS — these builds are over 100x faster and complete in microseconds. And the longer you work on a project, the more of these builds you run into because you're just using classes you've already used before, like flex, col-span-2, or font-bold.

Designed for the modern web

The platform has evolved a lot since we released Tailwind CSS v3.0, and v4.0 takes full advantage of many of these improvements.

CSS

@layer theme, base, components, utilities;@layer utilities {  .mx-6 {    margin-inline: calc(var(--spacing) * 6);  }  .bg-blue-500\/50 {    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);  }}@property --tw-gradient-from {  syntax: "<color>";  inherits: false;  initial-value: #0000;}

We're leveraging modern CSS features like:

Native cascade layers — giving us more control than ever over how different style rules interact with each other.
Registered custom properties — making it possible to do things like animate gradients, and significantly improving performance on large pages.
color-mix() — which lets us adjust the opacity of any color value, including CSS variables and currentColor.
Logical properties — simplifying RTL support and reducing the size of your generated CSS.

Many of these features have even simplified Tailwind internally, reducing the surface area for bugs and making the framework easier for us to maintain.

Simplified installation

We've streamlined the setup process a ton in v4.0, reducing the number of steps and removing a lot of boilerplate.

1. Install Tailwind CSS

npm i tailwindcss @tailwindcss/postcss;

2. Add the PostCSS plugin

export default {  plugins: ["@tailwindcss/postcss"],};

3. Import Tailwind in your CSS

@import "tailwindcss";

With the improvements we've made to this process for v4.0, Tailwind feels more light-weight than ever:

Just one-line of CSS — no more @tailwind directives, just add @import "tailwindcss" and start building.
Zero configuration — you can start using the framework without configuring anything, not even the paths to your template files.
No external plugins required — we bundle @import rules for you out of the box, and use Lightning CSS under the hood for vendor prefixing and modern syntax transforms.

Sure you only go through this once per project, but it adds up when you're starting and abandoning a different side-project every weekend.

First-party Vite plugin

If you're a Vite user, you can now integrate Tailwind using @tailwindcss/vite instead of PostCSS:

vite.config.ts

import { defineConfig } from "vite";import tailwindcss from "@tailwindcss/vite";export default defineConfig({  plugins: [    tailwindcss(),  ],});

Tailwind CSS v4.0 is incredibly fast when used as a PostCSS plugin, but you'll get even better performance using the Vite plugin.

Automatic content detection

You know how you always had to configure that annoying content array in Tailwind CSS v3? In v4.0, we came up with a bunch of heuristics for detecting all of that stuff automatically so you don’t have to configure it at all.

For example, we automatically ignore anything in your .gitignore file to avoid scanning dependencies or generated files that aren’t under version control:

.gitignore

/node_modules/coverage/.next//build

We also automatically ignore all binary extensions like images, videos, .zip files, and more.

And if you ever need to explicitly add a source that's excluded by default, you can always add it with the @source directive, right in your CSS file:

CSS

@import "tailwindcss";@source "../node_modules/@my-company/ui-lib";

The @source directive uses the same heuristics under the hood, so it will exclude binary file types for example as well, without you having to specify all of the extensions to scan explicitly.

Learn more about in our new documentation on detecting classes in source files.

Built-in import support

Before v4.0, if you wanted to inline other CSS files using @import you'd have to configure another plugin like postcss-import to handle it for you.

Now we handle this out of the box, so you don't need any other tools:

postcss.config.js

export default {  plugins: [    "postcss-import",    "@tailwindcss/postcss",  ],};

Our import system is purpose-built for Tailwind CSS, so we've also been able to make it even faster by tightly integrating it with our engine.

CSS-first configuration

One of the biggest changes in Tailwind CSS v4.0 is the shift from configuring your project in JavaScript to configuring it in CSS.

Instead of a tailwind.config.js file, you can configure all of your customizations directly in the CSS file where you import Tailwind, giving you one less file to worry about in your project:

CSS

@import "tailwindcss";@theme {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

The new CSS-first configuration lets you do just about everything you could do in your tailwind.config.js file, including configuring your design tokens, defining custom utilities and variants, and more.

To learn more about how it all works, read the new theme variables documentation.

CSS theme variables

Tailwind CSS v4.0 takes all of your design tokens and makes them available as CSS variables by default, so you can reference any value you need at run-time using just CSS.

Using the example @theme from earlier, all of these values will be added to your CSS to as regular custom properties:

Generated CSS

:root {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

This makes it easy to reuse these values as inline styles or pass them to libraries like Motion to animate them.

Dynamic utility values and variants

We've simplified the way many utilities and variants work in v4.0 by effectively allowing them to accept certain types of arbitrary values, without the need for any configuration or dropping down to the arbitrary value syntax.

For example, in Tailwind CSS v4.0 you can create grids of any size out of the box:

HTML

<div class="grid grid-cols-15">  <!-- ... --></div>

You can also target custom boolean data attributes without needing to define them:

HTML

<div data-current class="opacity-75 data-current:opacity-100">  <!-- ... --></div>

Even spacing utilities like px-*, mt-*, w-*, h-*, and more are now dynamically derived from a single spacing scale variable and accept any value out of the box:

Generated CSS

@layer theme {  :root {    --spacing: 0.25rem;  }}@layer utilities {  .mt-8 {    margin-top: calc(var(--spacing) * 8);  }  .w-17 {    width: calc(var(--spacing) * 17);  }  .pr-29 {    padding-right: calc(var(--spacing) * 29);  }}

The upgrade tool we released alongside v4.0 will even simplify most of these utilities for you automatically if it notices you using an arbitrary value that's no longer needed.

Modernized P3 color palette

We've upgraded the entire default color palette from rgb to oklch, taking advantage of the wider gamut to make the colors more vivid in places where we were previously limited by the sRGB color space.

We've tried to keep the balance between all the colors the same as it was in v3, so even though we've refreshed things across the board, it shouldn't feel like a breaking change when upgrading your existing projects.

Container queries

We've brought container query support into core for v4.0, so you don't need the @tailwindcss/container-queries plugin anymore:

HTML

<div class="@container">  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">    <!-- ... -->  </div></div>

We've also added support for max-width container queries using the new @max-* variant:

HTML

<div class="@container">  <div class="grid grid-cols-3 @max-md:grid-cols-1">    <!-- ... -->  </div></div>

Like our regular breakpoint variants, you can also stack @min-* and @max-* variants to define container query ranges:

HTML

<div class="@container">  <div class="flex @min-md:@max-xl:hidden">    <!-- ... -->  </div></div>

Learn more in our all-new container queries documentation.

New 3D transform utilities

We've finally added APIs for doing 3D transforms, like rotate-x-*, rotate-y-*, scale-z-*, translate-z-*, and tons more.

Mar 16, 2020

Michael Foster

Boost your conversion rate

<div class="perspective-distant">  <article class="rotate-x-51 rotate-z-43 transform-3d ...">    <!-- ... -->  </article></div>

Check out the updated transform-style, rotate, perspective, and perspective-origin documentation to get started.

Expanded gradient APIs

We've added a ton of new gradient features in v4.0, so you can pull off even fancier effects without having to write any custom CSS.

Linear gradient angles

Linear gradients now support angles as values, so you can use utilities like bg-linear-45 to create a gradient on a 45 degree angle:

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

You may notice we've renamed bg-gradient-* to bg-linear-* too — you'll see why shortly!

Gradient interpolation modifiers

We've added the ability to control the color interpolation mode for gradients using a modifier, so a class like bg-linear-to-r/srgb interpolates using sRGB, and bg-linear-to-r/oklch interpolates using OKLCH:

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400">...</div><div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">...</div>

Using polar color spaces like OKLCH or HSL can lead to much more vivid gradients when the from-* and to-* colors are far apart on the color wheel. We're using OKLAB by default in v4.0 but you can always interpolate using a different color space by adding one of these modifiers.

Conic and radial gradients

We've added new bg-conic-* and bg-radial-* utilities for creating conic and radial gradients:

<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div><div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

These new utilities work alongside the existing from-*, via-*, and to-* utilities to let you create conic and radial gradients the same way you create linear gradients, and include modifiers for setting the color interpolation method and arbitrary value support for controlling details like the gradient position.

@starting-style support

The new starting variant adds support for the new CSS @starting-style feature, making it possible to transition element properties when an element is first displayed:

<div>  <button popovertarget="my-popover">Check for updates</button>  <div popover id="my-popover" class="transition-discrete starting:open:opacity-0 ...">    <!-- ... -->  </div></div>

With @starting-style, you can finally animate elements as they appear on the page without the need for any JavaScript at all. Browser support probably isn't quite there yet for most teams, but we're getting close!

not-* variant

We've added a new not-* variant which finally adds support for the CSS :not() pseudo-class:

HTML

<div class="not-hover:opacity-75">  <!-- ... --></div>

CSS

.not-hover\:opacity-75:not(*:hover) {  opacity: 75%;}@media not (hover: hover) {  .not-hover\:opacity-75 {    opacity: 75%;  }}

It does double duty and also lets you negate media queries and @supports queries:

HTML

<div class="not-supports-hanging-punctuation:px-4">  <!-- ... --></div>

CSS

.not-supports-hanging-punctuation\:px-4 {  @supports not (hanging-punctuation: var(--tw)) {    padding-inline: calc(var(--spacing) * 4);  }}

Check out the new not-* documentation to learn more.

Even more new utilities and variants

We've added a ton of other new utilities and variants to v4.0 too, including:

New inset-shadow-* and inset-ring-* utilities — making it possible to stack up to four layers of box shadows on a single element.
New field-sizing utilities — for auto-resizing textareas without writing a single line of JavaScript.
New color-scheme utilities — so you can finally get rid of those ugly light scrollbars in dark mode.
New font-stretch utilities — for carefully tweaking variable fonts that support different widths.
New inert variant — for styling non-interactive elements marked with the inert attribute.
New nth-* variants — for doing really clever things you'll eventually regret.
New in-* variant — which is a lot like group-*, but without the need for the group class.
Support for :popover-open — using the existing open variant to also target open popovers.
New descendant variant — for styling all descendant elements, for better or for worse.

Check out the relevant documentation for all of these features to learn more.

And that's it — that's Tailwind CSS v4.0. It's been years of work to get to this point, but we're all extremely proud of this release and we can't wait to see what you build with it.

Check it out, play with it, maybe even break it, and definitely let us know what you think.

Just no bug reports until tomorrow please — let us at least enjoy one celebratory team dinner and maybe relax in the hot tub at this hotel for a bit believing that somehow we really did ship flawless software.

Tailwind CSS v4.0 Beta 1

Adam Wathan — Thu, 21 Nov 2024 18:30:00 GMT

About eight months ago we open-sourced our progress on Tailwind CSS v4.0. Hundreds of hours of fixing bugs, soul-crushing backward compatibility work, and troubleshooting Windows CI failures later, I'm excited to finally tag the first public beta release.

As I talked about when we published the first alpha, Tailwind CSS v4.0 is an all-new engine built for performance, and designed for the modern web.

Built for performance — full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
Unified toolchain — built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
Designed for the modern web — built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.

There's so much more to say, but everything you need to get started is in the new beta documentation we published today:

Get started with Tailwind CSS v4.0 Beta 1 →

Start building and help us bullet-proof this thing for the stable release early in the new year.

Radiant: A beautiful new marketing site template

Dan Hollick — Thu, 12 Sep 2024 10:30:00 GMT

We just wrapped up work on a beautiful new SaaS marketing site template called Radiant, and it's available now as part of Tailwind UI.

It’s built with Next.js, Framer Motion, and Tailwind CSS, with a blog powered by Sanity.

It's been a while since we built a SaaS marketing template like this, and in that time we've learned a lot about what makes a template like this useful and easy to work with. We've tried to incorporate all of those learnings into Radiant.

Check out the live preview as always for the full experience — there are tons of cool details in this one that you have to see in the browser to really appreciate.

Tastefully interactive

It's super easy to overdo animation on a site like this. We've all seen sites where you can't even scroll a few pixels without a bunch of different elements animating in to place. Even worse is how slow things feel when you have to wait for the content to appear before you can read it.

Radiant is loaded with delightful animations, but they are all layered on to existing content and triggered by user interaction so the site still feels fast. In most cases, we went for animations that loop to make elements feel "alive" while you're interacting with them.

We used Framer Motion for almost all of the animations. It's declarative, making it easy to create our own APIs for complex animations that other people can customize without much effort.

It does have some drawbacks to work around though. For example, when you have multiple elements animating independently it's annoying to pass a hover state down to each child. We ended up leveraging Framer's variant propagation to make this work — a hover event triggers a variant change in the parent that propagates down to the children because they share the same variant keys.

bento-card.tsx

export function BentoCard() {  return (    <motion.div      initial="idle"      whileHover="active"      variants={{ idle: {}, active: {} }}      data-dark={dark ? "true" : undefined}    >      /* ... */    </motion.div>  );}

There is no difference between the variants in the parent so it doesn't actually change but the children still get a signal to change variants on hover, even if they are deeply nested.

map.tsx

function Marker({  src,  top,  offset,  delay,}: {  src: string  top: number  offset: number  delay: number}) {  return (    <motion.div      variants={{        idle: { scale: 0, opacity: 0, rotateX: 0, rotate: 0, y: 0 },        active: { y: [-20, 0, 4, 0], scale: [0.75, 1], opacity: [0, 1] },      }}      transition={{ duration: 0.25, delay, ease: 'easeOut' }}      style={{ '--offset': `${offset}px`, top } as React.CSSProperties}      className="absolute left-[calc(50%+var(--offset))] size-[38px] drop-shadow-[0_3px_1px_rgba(0,0,0,.15)]"    >      /* ... */    </motion.div>  )}/* ... */

The logo timeline animation is a bit different, because we wanted the logos to pause in their current position when you stop hovering, rather than return to their original position. This doesn't play very well with Framer's approach of specifying start and end states, so it was actually easier to build this in CSS.

It exploits the fact that you can set a negative animation-delay value to offset the start position of the element. That way all the logos share the same animation keyframes but they can start at different positions and have different durations.

logo-timeline.tsx

function Logo({  label,  src,  className,}: {  label: string  src: string  className: string}) {  return (    <div      className={clsx(        className,        'absolute top-2 grid grid-cols-[1rem,1fr] items-center gap-2 whitespace-nowrap px-3 py-1',        'rounded-full bg-gradient-to-t from-gray-800 from-50% to-gray-700 ring-1 ring-inset ring-white/10',        '[--move-x-from:-100%] [--move-x-to:calc(100%+100cqw)] [animation-iteration-count:infinite] [animation-name:move-x] [animation-play-state:paused] [animation-timing-function:linear] group-hover:[animation-play-state:running]',      )}    >      <img alt="" src={src} className="size-4" />      <span className="text-sm/6 font-medium text-white">{label}</span>    </div>  )}export function LogoTimeline() {  return (    /* ... */    <Row>      <Logo        label="Loom"        src="./logo-timeline/loom.svg"        className="[animation-delay:-26s] [animation-duration:30s]"      />      <Logo        label="Gmail"        src="./logo-timeline/gmail.svg"        className="[animation-delay:-8s] [animation-duration:30s]"      />    </Row>    /* ... */

This approach means we don't need to track the play state in JavaScript, we can just use a group-hover:[animation-play-state:running] class to start the animation when the parent is hovered.

As you've maybe noticed, we're using a bunch of arbitrary properties for individual animation properties in this component, since these utilities don't exist in Tailwind today. This is what's great about building these templates — it helps us find blind spots in Tailwind CSS. Who knows, maybe we'll see these utilities added for v4.0!

Deliberately reusable

The trickiest part of designing a SaaS template like this, is coming up with interactive elements that people can apply to their own product without too much effort. There's nothing worse than buying a template and realizing that it's so specific to the example content that you can't actually use it for your own project.

We came up with some core graphical elements that most SaaS products might have. A map with pins, a logo cluster, a keyboard — things that could be applied to a bunch of different features. Because we wanted them to be easy to repurpose for your own product, we built a lot of them in code and designed nice APIs for them.

The logo cluster, for example, has a simple API that lets you pass in your own logos, tweak their position and hover animation to match.

<Logo src="./logo-cluster/dribbble.svg" left={285} top={20} hover={{ x: 4, y: -5, rotate: 6, delay: 0.3 }} />

The keyboard shortcuts section is another good example. Adding your own shortcuts is as simple as passing an array of key names to the Keyboard component and because each key is a component, you can easily add custom keys or change the layout.

<Keyboard highlighted={["F", "M", "L"]} />

It turns out it's actually quite a lot of work to build a keyboard in code, but at least now you'll never have to find that out for yourself.

Of course, we also left spots for you to drop in screenshots of your own product. Here's what this section looks like customized to suit our friends at SavvyCal, using the same interactive components.

Powered by a CMS

Usually we just use MDX when adding a blog to a template, but this time we thought it would be fun to play with a headless CMS for a chance instead. We decided to give Sanity a go for this one after polling our audience and hearing a lot of good things.

Instead of creating files, making commits, and managing images and stuff by hand, a CMS lets you handle everything from their UI, so even non-developers can easily contribute.

One cool thing about headless CMSes like Sanity is you get your content back in a structured format, so similar to MDX you can map elements to your own custom components to handle all of your typography styles.

<PortableText  value={post.body}  components={{    block: {      normal: ({ children }) => <p className="my-10 text-base/8 first:mt-0 last:mb-0">{children}</p>,      h2: ({ children }) => (        <h2 className="mt-12 mb-10 text-2xl/8 font-medium tracking-tight text-gray-950 first:mt-0 last:mb-0">          {children}        </h2>      ),      h3: ({ children }) => (        <h3 className="mt-12 mb-10 text-xl/8 font-medium tracking-tight text-gray-950 first:mt-0 last:mb-0">          {children}        </h3>      ),      blockquote: ({ children }) => (        <blockquote className="my-10 border-l-2 border-l-gray-300 pl-6 text-base/8 text-gray-950 first:mt-0 last:mb-0">          {children}        </blockquote>      ),    },    types: {      image: ({ value }) => (        <img className="w-full rounded-2xl" src={image(value).width(2000).url()} alt={value.alt || ""} />      ),    },    /* ... */  }}/>

Working with a CMS also means all of your assets like images are hosted for you, and you can control the size, quality, and format of the image on the fly.

<div className="text-sm/5 max-sm:text-gray-700 sm:font-medium">  {dayjs(post.publishedAt).format('dddd, MMMM D, YYYY')}</div>{post.author && (  <div className="mt-2.5 flex items-center gap-3">    {post.author.image && (      <img        className="aspect-square size-6 rounded-full object-cover"        src={image(post.author.image).width(64).height(64).url()}        alt=""      />    )}    <div className="text-sm/5 text-gray-700">      {post.author.name}    </div>  </div>)}

Like you might do with front matter in Markdown, you can also enrich content with custom fields. For example, we added a featured boolean field to the blog post schema so you can highlight some posts in a special section on the blog.

Sanity in particular is a paid product, but they have a pretty generous free tier which is more than enough to play around. And if you wanted to try out a different headless CMS, I think the Sanity integration we've put together here will still serve as a great informative example of how you might approach wiring things up with another tool.

And that's Radiant! Have a look under the hood, kick the tires, and let us know what you think.

Like all of our templates, it's included with a one-time purchase Tailwind UI all-access license, which is the best way to support our work on Tailwind CSS and make it possible for us to keep building awesome stuff for you for years to come.

Headless UI v2.1: Simplified transition API and improved multi-dialog support

Adam Wathan, Jonathan Reinink — Fri, 21 Jun 2024 15:00:00 GMT

We just released Headless UI v2.1 for React, which dramatically simplifies our transition APIs and adds support for rendering multiple dialogs as siblings.

Simplified transition API

We've made transitions way easier in v2.1 by adding a new transition prop to all of the built-in components you might want to transition, and adding data attributes for each transition stage so you can add transition styles by just throwing some classes on the target element:

import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";function Example() {  return (    <Menu>      <MenuButton>My account</MenuButton>      <MenuItems        transition        className={`          transition ease-out          data-[closed]:scale-95 data-[closed]:opacity-0          data-[enter]:duration-200 data-[leave]:duration-300        `}      >        {/* Menu items… */}      </MenuItems>    </Menu>  );}

There are four data attributes you can use to target the different stages of your transitions:

data-closed: The styles the element should transition from when entering and to when leaving.
data-enter: Styles to apply while the element is entering, like a duration or easing curve.
data-leave: Styles to apply while the element is leaving, like a duration or easing curve.
data-transition: Styles to apply while the element is entering or leaving, useful for sharing values between both stages.

You can even stack these attributes to use different closed styles for entering and leaving. For example this dialog slides in from the left, but slides out to the right:

import { Dialog } from "@headlessui/react";import { useState } from "react";function Example() {  let [isOpen, setIsOpen] = useState(false);  return (    <>      <button onClick={() => setIsOpen(true)}>Open dialog</button>      <Dialog        open={isOpen}        onClose={() => setIsOpen(false)}        transition        className={`          transition duration-300 ease-out          data-[closed]:opacity-0          data-[closed]:data-[enter]:-translate-x-8          data-[closed]:data-[leave]:translate-x-8        `}      >        {/* Dialog content… */}      </Dialog>    </>  );}

And for transitioning regular HTML elements or other components, you can still use the <Transition> component but with the new data attribute APIs:

import { Transition } from "@headlessui/react";import { useState } from "react";function Example() {  const [isShowing, setIsShowing] = useState(false);  return (    <>      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>Toggle</button>      <Transition show={isShowing}>        <div className="transition duration-300 data-[closed]:opacity-0">I will fade in and out</div>      </Transition>    </>  );}

We've already updated all of Tailwind UI to use this new transition API and the code is a lot simpler and lighter. Take a look at the Modal Dialog, Dropdown, Slide-over, Flyout Menu, or Select Menu components for more examples.

All of the existing APIs continue to work for backwards compatibility, but this new approach is what we're going to recommend going forward.

Check out the updated Transition component documentation to learn more.

Rendering multiple dialogs as siblings

In Headless UI v2.1 you can finally render multiple dialogs at the same time without nesting one inside the other.

This can be really helpful when two unrelated parts of your application need to show a dialog at the same time — for example maybe you already have some sort of confirmation dialog open but another part of your app detects that you've lost network connectivity or your session has timed-out and needs to throw up a new dialog on top.

Here's what something like that might look like with Catalyst, the application UI kit we've been working on recently:

We keep track of the order in which each dialog is opened, and whichever one was opened last is the one that will close when you press escape or click outside the dialog.

To start using this stuff today, just install the latest version of Headless UI:

npm i @headlessui/react@latest

If you run into any issues, let us know on GitHub!

Automatically clean up whitespace and duplicate class names

Adam Wathan — Fri, 31 May 2024 16:30:00 GMT

We just released a new version of prettier-plugin-tailwindcss which adds support for removing unnecessary whitespace and duplicate classes when sorting.

Cleaning up unnecessary whitespace

When you're copying around class names or deleting a class name from the middle of a list, it's easy to end up with some extra whitespace that needs to be cleaned up.

Now our Prettier plugin will handle this for you automatically, so you don't need to clean it up yourself.

Removing duplicate classes

Our VS Code extension has warned you about duplicate class names for a long time, but now our Prettier plugin can remove those duplicate classes for you automatically.

To start playing with these improvements in your own projects, just install the latest version:

npm i prettier-plugin-tailwindcss@latest

If you run into any issues, let us know on GitHub!