Hey everyone, I am Vikas Rai and welcome to my new post. In this article, I'll show you some of the exciting new features that come in Tailwind CSS v3.0.
So Tailwind CSS v3.0 just got released on 10 Dec 2021 and has brought a lot of new features and much other helpful stuff, so let's have a look at those features.
Here is the list of those features and we are going to discuss each feature in detail with some examples as well.
Just-in-Time, all the time
The new Just-in-Time engine has now replaced the classic engine which means that stairway 3 gets a huge performance boost and new features like stackable variants , arbitrary values , and more.
More new colors out of the box
Color palette enabled by default that's a total of 22 colors including 5 grays which have been renamed to better coexist colors was one of the main contributors to file size ballooning in tailwind 2, but now in tailwind 3 thanks to the new just in time engine, we don't have to worry about that anymore.
22 new colors were added to the color palette:
Colors pallete by tailwind CSS
Now provides 5 different shades of gray as well 😍:
Gary-Colors Pallete by Tailwind CSS
Colored box shadows
Colored box shadows are often used while maki UI design, but the previous Tailwind CSS version doesn't provide them.
But that's the not case anymore, the Tailwind v3.0 brings these new features of Colored box shadows.
Here is an example of a colored-box-shadow style applied on a button:
Colored-shadow button
Here is link to the code if you want to play around with it:
Print modifier
The new print variant lets you bring modifications to your designs and get them ready for printing.
Through this feature, you can customize your web page for print, which means you have control over what you want to include or not in the webpage if we want to print it.
Native aspect ratio
Now there is no use of any plugins to maintain the aspect ratio of various elements in our webpage like video, image, or any other thing.
Now we can use the various types of utility-class like aspect-video , aspect-auto , aspect-square , or use custom values like aspect-[9/6] as JIT is now inbuilt.
Comprehensive scroll snap support
This is an amazing feature that allows users to have a list of scrollable elements which snap to center, start, or end of the list.
This feature enhances the UX of a website and can be easily implemented using this simple class-utility snap-always or use the snap-center utility to snap an element to its center when being scrolled inside a snap container.
Use the snap-always utility together with the snap-mandatory utility to force a snap container to always stop on an element before the user can continue scrolling to the next item.
Here is a little video demo of what it looks like:
Here is the code as well, so that you can use it:
<div class="snap-x flex overflow-scroll mt-20">
<img
class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
src="images/src"
/>
<img
class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
src="iamges/src"
/>
<img
class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
src="images/src"
/>
<img
class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
src="images/src"
/>
<img class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"src="images/src" />
<img class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5" src="images/src" />
</div>
Just visit this link you will get the code to play around and as well as a quick demo: tailwind play
Scroll behavior
You can now add smooth scrolling in tailwind CSS by adding the scroll-smooth class.
This utility is used for controlling the scroll behavior of an element.
If you want to add margin to some places for scroll, it can be done by suffixing margin value to scroll class, like scroll-m-4 and you can add using scroll-auto class as well.
Multi-column layout
Tailwind now provides multi-column/newspaper-like layouts!
This layout can be easily implemented by providing the number of columns you need or just setting it to auto for the browser to decide how many columns to use based on size.
To control the gutter gap you can simply provide the class like gap-x-5 which will provide a gutter gap of 1.25rem. you can change the values as you need.
Here is what it will look like:
Here is the link to the code:Tailwind CSS playgound.
Accent color & file inputs
Now you can easily customize the native form elements like the file upload button, checkboxes, radio button to match the theme color of your brand with the Tailwind CSS v3.0.
You can implement this by just adding one class which is the accent-- to the form tag or the div tag.
Here is what it looks like:
Before:
Html form using Tailwind CSS1
After applying accent class :
Html form with customized colors using Tailwind CSS2
Now we will see how we can customize the file upload button, to apply styles to the file element just prefix the styles like this file:bg-violet-500, file:font-semi-bold that you want to apply.
So, after applying all these classes,
file:mr-6 file:py-2 file:px-4 file:bg-violet-200 file:font-semibold file:border-none file:rounded-full file:text-violet-700 hover:file:bg-violet-400
This is how it's look's like:
Html form with customized colors using Tailwind CSS3
Here is the link to the completed code for the above example: Tailwind CSS Play
Styling open/closed states
This feature is amazing as you can style the open/closed states by just adding class open and suffixing the style that you want after the class open, just like this open:shadow-2xl or open:bg-violet-500.
Here is what it looks like in this example, as you open the details box you will see a box-shadow is applied, and also the background color changes.
Before applying to the class :
an html component design using Tailwind CSS
After applying to the class :
an html component design using Tailwind CSS2
Fancy underlines
This feature will help to provide more text decorations to text. Tailwind CSS v3.0 brings some fancy text-decoration elements with it.
You can change the colors of this text decoration as well.
Here are those text-decoration classes: decoration-color-400 ,decoration-solid ,decoration-dashed ,decoration-wavy and many more.
It will look like something this:
Before applying the class:
Html component Image
After applying the class:
Html component Image2
You can take a quick look to see how it will look: Tailwind CSS play .
Play CDN
The new play CDN gives you all the power of Tailwind CSS via a simple script tag in your document heads so that in a HTML page you can add a script tag that points to cdn.tailwindcss.com and then you have the access to the full power of tailwind CSS.
Just add this script tag in your HTML file and you have the full power of TailwindCSS.
<script src="https://cdn.tailwindcss.com"></script>
And if you want to change and customize the config file, you can do this in a simple way like this:
<script>
tailwind.config={
theme:{
extend:{
colors:{
"fancy-blue":"#1E90FF"
},
},
},
}
</script>
You can also write custom CSS inside the tag.
<style type="text/tailwindcss">
.btn-custom{
@apply bg-violet-300 w-40 px-4 py-2 rounded-full text-violet-700 font-semibold hover:bg-violet-400;
}
</style>
Conclusion
The tailwind CSS v3.0 has more features that I have not covered in this post. I just covered some important features.
This is the best release of 2021 and also the Next.js v12.
If you want to more about the release do check out the docs at TailwindCSS docs and if you like to see video tutorials then here is the official release video by TailwindCSS labs.
Thank you so much for your patience in reading, if you like this article plz share it with your friend and in your social groups. I will see you in another amazing post, till then stay safe and keep learning and practicing new things.✌️
Some useful links:
Tailwind CSS v3 Video tutorial by TailwindCSS Labs
Follow me on :
More articles to read:
Top comments (0)