ContextQMD
Back to Tailwindcss

Index

src/blog/tailwindcss-v3/index.mdx

latest25.8 KB
Original Source

import { Image, YouTubeVideo } from "@/components/media"; import Link from "next/link"; import { Example } from "@/components/example"; import { Figure } from "@/components/figure"; import card from "./card.jpg"; import { adamwathan } from "@/app/blog/authors";

export const meta = { title: "Tailwind CSS v3.0", description: "Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features.", date: "2021-12-09T16:00:00.000Z", authors: [adamwathan], image: card, excerpt: ( <> Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. </> ), };

<YouTubeVideo id="TmWIrBPE6Bc" />

Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features.

For a tour of some of the coolest new features, check out the {" "}<Link href="https://www.youtube.com/watch?v=mSC6GwizOag">"What's new in Tailwind CSS v3.0"</Link> video on our YouTube channel.

Tailwind CSS v3.0 has got to be our most exciting release ever, including improvements like:

  • Just-in-Time, all the time — lightning fast build times, stackable variants, arbitrary value support, better browser performance, and more.
  • Every color out of the box — including all of the extended palette colors like cyan, rose, fuchsia, and lime, and fifty shades of grey gray.
  • Colored box shadows — for fun glow and reflection effects, and more natural shadows on colored backgrounds.
  • Scroll snap API — a comprehensive and composable set of utilities for CSS-only scroll snapping.
  • Multi-column layout — so you can finally build that online newspaper you've been dreaming about.
  • Native form control styling — make checkboxes, radio buttons, and file inputs match your brand without reinventing the wheel.
  • Print modifier — control how your site looks when someone prints it, right from your HTML.
  • Modern aspect ratio API — no more padding hacks, well unless you need to support Safari 14, which you probably do, but still.
  • Fancy underline styles — the missing piece to making that side-project of yours finally take off.
  • RTL and LTR modifiers — for complete control when building multi-directional websites.
  • Portrait and landscape modifiers — honestly just because they were really easy to add.
  • Arbitrary properties — now Tailwind supports CSS properties we've never even heard of.
  • Play CDN — the new Just-in-Time engine squeezed into a CDN script that runs right in the browser.
  • Tons of other utilities — including support for touch-action, will-change, flex-basis, text-indent, scroll-behavior, and more.

Plus a beautiful, brand-spanking new documentation website, loaded with improved content and examples on every page.

To start playing with Tailwind CSS v3.0 today, grab the latest release from npm:

sh
npm install -D tailwindcss@latest postcss autoprefixer

...or head over to Tailwind Play to try out the latest features right in the browser.

Tailwind CSS v3.0 is a new major version of the framework and there are some minor breaking changes, but we've worked really hard to make the upgrade process as smooth as possible, and for most projects you should be able to install v3.0 without making any changes.

For example, Tailwind UI is probably the biggest Tailwind project on earth and every template is totally compatible with both v2 and v3 with no changes required.

For more details and step-by-step instructions on migrating to v3.0, check out the <Link href="https://v3.tailwindcss.com/docs/upgrade-guide">upgrade guide</Link>.

Just-in-Time, all the time

Back in March we introduced the brand new <Link href="/blog/just-in-time-the-next-generation-of-tailwind-css">Just-in-Time engine</Link> which brought huge performance gains, unlocked exciting new features like <Link href="https://v3.tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values">arbitrary values</Link>, and made complex variant configurations a thing of the past.

<YouTubeVideo id="3O_3X7InOw8" />

In Tailwind CSS v3.0, the new engine has gone stable and replaced the classic engine, so every Tailwind project can benefit from these improvements out of the box.

Every color out of the box

Before the new engine, we always had to be careful with CSS file size in development, and one of the biggest trade-offs we had to make was carefully limiting the color palette.

In v3.0, every single color in the extended color palette is enabled by default, including lime, cyan, sky, fuchsia, rose, and fifty shades of gray.

Check out the <Link href="https://v3.tailwindcss.com/docs/customizing-colors">color palette reference</Link> to learn more.

Colored box shadows

People have been asking us for colored shadows for years, but supporting it in a composable way that actually made sense was way harder than I expected it to be.

After about five false starts, we finally figured out an approach we liked, and now Tailwind CSS v3.0 includes colored shadows:

