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 🤞🏻

Discussion (27)

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
msaaddev profile image
Saad Irfan Author • Edited

@yaireo I agree to disagree here. If what you are describing is the case then no one here would have understood what the package does. Someone here mentioned that this kind of thing has already been implemented for Svelte. If that guy didn't understand what this is then I am not sure how he compared this tool (which is more like universal tool for almost all the Tailwind supported apps from their documentation) with Svelte's one. Doesn't mean if you couldn't get it then the others also didn't.

Secondly, the repository clearly defines what the CLI do. Kindly go ahead and read the features in the readme file. You will see I have written Generates basic tailwind app with HTML & CSS boilerplate code or Generates React.js tailwind app, etc. Everyone here who liked, saved, or gave this post a unicorn understood that. Also, I did included a screenshot of help section in the readme as well as in this post which clearly says what the CLI do, for instance, Generates boilerplate of a Next.js Tailwind App.

The CLI is built like the same way create-next-app or create-react-app has been written. You are a developer I am sure. If you have doubts, instead of trashing someone's efforts, go ahead and read the code if you have concerns. Then if you did have a problem of how this is unsafe then bring it here then. It's not a black box. It is open-source.

This is open-source software. None of the software you use comes with a guarantee that they are safe. Otherwise, npmjs wouldn't have existed. Those of us who do open-source (I saw your GitHub. You do too) take out time and spent on something that we are planning for everyone to use for free.

Kindly next time, do not nullify someone's effort like you did today.

Peace ✌🏻

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
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 Author

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 Author

Thanks!

Collapse
m0nae profile image
Monae Payne

Woah, mind blown! Thanks for this!

Collapse
msaaddev profile image
Saad Irfan Author

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

Collapse
sidcraftscode profile image
Siddharth Chaudhary

Wow omg

Collapse
msaaddev profile image
Saad Irfan Author

🙌🏻

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 Author

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 Author

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 Author

Ikr.

Collapse
mvp1931 profile image
Mvp1931

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

Collapse
msaaddev profile image
Saad Irfan Author • Edited

Thanks! Do star the project on GitHub 🙌🏻

Collapse
bvdalling profile image
Brent Dalling

Now this is a quality article. Nice job!

Collapse
msaaddev profile image
Saad Irfan Author • Edited

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

Collapse
anjil0000 profile image
Anjil bishowkarma

new cli seems dope, your views?

Collapse
msaaddev profile image
Saad Irfan Author

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/