Intro

The big release is here, Tailwind 2.0 is out. You must have already heard about it and that's how you must have landed on this article. But, if you have not then also you are at the right place. I am going to tell you a few very important points about why you should use this CSS framework.

Tailwind has already brought a big change in mindset of CSS development. HTML now control how they look instead of the CSS styles attached to class. Now, if Tailwind was radical in itself, Tailwind 2.0 can blow your mind.

As the framework says, it's an API for your design system. What this means is, the CSS is already written for you. The cross browser compatibility and responsive behavior everything is already thought through. What you need to do is to use those CSS classes and create your components. You don't need to write any CSS or Less or SASS. Everything is already done for you.

Tailwind help me structure my Markup and my components better. I know which container handles the layout aspect of the component and which one controls the look and feel.

The color palette

Tailwind comes with so many great features. The color palette is one such thing. They have provided a lot of colors, and they look so great and this makes my life easy. Now, I don't have to spend time thinking about good colors, what hex color or play with color pickers. I use things which comes with the default config file. For example, in the color palette they have almost 50 shades of gray. Check this link for reference.

The super cool dark mode

If you don't want your site to blind your user's eye when the OS is running on dark mode, Tailwind is there to help. With the help of Dark Mode condition, you can control the background color and text color of a component. This will allow you to control the look and feel of the same component in a different mode. With more and more sites giving importance to this feature, this is a nice option under your belt. To know more about this feature and how it works, you can click on this link for more information.

Transforms and Gradient support

One of the very interesting add on to the new version is the Transform and Gradient. The API provides a very nice way of adding gradient to containers using simple classes. Like "from-organge-400" to "to-pink-400". Now, the amazing thing about this patter is that we can control the same using code. We can change the gradient on different sizes of screen. And, last but not the least a different gradient for different states for different states of a component. A simple example of gradient can be found here

A very tiny file size on production

With a robust build process, the final build will only have the classes which I am actually using. Which means, the minified version of the CSS file doesn't have those classes which we are not using. And, this results in a very small file size on production. This is a killer feature. I know that I have used the entire Bootstrap library (minified version) on my project. But, I know that I don't use even half of the classes. But, the final minified file has those classes.

Animations

This version of Tailwind has added animation classes and for me this is a great add-on. I rely a lot on Animate.css for certain small animations that I wanted to add to my UI. Now that I have such animations baked into the core framework, it's now one less library to depend on. Animations like pulse, spin are very helpful in defining various states of your components. And, I am sure they are going to come up with more animations.

A huge list of components

Tailwind also comes with a Component library (Tailwind UI) which has a both free and paid UI components. They have a huge list already and the author has mentioned that they are still working on it. This is a good way to build a strong library of components for any company. The designers already know what all components and their variations are available. And, the design is being developed with this list in mind. And, if we are creating something new then we add that to our list of reuse-able component library as well. You may also want to see Storybook.js which can help a lot in creating and maintaining your library of components.

Play with Tailwind CSS

Last but not the least, Tailwind also has a Playground which you can find here: Play with tailwind. It will allow you to play around with the classes available without any setup. Create components outside your own build process or you can ask someone to help you out with something. And, that person can help you do that using this site and share that with you. It is almost like the Codepen for Tailwind.

With all these advantages, I have only described the tip of the iceberg. You will love this framework once you start exploring Tailwind. And, if you are someone like me who works with JavaScript a lot but not very comfortable with CSS then this framework is going to help a lot. So, why don't you give this new version a shot and share your experience with me. You can find me on Twitter @amitavroy7.