What's New in TailwindCSS 3

The highly anticipated upgrade of TailwindCSS (version 3.0) was released 3 days ago. There are a many new features we can take a look at, a few of which were already implemented in version 2.1:

• Just-in-Time engine

As the creator of TailwindCSS describes it - The Next Generation of Tailwind CSS. What can you benefit from the JIT engine?

• • Lightning fast builds. Initially you would use the Tailwind CLI to build in 3-8s, but with JIT incremental builds may take 3-5ms
  • Use any variant. Variants like active, disabled, focus-visible, etc may be used out of the box without configuring. Moreover you have the ability to stack variants: lg:hover:active:disabled:opacity-60
  • Arbitrary styling without writing custom CSS. There are edge-cases where you may need specific values to style. For example, for specific colors you may use: text-[#fg56ee], bg-[#af441b], for length you can try something like: w-[320px], h-[56vh], left-[-20px]
  • No need to purge unused styles as the styles will be the same in development and production.
  • An improved browser performance in development

• More colors enabled

After the introduction on the JIT engine, it has made possible to add to the color palette which were limiting the CSS file size in development.

The added colors are cyan, fuschia, lime, rose, sky and a broader palette for gray. See all of them here.

• Colored box shadows

In the previous versions of TailwindCSS, you could only make box shadows with a default black color. If you wanted colored box shadows you needed to write custom CSS, that is no-longer the case:

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Button</button>
<button class="bg-sky-500 shadow-lg shadow-sky-500/50 ...">Button</button> 
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Button</button>
<button class="bg-pink-500 shadow-lg shadow-pink-500/50 ...">Button</button>

In addition to the new colored box shadow classes, you may add an opacity modifier like /50 to make the opacity 50% from the default 100%

• Scroll-snap API

You can now make use of new scroll snap utilities to dictate how strictly snap points are enforced on your scroll containers:

<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1637041525862-2ad2b64af99a?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-1636968292432-a936d6bda910?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-1637034710395-fc70c2c60d67?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-1637002058113-02cfabfc51b5?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-1636998911068-df9a9dcc9b4b?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-1637050929981-1c43857a5622?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

By scrolling horizontally it's easy to position each child at the centre of the scroll container. Check out all the scroll snap utilities.

• Multi-column layouts

We now have new utilities for the columns CSS property. This allows us to set the number of columns to use when designing an element's content and the preferred column width:

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

<!--Responsive columns-->
<div class="max-w-7xl columns-2xs ...">
  <p>...</p>
  <p>...</p>
</div>

These layouts are ideal for designing magazine style layouts, footer layouts or content coming from a CMS.

• Form-control styling

With the use of new file and accent utilities, you can control the default form styling for file, checkboxes, radio buttons and more without requiring the form plugin:

First name

Last name

Choose profile photo

I agree to the terms and conditions.

<form class="accent-pink-500 ...">
  <div>
    <label for="first-name">First name<label>
    <input type="text" id="first-name" name="first-name" class="focus:outline-pink-500 ..." />
  </div>
  <div>
    <label for="last-name">Last name</label>
    <input type="text" id="last-name" name="last-name" class="focus:outline-pink-500 ..." />
  </div>
  <div class="flex items-center">
    <img 
      class="h-16 w-16 rounded-full"
      src="https://images.unsplash.com/photo-1637082708721-9539f702e934?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
      alt="..."
    />
    <input
      type="file"
      class="file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-pink-50 file:text-pink-700 hover:file:bg-pink-100 ..."
    />
  </div>
  <div>
    <label>
      <input type="checkbox" checked/>
      <span>I agree to the terms and conditions.</span>
    </label>
  </div>
</form>

• Print modifier

A new print modifier has been added to enable you decide how to style any element when printed:

<div>
  <article class="print:hidden">
    This container will be hidden when printed but visible on the browser
  </article>
  <div class="hidden print:block">
    This container will be hidden on the browser but visible when printed
  </div>
</div>

• Aspect ratio API

Native aspect ratio is now available even without the aspect-ratio plugin. You may use utilities like aspect-auto, aspect-square which equals 1/1, aspect-video which equals 16/9.

To use custom ratios, you may use the much flexible arbitrary values such as aspect-[insert ratio here]

• Underline styles

Out-of-the-box you can now style underline colors, decoration style, thickness and offset:

Hello there, we are BryceAndy. We help startups and businesses build and launch their software products. Visit BryceAndy to learn more. We create web apps and also mobile apps with their backend APIs.

<p>
  Hello there, we are BryceAndy. We help startups and businesses build and launch their software products.
  Visit <a href="https://bryceandy.com" class="underline decoration-sky-500 decoration-2">BryceAndy</a> to learn more.
  We create <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2">web apps</a>
  and also <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2">mobile apps</a>
  with their backend APIs.
</p>

• Portrait and landscape modifiers

The new modifiers can be used to style your elements when the device orientation changes:

<div>
  <p class="portrait:hidden">
    This paragraph will be hidden in the portrait mode.
  </p>
  <p class="landscape:hidden">
    This paragraph will be hidden in the landscape mode.
  </p>
</div>

• Arbitrary properties

Similar to the way you would write arbitrary values, arbitrary properties are also written the same way in square-brackets.

Arbitrary properties may give you the power to:

• • Write CSS that may not be included in TailwindCSS, for example:

<img 
  src="https://doodleipsum.com/700/hand-drawn?i=8b8c74e274894a5621c03d9050bf5d38" 
  class="[clip-path:circle(40%)]"
/>

• • Write inline CSS that you CANNOT write with regular CSS, for example:

<img
  src="https://doodleipsum.com/700/flat?i=f02e931050f753977b3c5f372db5972e"
  class="hover:[clip-path:polygon(50%_0,_100%_50%,_50%_100%,_0_50%)]"
/>

Notice the syntax where spaces are replaced with underscores.