Scope of TailwindCSS
Tags: tailwindcss, css, frontend
Published: 2020-04-04 11:13:59

Hello everyone, I am Naveen Kharwar. I am a student as well as a programmer by passion. Being in quarantine I've got a lot of time so instead of wasting it in boredom, I decided to invest it in brushing up my blogging skills. Hence, I decided to write this blog.

So, I am writing this blog about my experience with TailwindCSS.

According to the offical website, TailwindCSS is a utility-first CSS framework for rapidly building custom designs. Some developers don't like it because it makes the HTML/JSX or any markup look busier. But I found it cool as I don't have to write any single CSS for a website it doesn't matter if it's a big as E-commerce or just a simple landing page.

TailwindCSS is available as CDN as well as the NPM module. To take full advantage of Tailwind’s features I recommend you install it with NPM. Check more about the installation [here](https://tailwindcss.com/docs/installation/).

With TailwindCSS you have full control over your component not like Bootstrap. You will not get ready-made styles classes you have to create your own.

Let me show you an example of a button:

{% codepen https://codepen.io/naveenkharwar/pen/VwLONop default-tab=html,result %}

> Wait a minute! WTH, I have to write that many classes for just a button but...but...but...let me explain why is this helpful.

### 1. Customization

TailwindCSS comes with default design but with the use of its config file `tailwind.config.js` you can customize everything from the size of the container to color, font, font size, etc. 

### 2. Size

We are in 2020 we are now more focused on performance rather than CSS Framework look at the size of the Bootstrap Gzip file is around 22.7kb 😲 just a CSS framework, and after that, you write your CSS o meet your website look same as design.
and in TailwindCSS we use PurgeCSS, what PurgeCSS do is it scan your HTML and remove the CSS which are not being used after PurgeCss  the tailwind CSS file generated is around 10kb to 15kb except if you are adding your CSS

### 3. Responsive

No need to write media queries for responsive design, Yep Yep with TailWindCSS you don't need to write any media queries to meet responsiveness you can achieve this by prefix the utility with the break-point name, followed by a semicolon same goes with hover state.

{% codepen https://codepen.io/naveenkharwar/pen/dyoELrp default-tab=html,result %}

### 4. I hate naming things

With TailwindCSS you don't need to worry about naming your CSS classes no naming. with the TailwindCSS Utility class mostly you don't need to write any name unless you are not writing your custom style.
about 98% you don't need to write CSS.

### 5. Increase development 
When you are not writing CSS it directly increases your productivity you can have more focus on your development rather than writing a name like `.i-dont-like-naming-css`.

## Conclusion

That's all I have experienced the TailwindCSS if these benefits seem interesting to you you should give TailwindCSS a try.
I'll provide some link here that will help you with TailwindCSS :)

- [Official Documentation](https://tailwindcss.com/docs/installation)
- [Screencasts](https://tailwindcss.com/screencasts/)
- [Tailwind CSS Tips, Tricks & Best Practices](https://www.youtube.com/watch?v=nqNIy8HkEQ8)

Let me know what you feel about TailwindCSS in the comment. I like to know what others feel about Tailwind CSS
Well, this is the first blog of mine I'll continue writing about my learning here 😃

Thank You, Akshat Gupta, for the cover image.
Check his designs [Akshat Gupta on Behance](https://www.behance.net/helloakshat)
Adding to this I like to thank my two friends who helped me in writing my first blog [Aditya Vikram Singh](https://www.blogsgeek.com/aditya-vikram-singh/) and [Sneha Omer](https://sassyecoder.github.io/).