Oct 18, 2022

Tailwind CSS 3 - What's Fresh?!

🚧

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.

Official release video

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

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:

Unsupported block (column_list)

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 -

So hurry up! and upgrade to the latest version!