My 6 Favorite Tailwind v3 Features
is out now and with it comes some nice features. The Tailwind team really pushes forward making Tailwind the best styling experience.
They also made this amazing launch video:
To install Tailwind v3:
npm install -D tailwindcss@latest postcss autoprefixer
There are great feature that didn't make this list like:
There's a lot to talk about, but let's talk about my favorite features.
Tailwind's Just-in-Time features have been in beta for a while now. They gave us the ability to create custom values like
Now they are turned on by default!
One of my favorite ways to create a cohesive design is to match the colors. This means you're putting shades of blue everywhere instead of having white text on a blue background.
It's subtle but the result is a less jarring text. It's like using a dark gray on a white background instead of #000 on a white background.
Now we can do the same with. It's subtle but adds a nice effect.
<!-- yellow box shadow with a 70% opacity --> <button class="... shadow-lg shadow-yellow-500/70"> Whoa Yellow Box Shadow! </button>
We even have the ability to set the opacity of the box shadow with the
/70 at the end of
Something that used to take a lot of work with some pseudo class elements is now done with a few. We can have squiggly underlines!
<span class="underline decoration-double decoration-sky-500">amazing</span> <span class="underline decoration-wavy decoration-indigo-500">already favorite</span>
is a really cool feature. We can build out masonry-style grids with just a couple Tailwind classes.
<div class="columns-4"> <img src="" /> <img src="" /> <img src="" /> <img src="" /> </div>
Just like theand classes, I love that you only have to add classes to the parent element to get this to work. This means you can move the children around with minimal changes in your code.
This has always been a pain for me, especially working with videos here on
w-[1080px]. Now we have a .
<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>
Instead of adding the entire Tailwind CSS stylesheet using a
<link> tag, we can now include a
<script> tag that includes the .
Just add this script to any project and you can start to work with Tailwind. You are able to use all Tailwind features with this including things like
hover: and Just-in-Time arbitrary values like
Tailwind was already my favorite CSS framework and to see the team being innovative and not resting on their success makes me happy to continue supporting! Love the new features and congrats to the team on the launch!
Want to improve your coding and design skills?
I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.
We value your privacy. 1-click unsubscribe.
Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.
In this article...
What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)