<Figure> <Example> { <div className="flex flex-col justify-center gap-8 sm:flex-row sm:gap-16"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> <>shadow-cyan-500/50</> </p> <button className="rounded-md bg-cyan-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-cyan-500/50 focus:outline-none"> <>Subscribe</> </button> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> <>shadow-blue-500/50</> </p> <button className="rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-blue-500/50 focus:outline-none"> <>Subscribe</> </button> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> <>shadow-indigo-500/50</> </p> <button className="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-500/50 focus:outline-none"> <>Subscribe</> </button> </div> </div> } </Example>
html
<!-- [!code word:shadow-lg shadow-cyan-500/50] -->
<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<!-- [!code word:shadow-lg shadow-blue-500/50] -->
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<!-- [!code word:shadow-lg shadow-indigo-500/50] -->
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>
</Figure>

Learn more in the <Link href="https://v3.tailwindcss.com/docs/box-shadow-color">Box Shadow Color</Link> documentation.

Scroll snap API

We've added a comprehensive set of utilities for the CSS Scroll Snap module, giving you the power to build very rich scroll snapping experiences directly in your HTML:

<Figure hint="Scroll in the grid of images to see the expected behavior"> <Example padding={false}> { <div className="relative"> <div className="mb-6 ml-[50%] flex items-end justify-start pt-10"> <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0"> <>snap point</> </div> <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div> </div> <div className="relative flex w-full snap-x snap-mandatory gap-6 overflow-x-auto pb-14"> <div className="shrink-0 snap-center"> <div className="w-4 shrink-0 sm:w-37"></div> </div> <div className="shrink-0 snap-center"> 
    </div>
    <div className="shrink-0 snap-center">
      
    </div>
    <div className="shrink-0 snap-center">
      
    </div>
    <div className="shrink-0 snap-center">
      
    </div>
    <div className="shrink-0 snap-center">
      
    </div>
    <div className="shrink-0 snap-center">
      
    </div>
    <div className="shrink-0 snap-center">
      <div className="w-4 shrink-0 sm:w-37"></div>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code word:snap-x] -->
<!-- [!code word:snap-center] -->
<div class="snap-x ...">
  <div class="snap-center ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
</div>
</Figure>

Start with the new <Link href="https://v3.tailwindcss.com/docs/scroll-margin">Scroll Margin</Link> utilities and work your way through the whole API to learn more.

Multi-column layout

We've added support for <Link href="https://developer.mozilla.org/en-US/docs/Web/CSS/columns">columns</Link> — the newspaper layout kind. These are actually super useful, and are great for things like footer navigation layouts too.

<Figure> <Example> { <div className="relative"> <div className="relative columns-1 gap-6 text-justify font-serif text-base sm:columns-3"> <p> Expedita quo ea quod laborum ullam ipsum enim. Deleniti commodi et. Nam id laborum placeat natus eum. Aliquid aut aut soluta nesciunt culpa magni. Velit possimus autem et aut repudiandae culpa rerum. Qui blanditiis ut qui quia expedita necessitatibus sed. Autem sed ut saepe doloremque aut placeat voluptas ipsum. </p> <p className="mt-6"> Eligendi error nisi recusandae velit numquam nihil aperiam enim. Eum et molestias. Id qui cum veritatis id ea quidem ea rerum saepe. Iste itaque fugiat sequi. Voluptatem quae minus. Maxime ullam ea praesentium recusandae vero est quas. Quia minima fugiat aut laborum impedit facere autem sit qui. Et eos et ullam necessitatibus. Ut voluptatem saepe natus itaque maiores sit repellat aut natus assumenda. </p> <p className="mt-6"> Blanditiis ipsa officia dolores exercitationem nemo beatae voluptatem eos rerum velit asperiores. Non quisquam accusantium officia nisi eius necessitatibus. </p> <p className="mt-6"> Quaerat quia ad voluptatem laudantium natus. Aut ipsa et numquam delectus aliquam. Recusandae libero consequatur dolorum. Animi culpa rerum molestiae ut non et molestias aliquid aut nemo. Sint dolorem dolorem. Iure dolorum amet ea sit perferendis. </p> <p className="mt-6"> Et illum ut officia nisi commodi. Quia et mollitia possimus modi. Delectus aliquid quam eos consectetur. </p> <p className="mt-6"> Accusantium et et qui non sed modi. Corrupti deserunt culpa eos vitae neque aperiam. Repellat tenetur fugit. </p> <p className="mt-6"> Deleniti distinctio ad corrupti nisi. Mollitia qui est natus cumque. Officia dolor qui perferendis necessitatibus saepe excepturi asperiores quos voluptas. Est suscipit facere nihil expedita suscipit quibusdam. Quod cupiditate vero distinctio. Sed est soluta nostrum magnam et saepe blanditiis aut. Vero dolores repellendus et libero minima explicabo provident. Culpa aut dolorem est. </p> </div> </div> } </Example>
html
<!-- [!code word:columns-1] -->
<!-- [!code word:sm\:columns-3] -->
<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>
</Figure>

