DEV Community

Cover image for Scope of TailwindCSS
Naveen Kharwar
Naveen Kharwar

Posted on

Scope of TailwindCSS

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.

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:

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.

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 :)

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
Adding to this I like to thank my two friends who helped me in writing my first blog Aditya Vikram Singh and Sneha Omer.

Top comments (21)

Collapse
 
sergix profile image
Peyton McGinnis

I love Tailwind and have been using it in the last few frontend projects I've been working on and will undoubtedly continue to use it in the future.

While the focus of Tailwind is to speed up developer productivity and speed with its utility classes, which it certainly accomplishes, I've noticed how much it coerces me not to write any CSS. Sometimes, I'll spend forever looking for a utility class or way to do something in Tailwind that would be much easier to write in plain SCSS.

Collapse
 
naveenkharwar profile image
Naveen Kharwar

I am planning to write more about Tailwind where I'll explain how I took full advantage of TailwindCSS.
Have you read about Functions and derivatives in TailwindCSS?

Collapse
 
sergix profile image
Peyton McGinnis

I have not actually. I'll look for it in the docs but I would love to read your write up on it!

Thread Thread
 
naveenkharwar profile image
Naveen Kharwar

Cool Thanks , Soon ☺️

Collapse
 
helloakshat profile image
Akshat Gupta

Thanks for encouraging me to use Tailwind CSS, earlier I was using CSS with SCSS but now I m looking forward to use. I really loved your blog, writing skills are impressive, and intractive.
Really enjoyed your blog, looking forward for more blogs from you. πŸ˜€

Collapse
 
naveenkharwar profile image
Naveen Kharwar

Thanks a lot, buddy :)
waiting for your blog also :D

Collapse
 
helloakshat profile image
Akshat Gupta • Edited

Sure :p

Collapse
 
mauro_codes profile image
Mauro Garcia

Hey Naveen! Congrats for this post! Super easy to read and complete!
I've been using tailwind for years! (since the beta) and, as you said, I cannot go back to write plain css anymore :D. Once you know how to combine the utilities, you can easily build complex UI in minutes!

If you have some time, I would like to know your opinion about some articles I wrote about tailwind last year.

Collapse
 
naveenkharwar profile image
Naveen Kharwar

Great,
Sure share me your articles. I would love to read more.

Collapse
 
mauro_codes profile image
Mauro Garcia
Thread Thread
 
naveenkharwar profile image
Naveen Kharwar

Great I'll check all :)
Thanks

Collapse
 
harsh98trivedi profile image
Harsh Trivedi

I loved the blog bro! ❀️

Collapse
 
imswarnil profile image
Swarnil Singhai

Best Dev From UP

Collapse
 
naveenkharwar profile image
Naveen Kharwar

Thank You Man 😊
BTW I am hosting an Online Meetup about Tailwind CSS if you are interested you take RSVP.

Check out this Meetup with kanpur.js meetu.ps/e/J55lN/zKQfg/d

Collapse
 
naveenkharwar profile image
Naveen Kharwar

Thank You πŸ˜ŠπŸ’Ž

Collapse
 
hamzanouali profile image
Hamza Nouali

I use Tailwind for my simple websites, but I can't use it for big projects where I work with a designer, since writing custom CSS alongside with Tailwind is considered as bad practice (take a look at their docs). Also, it's limited and can't be used everywhere.
Tailwind CSS is cool and useful for some cases, but it can't be an alternative to CSS or Bootstrap, etc.

Collapse
 
naveenkharwar profile image
Naveen Kharwar

IT's a Utility Framework. You don't need to write any CSS alongside with Tailwindcss check out function and derivatives that comes with Tailwind CSS

Collapse
 
kumareth profile image
Kumar Abhirup

πŸŽ‰

Collapse
 
naveenkharwar profile image
Naveen Kharwar

Thankyou! πŸ™

Collapse
 
mukulyadav49 profile image
Mukul Kumar Yadav

Hi Naveen,
Nicely written, I personally enjoyed your view on how Tailwind and I'll check out out to see it's performance improvements.
Cheers!

Collapse
 
naveenkharwar profile image
Naveen Kharwar

Yeah, sure πŸ™‚
It's good to find that you liked it.