Why tailwindcss is addictive?
In order to keep things not so long and tedious I can start at the point where I started using bootstrap. For someone who just started to play with CSS to style not so complicated web pages learning bootstrap was something beneficial. As far as I remember this was my first experience using a framework for web development and bootstrap made it a simple and enjoyable process. As anyone who is into web development knows, It is the most popular HTML, CSS and JS library for a reason.
From pasting the cdn link to import bootstrap to my project and pasting the code from the bootstrap docs to my HTML file to overriding the styles provided by bootstrap using my own style sheet(I still did not seriously invest my time learning Sass) I got comfortable using CSS and bootstrap. Somewhere I knew I am not going to stick to bootstrap just because it is very popular(sometimes I like to stand in a corner where the noise is less). I must admit I did not find any major fault in bootstrap and I don’t feel myself qualified to criticize bootstrap.
Although I work in IT, I am pleased to say I have no contact with professional developers which means I don’t have many friends who can criticize my code. In Order to get some useful inputs from professional developers, I started listening to some podcasts. I heard about tailwindcss from one such podcast called “HTML All the things’’ podcast hosted by Matt and Mike, which is a very good one by the way. The point they told and I remembered is it is not possible to tell why tailwindcss is so good. You have to use it long enough to fall in love with it and then try not using it at some point to understand how good it is.
If you are considering trying this utility based CSS framework, the tailwind docs is the best way to get you started. The docs are excellent which is a good indicator that the project is well maintained. At first as with bootstrap I copy pasted the cdn link to import tailwindcss to my project. The long list of class names I added to my HTML file was unpleasant to look at but I managed to not say goodbye tailwind too soon.
The docs encouraged me to set up my project using npm and it was good enough to guide me through the setup process with ease. I used it with postcss, the recommended way according to the docs. So what is postcss is something I don’t wish to answer here because this blog is not about postcss and most importantly I don’t know what postcss is. The only thing I know about postcss is, it is to CSS what npm is to javascript.
I still remember the first time I fell in love with tailwindcss. It was the first time I successfully set up the purge option of tailwindcss. So basically after you finish doing the project and if you set the NODE_ENV to production instead of development, it automatically removes all the unused CSS classes and thus gives a much reduced CSS file size. Setting up purge option is as simple as editing the configuration file(tailwind.config.js) of tailwindcss. This configuration file is where you go to add more custom classes to your tailwindcss build. The unminified final CSS build of my project turned out to be around 10kb after setting up purge. Not too bad right.
Say if you want to add a new text color to your CSS build. Open tailwind.config.js and add the following lines under themes object.
textColor: {
‘primary’: ‘#3490dc’,
}
The customization is simple to configure and so powerful in the case of tailwindcss. Yet it is not like I need to customize tailwindcss every time I am using it in some project. Whichever classes are provided by the default build is more than enough for most of my needs and only a few times I went on to add something mostly for some new color or for a new screen height option. After editing configuration file for enabling purge usually I leave it as such because the default class list is extensive.
Some people find tailwindcss repulsive because it makes the HTML file very large with plenty of class names. I too had the same feeling but kept on using tailwindcss because of no particular reason. Recently I had to code in CSS without using a framework and I found it really difficult to manage the CSS file. I had to constantly go to developer tools to find where exactly I should use a style to change a particular element. I missed tailwind so badly while coding in regular CSS.
Tailwindcss is dope because may be the first time you use it, you’ll see how pointless it’s philosophy is. It is like going back to inline styles after using external style sheets. The magic of tailwind is inexplicable in a sense that I haven’t completely figured out how to explain to someone or even myself why it is good but whenever I don’t use it I certainly miss it.
It is addictive but in a good way I hope.
