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
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
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 (26)
what exactly does this actually do? just add tailwind as a package in the
package.jsonfile?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.
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.
Woah, mind blown! Thanks for this!
Don't forget to support my open-source work by starring the repo 🙌🏻
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 ;-)
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?
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.jsto 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.Wow, great 👍
Thanks!
Wow omg
🙌🏻
Thanks a lot this will definitely save my time, but i got a question for you, will this create latest tailwindcss version?
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.
That's great
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
Noice. Guess the rest of the frameworks are behind. Gave me a chance to become their knight in shining armour 😆
Tailwind is amazing . I love it ! it's so lightweight and easy to use .
Ikr.
Well Done Dude!!, that's a Real Timesaver
Thanks! Do star the project on GitHub 🙌🏻
Now this is a quality article. Nice job!
Thanks! Don't forget to star it on GitHub 🙌🏻