Less than week ago we got new Tailwind CSS version which is 3.0. This is why in this post I want to talk about new features because some of them are really cool.
If you don't know what Tailwind CSS is, it is a CSS framework. It is quite new and it's idea is that you write no css at all but just use classes from TailwindCSS to style your project. So it's just a hundreds of helpers for CSS.
Now for sure you want to say "But it's not possible to create a project without writing custom CSS". Yes it is completely possible here is my own website where I used TailwindCSS and I wrote zero CSS there. So it's markup is fully created just with helpers of TailwindCSS.
From my point of view TailwindCSS already was really stable and had enough features to use it and when I used TailwindCSS I didn't really need new stuff. But still inside Tailwind 3.0 we got new quite cool features.
Play CDN
The first feature that I want to talk about is Play CDN. And this is an amazing feature which is for sure needed. Previously it was really difficult to "just try" TailwindCSS. It was not like with Bootstrap where you can paste one css link in your html page and you are good to go. It was not possible with TailwindCSS you should install PostCSS, Webpack and it was not comfortable for beginners who just wanted to quickly check what is TailwindCSS at all. They changed it now and here is how we can use it.
<!DOCTYPE html>
<html>
<head>
<title>This is the title of the webpage</title>
</head>
<body>
<script src="https://cdn.tailwindcss.com/"></script>
<script src="main.js"></script>
<h1 class="text-3xl font-bold underline text-red-500">Hello world!</h1>
</body>
</html>
So here I have a plain index.html and in order to bring TailwindCSS inside we simply need to include a script
<script src="https://cdn.tailwindcss.com/"></script>
After this TailwindCSS classes are fully available for us in our html.
So just with a single line we can bring TailwindCSS in any html page just to test how it works and look on it's features. But it is not a script to be used in production because we load too much and it's for testing purposes only.
JIT compilation
The next feature that I want to show you is the best feature in TailwindCSS 3.0. I think that is was really needed and I'm really proud that they implemented it. And it is called JIT compilation.
So what is the deal? Normally when you use TailwindCSS you have a CSS file where you include all things from Tailwind.
@tailwind base;
@tailwind components;
@tailwind utilities;
The main problem is that this lines will get you full TailwindCSS with all it's classes in development mode. And it can be so big that browser can't handle it. This is why the creators of TailwindCSS should be constantly aware about the resulting size and that it will be fine to load in browser.
Creators of TailwindCSS couldn't put in CSS all stuff that they wanted because the resulting file will be too big (12-20 mb in development)
This is why they implemented JIT compilation. The idea is that there is a watcher of Tailwind which checks our project files and injects only CSS which classes we used. For example if we wrote such html
<h1 class="text-3xl font-bold underline text-red-500">Hello world!</h1>
it will load just 5 classes and not 20 mb of CSS. This is super productive because now we can get indefinite amount of new helpers with TailwindCSS as it can be of any size and getting only styles that we need is much faster to recompile and to work with.
Actually even before it was not a problem for production because all styles where purged before creating a production build. So this is simply the improvement of development process.
So how we can start using JIT compilation? First of all we must install CLI of Tailwind.
npm install -D tailwindcss
Now we can use this command through npx. And if you don't know what is npx part of CLI that we get together with node and npm.
npx tailwindcss --output output.css --content jit.html
So here we defined an output file and what file is needed to be parsed in our project. After running this command you can see that output.css was generated. It is not empty. We get there 400 lines with reset CSS styles which we need in any project. But it doesn't include and CSS helpers yet.
Now let's add our classes to jit.html
<!DOCTYPE html>
<html>
<head>
<title>This is the title of the webpage</title>
<link href="./output.css" rel="stylesheet" />
</head>
<body>
<h1 class="text-3xl font-bold underline text-blue-400">Hello world!</h1>
</body>
</html>
Now after running the command we got also our 5 classes which we used here. So Tailwind parsed our content and added to output file only CSS that we need.
And if you think now how it is different from Play CDN from previous feature it is normal local development. We don't load the whole TailwindCSS here. And it is extremely fast. And if you need you can use this command in watch mode which will change the output file every single time.
Color palette
The next cool thing in Tailwind 3.0 is that we get more colors out of the box. And actually it is happening because of JIT compilation. Because now the creators of Tailwind can put much more stuff inside Tailwind itself. This is why we get all extended colors out of the box. As you can see here we have quite a lot of colors to choose which is really awesome.
Colored box shadows
One more cool feature that we get in Tailwind 3.0 is colored shadows and this is really easy to implement
To create such button we must set classes bg-cyan-500, shadow-lg and shadow-cyan-500/50. And in a matter of seconds you have colored shadows.
<button
class="py-2 px-3 bg-cyan-500 text-white text-sm font-semibold rounded-md shadow-lg shadow-cyan-500/50 focus:outline-none"
>
Subscribe
</button>
Snapping
Also in Tailwind 3.0 we get snapping out of the box. To use it we must set snap-x on our parent and snap-center on every child. In this case one of our images will always be centered no matter what.
Printing
Now we come to feature which is nice to have but we don't need it every day. But it is cool to get even such features from Tailwind out of the box.
<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>
As you can see here we have a new attribute print which will be applied only to print the document. Which means if you want to print something you can hide unnecessary information to focus only on needed things.
Colored underline
The next cool feature is colored underline text.
<p>
I’m Oleksandr, a developer in Germany. I like to teach people at
<a href="#" class="underline decoration-sky-500 decoration-2"
>Monsterlessons Academy</a
>. Outside of work, I like to
<a
href="#"
class="underline decoration-pink-500 decoration-dotted decoration-2"
>do sport</a
>
and spend time
<a
href="#"
class="underline decoration-indigo-500 decoration-wavy decoration-2"
>with family.</a
>
</p>
As you can see here we use 3 new attributes decoration-color, decoration-type and decoration-width. This is all you need to implement different colored underline.
Aspect ratio
And the last feature that I want to show you is aspect radio.
<iframe
class="w-full aspect-video"
src="https://www.youtube.com/embed/-8qfwR-ANDk"
></iframe>
As you can see here we can set for iframe aspect-video property which will maintain correct radio with any size of the video out of the box.
Conclusion
I'm extremely satisfied with new Tailwind version. And if you didn't use Tailwind for your project I highly recommend you to try it out. Also if you are interested in rules to avoid pitfalls in programming make sure to check this post also.