Tailwind CSS 3 - What's Fresh?!

type

Shorts

date

Jan 15, 2022

description

Let's discuss the new tailwind CSS v3 and all the new shenanigans it comes along with. And why you should abandon your current CSS processor and jump on Tailwind Bandwagon!

🚧

People who already use Tailwind and are looking to upgrade to the latest version 3 as well as readers who are open to switching their current CSS processor to Tailwind CSS.

I'm an avid user of Tailwind CSS. This blog has been made with Tailwind.

Some of the reasons I prefer it over conventional CSS and related preprocessors(like SASS, PCSS, etc.) are -

It is easier to maintain coherence across your website UI as you only have a limited number of predefined classes.

Switching between the HTML element and its corresponding CSS is a pain.

Ability to add new features by using plugins.

Unnoticeable to no performance tradeoffs.

Great documentation and Community!

It's more fun than writing conventional CSS! And that's what matters the most. ?

Tailwind CSS v3.0 has been recently released bringing incredible performance gains, workflow improvements, and a vast number of new features.

Installation: Tailwind CLI - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

https://tailwindcss.com/docs/installation

Just in Time (JIT) - All the Time

It's the feature garnering the most amount of spotlight. JIT has been in public beta for months and is now finally battle-ready.

Historically, all the classes in Tailwind had to be predefined which were then loaded onto the browser, and only then the developer was able to use them. This increased build and reload times during development as the massive CSS had to be loaded onto the browser.


 <!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>

You can also include the tailwind CDN via the script tag

💡

You can even add various tailwind plugins such as typography, aspect-ratio, line-clamp, etc by adding them to the cdn url https://cdn.tailwindcss.com/?plugins=forms,typography,aspect-ratio,line-clamp

JIT compiles all of your CSS on-demand as you author your template files, instead of generating your entire stylesheet upfront. This enables Tailwind v3 to have extensive features which were not possible in previous versions. Some of these we'll discuss below.

All Colors out of the box

Since Tailwind v3 can generate CSS on-demand, there's no longer a limit on the number of colors or their variants you can use.

The JIT Engine also enables arbitrary values out of the box. What are those? Specific arbitrary values that are outside the design system.

Basically, you don't need to be choosy! Everything is available!

New Scroll Snap API

Tailwind v3 now comes with an in-built Snap API for scrolling behavior.

Check out the demo of Snap API in the below Playground -

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

https://play.tailwindcss.com/7sNcz1QNRE

Multi-Column Layout

This addition enables you to write text in a multi-column layout - kind of like a Newspaper. This is especially useful while designing your website's Footer. Ex:

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.

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.

Blanditiis ipsa officia dolores exercitationem nemo beatae voluptatem eos rerum velit asperiores. Non quisquam accusantium officia nisi eius necessitatibus.

Colored Box Shadows


<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>

With the new version, Tailwind now supports colored shadows. Before this, we had to create custom shadows in the Tailwind config file. Now there are predefined shadows to use.

Others

Of course, the list doesn't end so soon. There are a few other features worthy of mentioning -

Native Form Control Styling

Print Modifier

Modern Aspect Ration API

Arbitrary Properties

Support for touch-action, will-change, flex-basis, text-indent, scroll-behavior, and more.

Final thoughts!

If you have been using Tailwind CSS v2.0, it's worth every penny to upgrade to the new version. There are very few breaking changes like -

Removed support for PostCSS v7.0 and below.

Few classes have been renamed, like -


- <div class="overflow-clip">
+ <div class="text-clip">

- <div class="overflow-ellipsis">
+ <div class="text-ellipsis">

3. purge has changed to content


- module.exports = {
-   purge: ["./src/**/*.{html,js}"],
-   theme: {
-     extend: {},
-   },
-   plugins: [],
- }

+ module.exports = {
+   content: ["./src/**/*.{html,js}"],
+   theme: {
+     extend: {},
+   },
+   plugins: [],
+ }

With the new JIT Engine, Tailwind is better than ever! You can play with the new release in the below official playground -

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

https://play.tailwindcss.com/

So hurry up! and upgrade to the latest version!