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)
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.
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?
I have not actually. I'll look for it in the docs but I would love to read your write up on it!
Cool Thanks , Soon ☺️
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. 😀
Thanks a lot, buddy :)
waiting for your blog also :D
Sure :p
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.
Great,
Sure share me your articles. I would love to read more.
I've been writing a lot about tailwindcss :D
dev.to/maurogarcia_19/setup-your-a...
dev.to/maurogarcia_19/4-useful-sni...
dev.to/maurogarcia_19/3-reusable-c...
dev.to/maurogarcia_19/server-side-...
dev.to/maurogarcia_19/tailwindcss-...
Great I'll check all :)
Thanks
I loved the blog bro! ❤️
Best Dev From UP
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
Thank You 😊💎
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.
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
🎉
Thankyou! 🙏
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!
Yeah, sure 🙂
It's good to find that you liked it.