DEV Community

Cover image for Tailwind CSS User? Read this!

Tailwind CSS User? Read this!

Saad Irfan on June 24, 2021

So, if you are like me, a frontend developer who loves to work with Tailwind CSS, then this article may just save you a minute or two in the future...
Collapse
 
yaireo profile image
Yair Even Or

what exactly does this actually do? just add tailwind as a package in the package.json file?

The github doesn't say what is this actually for. Who knows what does this repo installs for you, it's unsafe to use random things like this from the internet without explicitly understand what does it comes with and what is installed and how.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
saadhaxxan profile image
saadhassan

We need to promote the culture of automation to help faster the development of applications. You did a great job this will save someone's time.

Collapse
 
m0nae profile image
Monae Payne

Woah, mind blown! Thanks for this!

Collapse
 
msaaddev profile image
Saad Irfan

Don't forget to support my open-source work by starring the repo 🙌🏻

Collapse
 
andre_adpc profile image
Andre Du Plessis

Hey, @m0nae! Thanks for putting me on this trail! and @msaaddev for going to the trouble of building a handy tool for use with Tailwind! I'm liking Tailwind more and more the deeper I dig into the fact that you can use it on a whim or as the foundation CSS framework for your projects. Your contribution is appreciated. And I will add some "sparkles" on your GH repo once fired up and putting smiles on dials ;-)

Collapse
 
psnehanshu profile image
Snehanshu Phukon • Edited

I am working on a Next.js + Tailwind project. In local everything works fine, but after building, some classes aren't included in the bundle, and thus my site looks little different in production. It turns out that it is because of PurgeCSS, but I couldn't fix it, hence I just disabled it altogether. I haven't also done any string concatenation in class names, so PurgeCSS should have been able to pick them up, I don't know what's wrong.

Does your tool takes care of this? Will it prevent used classes from being excluded from the production build?

Collapse
 
msaaddev profile image
Saad Irfan

Hey! This tool just sets up different apps, for instance, Next.js app with Tailwind according to the official documentation.

According to official documentation. we need to update purge value from tailwind.config.js to remove unused styles in production if we want to. I have implemented this thing. So I am not sure if this tool is going to help you out much.

Collapse
 
udanaudayanga profile image
Udana Udayanga

Wow, great 👍

Collapse
 
msaaddev profile image
Saad Irfan

Thanks!

Collapse
 
sidcraftscode profile image
sid

Wow omg

Collapse
 
msaaddev profile image
Saad Irfan

🙌🏻

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

Thanks a lot this will definitely save my time, but i got a question for you, will this create latest tailwindcss version?

Collapse
 
msaaddev profile image
Saad Irfan

As a matter of fact, yes. I have coded the whole thing in a way that if a new version of tailwind is available, the tool will use that latest version.

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

That's great

Collapse
 
davidwparker profile image
David Parker

Surprised to see this isn't already a thing in React. In Svelte, there's an entire system to quickly add common things- github.com/svelte-add/tailwindcss

Collapse
 
msaaddev profile image
Saad Irfan

Noice. Guess the rest of the frameworks are behind. Gave me a chance to become their knight in shining armour 😆

Collapse
 
safouene1 profile image
Safouene Turki

Tailwind is amazing . I love it ! it's so lightweight and easy to use .

Collapse
 
msaaddev profile image
Saad Irfan

Ikr.

Collapse
 
mvp1931 profile image
Mvp1931

Well Done Dude!!, that's a Real Timesaver

Collapse
 
msaaddev profile image
Saad Irfan • Edited

Thanks! Do star the project on GitHub 🙌🏻

Collapse
 
brentdalling profile image
Brent Dalling

Now this is a quality article. Nice job!

Collapse
 
msaaddev profile image
Saad Irfan • Edited

Thanks! Don't forget to star it on GitHub 🙌🏻

Collapse
 
anjil profile image
Anjil bishowkarma

new cli seems dope, your views?

Collapse
 
msaaddev profile image
Saad Irfan

Didn't get what you are asking.

Collapse
 
akulsr0 profile image
Akul Srivastava

Nice. This can definitely help me.
I have made this app for beginners to learn Tailwind through demos.
Contributions are more than welcome on this. 🙂
tailwind-demos.herokuapp.com/