The Tailwind CSS version 3.0 was released on the 9th of December 2021. I have been using Tailwind CSS ever since it was first released and love it. I saw some promotional videos on their official site regarding all the new features in the new update and it looked very promising. Today I decided to try out some features from the new version for the first time. So I made a very simple Product Landing Page and integrated some of the new features from the update. Here is how I made the page using Tailwind CSS v3.0 and which features I used in the process. I will focus on the new features I used. Since I just wanted to just try tailwind CSS 3.0, I just dragged and dropped different components using a VS Code extension named blox. Here are some new classes that I liked.
decoration-wavy
This class in combination with decoration-[width], decoration[color] can be used to modify the link underlines. It can make them wavy or dotted.
<li class="md:mr-6 cursor-pointer pt-4 lg:py-0"><a href="javascript:void(0)" class="underline decoration-indigo-500 decoration-dotted decoration-2">About </a></li>
Here you can see I used the decoration class with the “About” link.
Colored shadows
As the name clearly suggests this cool class gives different colored shadows to your texts. One can use that for the links or maybe the headings if you want. It is used like “shadow-lg,shadow-cyan-500/50”
<a href="javascript:void(0)" class="hover:shadow-lg shadow-lg shadow-cyan-500/50 mr-4 focus:outline-none rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-gray-600" aria-label="download on the app store"><div class="">
Here is the result in the output.
Portrait and landscape modifiers
This class gives you the liberty of conditionally adding styles based on the viewport orientation. It can be used in the following way:
Portrait: hidden
Landscape: hidden
<div class="container mx-auto landscape:hidden">
Print:hidden
The new ‘print’ modifier lets us style how our website should look when people print it. This could also be used as a security feature. Eg: print:hidden will hide the sensitive content when printed.
<div class="mx-auto container py-12 print:hidden">
Arbitrary values
This square bracket notation can be used when we are desperately in need of a value that tailwind doesn’t provide.
For Example, I have used the font-size 22px using arbitrary brackets in my project.
<p class="text-base leading-6 mt-4 text-[22px]">Our core values are at the heart of all that we do. They are integrated into our daily work lives and help us to remember our customers always comes first, the last thank you should always comes from us.</p>
My Thoughts
Being a fan of tailwind my opinion would be biased. I love how they are making css easier and easier. This version has only made tailwind css better than ever. I personally love the fact that I can use custom font size now. Do let me know what you think about the latest Tailwind Update.
Top comments (0)