DEV Community

Cover image for Tailwind CSS User? Read this!
Saad Irfan
Saad Irfan

Posted on

Tailwind CSS User? Read this!

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. You see folks when I started my journey with Tailwind, I went to the place where all the secrets lie when it comes to any framework or library. And yeah! you guessed it right. The holy documentation. 👨🏻‍💻

I opened the Next.js Tailwind set up guide and found out that that there were a bunch of steps that I needed to perform in order to get started with this beauty. And just like you, I did all the steps and voila! I had Tailwind integrated with my project.

After this, I started reading documentation and found out that the setting up process of Tailwind varies from framework to framework. So now, if you want to use Tailwind with your React.js project after using it with Next.js, the same setup steps won't do the trick.

Turns out I really hate when I have to spend an extra minute or two to get started with something. So like any other developer, I used my magic prowess to automate the crap out of it. And voila! Here comes the era of new-tailwind-app.

⚡️ new-tailwind-app

So, new-tailwind-app is a zero-configuration cross-platform tool that can integrate Tailwind with six different kinds of web frameworks using a single command. Yeah! I know. Magic, right?!

All you need to do is have Node installed in your computer and from there I got you covered. Just run the following in your terminal, and you are good to go:

npx new-tailwind-app@latest 
Enter fullscreen mode Exit fullscreen mode

You can see all the supported frameworks by typing the following command in the terminal.

# see all the features you get with the CLI
npx new-tailwind-app@latest --help
Enter fullscreen mode Exit fullscreen mode

help

And that's a wrap, folks! If you find this tool useful, don't forget to star it. Now go ahead and utilise the power of open-source to do good and save yourself some time.

Cheerios 🤞🏻

Top comments (28)

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/