Want to learn what's new in TailwindCSS 2.2 in 22 seconds?
Maybe that's a little too ambitious 🤪. It might be more like 122 seconds. Either way, in this tutorial, you will learn the new things in TailwindCSS 2.2 in a few minutes. Let's dive in!
Tailwind CLI 💻
With the all-new TailwindCLI, you can now purge your CSS into a single file within a single command:
npx tailwindcss -o app.css --jit --purge "./*.html"
In that single command, we create a new file at ./app.css, including any tailwind styles that we have inside our ./*.html files.
Magic 🔮
All New Variant Classes 🆕
Tailwind already had support for variants like hover, focus, and now we get a few others.
Before, and After variants are now available for use. You can now add text or styles before an element (make sure you are using JIT mode):
<div class="before:content-['hello'] before:block ..."></div>
You can also apply specific styles using the first-letter and first-line pseudo variants like so:
<p class="first-letter:text-4xl first-letter:font-bold first-letter:float-left">
The night was March 31, 1996, and it was finally time for Bret Hart to face off against Shawn
Michaels in the long-anticipated Iron Man match — a 60-minute war of endurance where the man who scored the most number of falls would walk away as the WWF World Heavyweight Champion.
</p>
There are a ton more variants that we have available in version 2.2, including the following:
- selection
- marker
- peer, peer-*
- only (only-child)
- first-of-type
- last-of-type
- only-of-type
- target
- default
- indeterminate
- placeholder-shown
- autofill
- required
- valid
- invalid
- in-range
- out-of-range
Be sure to check out these variants and how to use them with the Tailwind 2.2 Release notes.
Shorthand color opacity syntax #️⃣
There is now a shorthand syntax for adding opacity to colors. Here's a quick example of the traditional way of adding background opacity:
<div class="bg-red-500 opacity-90 ..."></div>
And, here is the new shorthand version:
<div class="bg-red-500/90 ..."></div>
Pretty Colorific 🤙
Per-side border-color utilities 🎨
You can now specify different colors for each border side. Want a yellow right border a black border on the bottom? You could easily do that:
<div class="border-2 border-r-yellow-500 border-b-black">
<!-- ... -->
</div>
A Few Others ➕
There are so many cool things in this new version. Here are just a few more with a short description:
Extended arbitrary value support - You can now specify arbitrary values within your HTML text-[30px] or text-[#ff0000], and Tailwind JIT will determine if the value is a color, size, percentage, or any other value.
Caret color utilities - You can now specify the Caret color inside an input: <input class="caret-red-500" />
Simplified transform and filter composition - You can now add a translate-*, without specifying transform. Any class that relies on .tranform or .filter will automatically add the class.
There are a few more, including Background origin utilities, Improved nesting support, and Built-in safelist, transform, and extract. Be sure to read up about all those on the TailwindCSS 2.2 release notes page.
That's a brief overview of the new features. If you want to watch them in action, be sure to check out the video below 👇.
Watch the video 🍿🥤
The Tailwind team has also put together a brief video of all the new excellent features that you can watch below 🙌.
Conclusion
Tailwind is revolutionizing the way we design websites. It's still pretty early in the game to learn all the awesomeness of Tailwind. Don't get left behind.
Be sure to check out our other posts and tutorials on TailwindCSS here. Happy building and happy designing. I hope you have a fantabulous day 🙌