Tailwind CSS v3.0 is here — bringing unprecedented performance beneficial properties, huge workflow improvements, and a severely ridiculous selection of most up-to-date aspects.

For a tour of just a few of the coolest contemporary aspects, study out the “What’s contemporary in Tailwind CSS v3.0” video on our YouTube channel.

Tailwind CSS v3.0 has purchased to be our most loyal free up ever, together with improvements love:

• Consuming-in-Time, your total time — lightning immediate create situations, stackable variants, arbitrary fee strengthen, better browser performance, and extra.
• Each and every coloration out of the box — together with all of the extended palette colors love cyan, rose, fuchsia, and lime, and fifty shades of grey grey.
• Colored box shadows — for relaxing glow and reflection results, and extra natural shadows on colored backgrounds.
• Scroll snap API — a total and composable space of utilities for CSS-handiest scroll snapping.
• Multi-column layout — so that it is seemingly you’ll possibly in the end create that on-line newspaper you’ve been dreaming about.
• Native assemble lend a hand a watch on styling — originate checkboxes, radio buttons, and file inputs match your fee without reinventing the wheel.
• Print modifier — lend a hand a watch on how your space looks when somebody prints it, perfect out of your HTML.
• Up-to-the-minute facet ratio API — no extra padding hacks, successfully unless or no longer it is well-known to enhance Safari 14, which you presumably enact, nevertheless unexcited.
• Admire underline kinds — the missing portion to increasing that facet-project of yours in the end intention shut off.
• RTL and LTR modifiers — for total lend a hand a watch on when constructing multi-directional web sites.
• Portrait and landscape modifiers — and not utilizing a doubt correct because they had been in fact easy so to add.
• Arbitrary properties — now Tailwind helps CSS properties we’ve never even heard of.
• Play CDN — the contemporary Consuming-in-Time engine squeezed into a CDN script that runs perfect within the browser.
• An total bunch other utilities — together with strengthen for touch-action, will-change, flex-basis, text-indent, scroll-behavior, and extra.

Plus a dazzling, fee-spanking contemporary documentation online page material, loaded with improved announce material and examples on every page.

To initiate taking part in with Tailwind CSS v3.0 nowadays, clutch the most contemporary free up from npm:

npm set up -D tailwindcss@most up-to-date postcss autoprefixer

…or head over to Tailwind Play to are trying out the most contemporary aspects perfect within the browser.

Tailwind CSS v3.0 is a recent main version of the framework and there are some minor breaking adjustments, nevertheless we’ve worked in fact exhausting to originate the strengthen route of as relaxed as that it is seemingly you’ll possibly mediate of, and for most tasks you trust so as to set up v3.0 without making any adjustments.

As an illustration, Tailwind UI is doubtlessly the finest Tailwind project on earth and every template is utterly love minded with each and every v2 and v3 and not utilizing a adjustments required.

For added little print and step-by-step instructions on migrating to v3.0, study out the strengthen handbook.

---

​Consuming-in-Time, your total time

Help in March we launched the cost contemporary Consuming-in-Time engine which introduced huge performance beneficial properties, unlocked thrilling contemporary aspects love arbitrary values, and made complex variant configurations a thing of the past.

In Tailwind CSS v3.0, the contemporary engine has long past precise and modified the classic engine, so every Tailwind project can profit from these improvements out of the box.

---

​Each and every coloration out of the box

Sooner than the contemporary engine, we always had to be careful with CSS file size in trend, and judicious one of the necessary finest substitute-offs we had to originate became carefully limiting the coloration palette.

In v3.0, each coloration within the extended coloration palette is enabled by default, together with lime, cyan, sky, fuchsia, rose, and fifty shades of grey.

Take a look at out the coloration palette reference to learn extra.

---

​Colored box shadows

Folks had been asking us for colored shadows for years, nevertheless supporting it in a composable procedure that actually made sense became procedure more challenging than I expected it to be.

After about 5 unfounded begins, we in the end discovered an procedure we loved, and now Tailwind CSS v3.0 entails colored shadows:

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribebutton>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribebutton>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribebutton>

Learn extra within the Box Shadow Color documentation.

---

We’ve added a total space of utilities for the CSS Scroll Snap module, supplying you with the vitality to create very rich scroll snapping experiences on to your HTML:

<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  div>
div>

Open with the contemporary Scroll Margin utilities and work your procedure thru your total API to learn extra.

---

​Multi-column layout

We’ve added strengthen for columns — the newspaper layout kind. These are in fact gracious important, and are gracious for issues love footer navigation layouts too.

<div class="columns-1 sm:columns-3 ...">
  <p>...p>
  
div>

Learn extra within the columns documentation — and study out the contemporary damage-after/inside of/sooner than utilities as successfully.

---

​Native assemble lend a hand a watch on styling

We’ve added strengthen for the contemporary accent-coloration property, as well to a modifier for styling file enter buttons to originate it more easy than ever to position your have touch on native assemble controls:

<form>
  <div class="flex items-center space-x-6">
    <div class="shrink-0">
      <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" />
    div>
    <label class="block">
      <span class="sr-only">Bewitch profile describespan>
      <input type="file" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-full file:border-0
        file:text-sm file:font-semibold
        file:bg-violet-50 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-gray-600">
    <input type="checkbox" class="accent-violet-500" checked/>
    <span>Ride, ship me your total boring updatesspan>
  label>
form>

Learn extra within the accent coloration and file enter buttons documentation.

---

​Print modifier

The contemporary print modifier permits you to vogue how your space must see when animals other folk print it:

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipeh1>
    <p>This recipe is a secret, and must no longer be s