TailwindCSS v3.0 is now available! A bunch of new features are coming!

On December 10, 2021, TailwindCSS founder Adam Wathan announced the official release of TailwindCSS v3.0, bringing a number of performance improvements, improved development workflows, and a host of new features.

So what interesting new features does v3.0 bring to the star of CSS engineering? Let’s take a look at them one by one.

Just-in-time, anytime, anywhere

Tailwind 2.x has introduced a new mode, just-in-time, that keeps development and production builds consistent, and builds on demand, which is much better than the previous Tailwind model that required all the basics to be built. Webpack, for example, can be built in 800ms, whereas previously it might have taken 30-45s.

And thanks to the JIT mode, Tailwind supports a number of new features such as “arbitrary value helper classes.”

Previously with JIT, you needed to specify the mode in the configuration file:

// tailwind.config.js

module.exports = {
 // ...
  mode: 'jit',
  // ...
}
Copy the code

Then you can enjoy extremely fast builds and use helper classes with arbitrary values, such as:

<div class="top-[-113px]"></div>
Copy the code

This was not allowed in the previous Tailwind version, so if you want to override this arbitrary value, you still have to define a class name and write the corresponding CSS:

<div class="arbitrary-values"></div>

<style>
.arbitrary-values {
  top: -113px;
}
</style> 
Copy the code

This form is Tailwind fragmentary, so in JIT mode, since on-demand builds are supported, this arbitrary value form can be written using Tailwind’s unified syntax.

In V3.0, Tailwind had JIT built in, so there was no need to declare JIT mode in the configuration file. By default, Tailwind built on demand, could use any helper classes, and developed and produced the same build style as the production, avoiding inconsistents and achieving great performance optimization.

All colors are available out of the box

Prior to V3.0, Tailwind had to be careful to limit the available colors in order to keep an eye on the size of CSS in development mode, but since V3.0 we’ve been able to introduce a lot of new palette colors, Shades such as Cyan (sky blue), Rose (rose), Fuchsia (fuchsia), Lime (acid orange), and 15 shades of grey without worrying about increasing CSS file sizes.

Colored shadows are supported

It was difficult for Tailwind to support colored shadows in a combined way, and although this feature has been talked about for a long time, it was never implemented. After 5 failed attempts to implement this feature in Tailwind V3.0, you can now use these colored shadows in Tailwind:

For example:

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ..." >Subscribe</button> <button class="bg-blue-500 shadow-lg shadow-blue-500/50 ..." >Subscribe</button> <button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ..." >Subscribe</button>Copy the code

The following results can be obtained:

Scrollcapture API

We’ve added a complete set of helper classes for implementing CSS scrollcapture modules, allowing you to implement very rich scrollcapture effects directly in HTML:

What is scroll capture? In other words, when sliding to the next Item, you can choose to slide to a certain position of this Item, for example, the following position is located in the middle of the picture.

The above effect only requires the following simpler Tailwind helper classes:

<div class="snap-x ..." > <div class="snap-center ..." > <img SRC = "https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fG VufDB8fHx8&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=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVuf DB8fHx8&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=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fG VufDB8fHx8&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=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fG VufDB8fHx8&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=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fG VufDB8fHx8&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=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVuf DB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> </div>Copy the code

In a SNAP container, snap-center, snap-start, etc., are used to set the Scroll position, while Scroll Margin is used to set the offset relative to the position, using a format such as scroll-m{side}-{size}. For example, scrollmL-6 is 6 units more offset to the left:

<div class="snap-x ..." > <div class="scroll-ml-6 snap-start ..." > <img SRC = "https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fG VufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="scroll-ml-6 snap-start ..." > <img SRC = "https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVuf DB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="scroll-ml-6 snap-start ..." > <img SRC = "https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fG VufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="scroll-ml-6 snap-start ..." > <img SRC = "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fG VufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="scroll-ml-6 snap-start ..." > <img SRC = "https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fG VufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> </div>Copy the code

As in the above code, snap-center will be positioned at the beginning of the image when scrolling, and after adding scrollmL-6, it will be shifted by 6 units relative to the left, resulting in the following effect:

Multi-column layouts

We added support for columns, also known as the “news layout” type, which is very useful, as well as when designing the bottom navigation bar layout.

As with the multi-column navigation at the bottom of most of our websites, take Tailwind for example:

When you use the corresponding helper class as follows:

<div class="columns-1 sm:columns-3 ..." > <p>... </p> <! -... --> </div>Copy the code

You can get the following effect:

Native form control style

We added support for CSS accent color attributes, such as styling file input buttons in forms, which allows you to fine-grained styling native form control buttons, as follows:

<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=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8f GVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" /> </div> <label class="block"> <span class="sr-only">Choose profile photo</span> <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>Yes, send me all your stupid updates</span> </label> </form>Copy the code

The following results can be obtained:

Before selecting a file:

After selecting the file:

Print modifier

We added the print modifier so that you can see how the user prints your site:

<div> <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> <div class="hidden print:block"> Are you seriously trying to print this? It's secret! </div> </div>Copy the code

For example, the code logic above is that in print mode, the first article block is not displayed, while the div block is.

modernaspect ratio API

We added support for the native Aspect Ratio **** property because browser support is now so high that we can get a nice vertical ratio.

For example, you can set the optimal horizontal/vertical ratio of the video:

<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..." ></iframe>Copy the code

The above code results in the following:

Nice underline style

We now support changing the color and weight of the underline

The following code:

< p > I 'm Derek, an astro-engineer based in Tatooine. I like to build X-Wings at <a href="#" class="underline decoration-sky-500 decoration-2">My Company, Inc</a>. Outside of work, I like to <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2">watch pod-racing</a> and have  <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2">light-saber</a> fights. </p>Copy the code

The following results can be obtained:

RTL and LTR modifiers

We have also added experimental support for multi-directional layouts such as RTL (right-to-left) and LTR (right-to-right), as follows:

<div class="group flex items-center"> <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" /> <div class="ltr:ml-3 rtl:mr-3"> <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">... </p> <p class="text-sm font-medium text-gray-500 group-hover:text-gray-700">... </p> </div> </div>Copy the code

The following results can be obtained:

Portrait and LAndscape modifier

We’ve also added support for modifiers in different screen orientations, such as portrait and landscape modifiers, so that you can use different modifiers to control the style in the corresponding screen orientation:

<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>Copy the code

Arbitrary value auxiliary class support

It may seem unreasonable, but we’ve added Tailwind classes with arbitrary CSS values and allowed you to use them with hover, LG, and other modifiers:

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

Or an arbitrary value like 56px or 44px, used with the LG modifier:

<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]"> <! -... --> </div>Copy the code

Use CDN to use Tailwind

There is currently no good CSS-BASED CDN way to use Tailwind CSS V3.0, so we built a JavaScript library to help you use it:

<! 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 > < / head > < body > <! -- --> </body> </html>Copy the code

This is only for use in a development environment, or when you want to build a demo or try out an interesting idea. Just add a script tag referencing cdn.tailwindcss.com/ to any HTML document that wants to use the Tailwind feature.

TailwindCSS V3.0 has been updated to TailwindCSS V3.0. Are you ready to use it in production, or add it to your toolbox when building your next application 🐴?

❤️/ Thanks for your support /

That is all the content of this sharing. I hope it will help you

Don’t forget to share, like and bookmark your favorite things

Welcome to the public number programmer bus, from byte, shrimp, zhaoyin three brothers, share programming experience, technical dry goods and career planning, help you to avoid detours into the factory.