How To Scaffold Tailwind CSS Projects
Whether is to test a new JavaScript framework, work on a freelance project, or simply to scaffold a new project at work, it always takes a few minutes to get going. You need to find and install required dependencies, add config files, configure your framework, etc.
If you’re like me who needs to create new Tailwind CSS projects quite often, and you don’t want to waste your time setting them up every time you create a new one. Here’s what you can do.
Use Create Tailwind CLI
Scratching my own itch, I’ve built Create Tailwind CLI. It uses popular scaffolding tools like create-next-app, create-vite, etc., to scaffold projects and then configures TailwindCSS to work with your project out of the box.
The easiest way to get started with Tailwind CSS
Start the CLI by typing one of the commands bellow. After that you only need to fill in a couple details and that’s it! The whole process takes around 20 seconds, including dependencies installation.
// npx
$ npx create-tw@latest
// Yarn
$ yarn create tw
// pnpm
$ pnpm create twSupported Frameworks & Project Types
It doesn’t contain it’s own templates to scaffold projects. Projects are scaffolded using the tools you’re used to working with.
| Project Type | Scaffolding Tool |
|---|---|
| Next.js | create-next-app |
| Vanilla | create-vite |
| React | create-vite |
| Vue | create-vite |
| Astro | create-astro |
| Svelte Kit | create-svelte |
| Preact | create-vite |
| Solid | degit |
Give It a Try
I’d be happy to hear if you have any feedback. Feel free to create an issue on GitHub if you have any questions, bug reports, or feature request. You’re also more than welcome to become a contributor and additional features that you miss.
Thanks for reading!
Happy coding 🚀