Learn more in the <Link href="https://v3.tailwindcss.com/docs/columns">columns</Link> documentation — and check out the new <Link href="https://v3.tailwindcss.com/docs/break-after">break-after/inside/before</Link> utilities as well.

Native form control styling

We've added support for the new accent-color property, as well as a modifier for styling file input buttons to make it easier than ever to put your own touch on native form controls:

<Figure> <Example padding={false}> { <div className="px-6"> <div className="mx-auto max-w-sm bg-white px-6 py-8 shadow"> <form> <div className="flex items-center space-x-6"> <div className="shrink-0"> 
        </div>
        <label className="block">
          <span className="sr-only">Choose profile photo</span>
          <input
            type="file"
            className="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100"
          />
        </label>
      </div>
      <label className="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-slate-600">
        <input type="checkbox" className="accent-violet-500" defaultChecked />
        <span>Yes, send me all your stupid updates</span>
      </label>
    </form>
  </div>
</div>

} </Example>

html
<!-- [!code word:file\:mr-4] -->
<!-- [!code word:file\:py-2] -->
<!-- [!code word:file\:px-4] -->
<!-- [!code word:file\:rounded-full] -->
<!-- [!code word:file\:border-0] -->
<!-- [!code word:file\:text-sm] -->
<!-- [!code word:file\:font-semibold] -->
<!-- [!code word:file\:bg-violet-50] -->
<!-- [!code word:file\:text-violet-700] -->
<!-- [!code word:hover\:file\:bg-violet-100] -->
<form>
  <div class="flex items-center space-x-6">
    <div class="shrink-0">
      
    </div>
    <label class="block">
      <span class="sr-only">Choose profile photo</span>
      <input
        type="file"
        class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100"
      />
    </label>
  </div>
  <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-slate-600">
    <!-- [!code word:accent-violet-500] -->
    <input type="checkbox" class="accent-violet-500" checked />
    <span>Yes, send me all your stupid updates</span>
  </label>
</form>
</Figure>

Learn more in the <Link href="https://v3.tailwindcss.com/docs/accent-color">accent color</Link> and <Link href="https://v3.tailwindcss.com/docs/hover-focus-and-other-states#file-input-buttons">file input buttons</Link> documentation.

The new print modifier lets you style how your site should look when animals people print it:

html
<div>
  <!-- [!code word:print\:hidden] -->
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <!-- [!code word:print\:block] -->
  <div class="hidden print:block">Are you seriously trying to print this? It's secret!</div>
</div>

I'd say "learn more in the <Link href="https://v3.tailwindcss.com/docs/hover-focus-and-other-states#print-styles">print styles documentation</Link>" but it wouldn't be true.

Modern aspect ratio API

We've added support for the new native aspect-ratio property, which is starting to see solid browser support:

