The first version of Tailwind CSS v3
is released,
and it has loads of interesting
features to explore.
This version comes with several new utilities,
variants,
and many more that can enhance performance,
workflows
and save a lot of our time.
To jump right in and start using it, we have to install it via npm-
npm install -D tailwindcss@3
We need to update the @tailwindcss/typography or @tailwindcss/forms packages, as well, by using-
npm install -D @tailwindcss/typography@next
npm install -D @tailwindcss/forms@next
Just-in-Time engine by default
With version 3.0, the Just-In-Time (JIT) engine is the new default engine that enables the functioning of Tailwind CSS.
Before
The older Ahead of Time (AOT) mode is deprecated and is no longer applicable in Tailwind CSS v3.
Therefore, we must start powering our current Tailwind 2.x
projects by the JIT engine.
This will simplify the process of upgrading the
existing Tailwind 2.x projects to Tailwind 3.0.
CDN Version powered by the Just-in-Time engine
The Tailwind CDN version is now supported by the JIT Engine. This means that we can leverage all the new features that the JIT-engine brings to Tailwind even by using the CDN version.
This is a great advantage for swift prototyping and development.
We tried the CDN version out with the help of this script tag in the head of our document.
<script src="https://cdn-tailwindcss.vercel.app/"></script>
The Tailwind CSS version 3.0 also supports first-party plugins. Plugins can be loaded automatically by adding a plugins query parameter within our script tag. Within the query parameter, we can specify which first-party plugins we wish to deploy.
Colored box shadows utilities
The new colored box shadows utilities enable the optimization of the tint of our call-to-action boxes by adding a shadow to them.
We can use the shadow utility, followed by our desired color to add shadows to the boxes. In this example, we have specified a blue tint for our box shadows.
<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>Aspect-ratio utilities
Tailwind 3.0 introduced new utility classes
with aspect-ratio to control
and set the aspect ratio of an element.
These new classes will live along with the aspect ratio plugin.
We can also provide our own aspect ratios. We have used the following bracket syntax for implementing the aspect ratio of our choice.
<img class="aspect-[4/3] ... "/>
Scroll-behavior utilities
This is a small new utility that allows us to specify the way the browser will tackle user scrolling. This is useful for smooth scrolling between page anchors.
Text-indent utilities
The text-indent utilities allow us to set the length of empty space (indentation) before the lines of text in a block. This also includes any negative numbers and will operate along with the responsive variants.
<div class="indent-12 lg:-indent-32">.....</div>These utilities also allow arbitrary values via the scare bracket notation:
<div class="indent-[33%]">.....</div>Touch-action utilities
We can specify the way an element’s region can be manipulated by a user using a touchscreen using the touch-screen utilities.
Will-change utilities
The will-change utility is used to specify the browser how an element is expected to change. Browsers may set up optimizations before an element is modified. These kinds of optimizations can improve page responsiveness most affordably.
border-x and border-y utilities
The border-x-{width}, border-y-{width}, border-x-{color},
and border-y-{color} utilities is very useful
as it can help us to style the border on two sides of an
element at the same time, thereby,
saving us time while developing.
Fill and stroke utilities
With the help of the JIT engine, we can now specify stroke and fill colors in a more compact syntax.
Before
Earlier, we had to use a combination of fill-current
and our desired color,
for example, text-blue-500.
The new syntax makes it way easier to formulate the code and improves its readability.
Look at the codes below:
<svg class="text-red-500 fill-current">
<!-- the old way of doing fill colors -->
</svg> <svg class="fill-red-500">
<!-- the new way of doing fill colors-->
</svg>Print: variant
The new print variant enables us to specify the style we want our page to have when someone takes a printout. We can hide certain elements, change text colors and so on.
Look at the example below, here, we have hidden the logo and changed the text color to black-
<h1 class="text-indigo-500 print:text-black">
<!-- Text is in black when printing this page -->
</h1>
<img src="..../logo.png" class="print:hidden">
<!-- Hide the logo when printing this page -->
</img>
File: variant
With the file variant, we can now style the native file upload button in our browser.
Look at the example below, we have styled the text in red-
<input type="file" class="file:bg-red-600 file:text-white" />
Open: variant
This variant is required when we are styling certain HTML elements like the details or dialog tags. It allows us to style elements differently based on their open state.
For example, when the details element is open, we want to display a blue background.
<details class="bg-white open:bg-blue-100">
<summary>Details</summary>
</details>Changes coming to version 3.0
The team at Tailwind Labs did an awesome job in keeping the breaking changes to a minimum. Let’s dive into the changes we will come across while upgrading to version 3.0.
Purge needs to be renamed to content
This is a crucial change where the Tailwind CSS team decided to rename the purge config key to content.
They did this because the JIT engine doesn’t comprise any PurgeCSS module under the hood.
Look at the code below for a better understanding-
// tailwind.config.js - Version 2.x
module.exports = {
purge: ['./src/**/*.html' /* ... */],
}
// tailwind.config.js - Version 3.x
module.exports = {
content: ['./src/**/*.html' /* ... */],
}New Color palette
In version 3.0, we can now leverage an extended color palette, by default. Some of the colors are also renamed.
We can use the following utilities for the color gray-
- text-slate-500 (was version 2.x blueGray)
- text-gray-500 (was version 2.x coolGray is now the default)
- text-zinc-500 (was version 2.x default gray)
- text-neutral-500 (was version 2.x trueGray)
- text-stone-500 (was version 2.x warmGray)
The new naming convention for the following colors -
- text-amber-500 (was version 2.x yellow)
- text-emerald-500 (was version 2.x green)
- text-violet-500 (was version 2.x purple)
New colors introduced-
- text-orange-500
- text-lime-500
- text-teal-500
- text-cyan-500
- text-sky-500
- text-fuchsia-500
- text-rose-500
PostCSS version 7 is no longer supported
Since PostCSS Version 7 is not available anymore,
we need to upgrade to PostCSS version 8.
This is applicable for those who are using the create-react-app package
in their projects as the current version over create-react-app is based on PostCSS Version 7.
However, the good news is that there is
a new version of create-react-app on the horizon
that is powered by PostCSS Version 8.
Hence, when the Tailwind CSS v# will be released,
it won’t be much of an issue for us.
Final Thoughts
The Tailwind CSS v3 has brought a myriad of
new features to the table with its release.
Not to mention, it keeps getting better with every update.
We hope that this blog was useful
and learned a thing or two about the new version of
Tailwind CSS.