<Figure> <Example resizable> { <iframe className="aspect-video w-full rounded-lg shadow-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen ></iframe> } </Example>
html
<!-- [!code word:aspect-video] -->
<iframe class="aspect-video w-full ..." src="https://www.youtube.com/..."></iframe>
</Figure>

Learn more in the <Link href="https://v3.tailwindcss.com/docs/aspect-ratio">aspect ratio</Link> documentation.

Fancy underline styles

Now you can change underline colors, thickness, and more:

<Figure> <Example padding={false}> { <div className="mx-auto max-w-md bg-white p-8 text-sm leading-6 text-slate-900 shadow-lg sm:text-base sm:leading-7 dark:bg-slate-800 dark:text-slate-200"> <p className="text-base leading-6"> I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at{" "} <a href="#" className="font-semibold underline decoration-sky-500 decoration-2"> My Company, Inc </a> . Outside of work, I like to{" "} <a href="#" className="font-semibold underline decoration-pink-500 decoration-dotted decoration-2"> watch pod-racing </a>{" "} and have{" "} <a href="#" className="font-semibold underline decoration-indigo-500 decoration-wavy decoration-2"> light-saber </a>{" "} fights. </p> </div> } </Example>
html
<p>
  I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at
  <!-- [!code word:decoration-sky-500 decoration-2] -->
  <a href="#" class="underline decoration-sky-500 decoration-2"> My Company, Inc </a>. Outside of work, I like to{" "}
  <!-- [!code word:decoration-pink-500 decoration-dotted decoration-2] -->
  <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2"> watch pod-racing </a> and have
  <!-- [!code word:decoration-indigo-500 decoration-wavy decoration-2] -->
  <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2"> light-saber </a>{" "} fights.
</p>
</Figure>

Learn more in the <Link href="https://v3.tailwindcss.com/docs/text-decoration-color">text decoration color</Link>, <Link href="https://v3.tailwindcss.com/docs/text-decoration-style">text decoration style</Link>, <Link href="https://v3.tailwindcss.com/docs/text-decoration-thickness">text decoration thickness</Link>, and <Link href="https://v3.tailwindcss.com/docs/text-underline-offset">text underline offset</Link> documentation.

RTL and LTR modifiers

We've added experimental support for multi-directional layouts with new rtl and ltr modifiers:

<Example> { <div className="mx-auto grid max-w-lg grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2"> <div dir="ltr"> <p className="mb-4 text-sm font-medium text-slate-500 dark:text-slate-400">Left-to-right</p> <div className="group flex items-center"> 
      <div className="ml-3 rtl:mr-3 rtl:ml-0">
        <p className="text-sm font-medium text-slate-700 group-hover:text-slate-900 dark:text-slate-300 dark:group-hover:text-white">
          <>Tom Cook</>
        </p>
        <p className="text-sm font-medium text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300">
          <>Director of Operations</>
        </p>
      </div>
    </div>
  </div>
  <div dir="rtl">
    <p className="mb-4 text-sm font-medium text-slate-500 dark:text-slate-400">Right-to-left</p>
    <div className="group flex items-center">
      
      <div className="ml-3 rtl:mr-3 rtl:ml-0">
        <p className="text-sm font-medium text-slate-700 group-hover:text-slate-900 dark:text-slate-300 dark:group-hover:text-white">
          <>تامر كرم</>
        </p>
        <p className="text-sm font-medium text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300">
          <>الرئيس التنفيذي</>
        </p>
      </div>
    </div>
  </div>
</div>

} </Example>

html
<div class="group flex items-center">
  
  >
  <!-- [!code highlight:2] -->
  <div class="ltr:ml-3 rtl:mr-3">
    <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p>
  </div>
</div>

Learn more in the <Link href="https://v3.tailwindcss.com/docs/hover-focus-and-other-states#rtl-support">RTL support</Link> documentation.

Portrait and landscape modifiers

Use the new portrait and landscape modifiers to conditionally add styles when the viewport is in a specific orientation:

html
<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>This experience is designed to be viewed in landscape. Please rotate your device to view the site.</p>
  </div>
</div>

The <Link href="https://v3.tailwindcss.com/docs/hover-focus-and-other-states#viewport-orientation">documentation for this feature</Link> has even less content than this section of this post does.

Arbitrary properties

This might be illegal but we've made it possible to add totally arbitrary CSS that you can combine with modifiers like hover, lg, and whatever else:

html
<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  <!-- ... -->
</div>

This is what inline styles want to be when they grow up. Learn more in the <Link href="https://v3.tailwindcss.com/docs/adding-custom-styles#arbitrary-properties">arbitrary properties</Link> documentation.

Play CDN

There's no way to make a sensible CSS-based CDN build for Tailwind CSS v3.0 so we had to do something different — we built a JavaScript library.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn.tailwindcss.com/"></script> <!-- [!code ++] -->
  </head>
  <body>
    <!-- -->
  </body>
</html>

Add that script tag to any HTML document and you can use every Tailwind feature, right in the browser. It's meant for development purposes only, but it sure is a fun way to build little demos or hack on a new idea.

Learn more in the <Link href="https://v3.tailwindcss.com/docs/installation/play-cdn">Play CDN</Link> documentation.

So there it is — Tailwind CSS v3.0! Head over to the new <Link href="/">documentation site</Link> to get started with it today.

For a comprehensive list of every single change, check out the <Link href="https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md">changelog</Link> on GitHub.