A zero-configuration cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.
- Simple: One command setup for all your Tailwind CSS web applications
- Cross-platform: Works on all available operating systems including Linux, macOS, and Windows
- Support: Five different web frameworks available with Tailwind CSS integration
- Prettier: Integrate prettier in Next.js, React.js, Gatsby.js & Vue3 with
--prettier
flag and then easily format the code withnpm run format
- MIT Licensed: Free to use for personal and commercial use.
- Featured: new-tailwind-app has been featured in CooperPress newsletters, i.e., Node Weekly and JavaScript Weekly that is subscribed by half a million developers..
Note: If you are on Windows, make sure to either use Command Prompt or Windows Powershell to run the CLI.
π
Supported Frameworks & Libraries
You can also generate simple HTML, CSS, and JavaScript application with Tailwind integration using new-tailwind-app.
π¦
Installation
# install the CLI globally
npm install -g new-tailwind-app
# use it with npx (recommended)
npx new-tailwind-app [app_name] --flag
π
Usage
Navigate to the folder you want to have your tailwind web app.
# help section
npx new-tailwind-app --help
# create a basic tailwind app
npx new-tailwind-app [app_name] --basic
# create a next.js tailwind app
npx new-tailwind-app [app_name] --next
# create a next.js tailwind app with prettier
npx new-tailwind-app [app_name] --next --prettier
# create a react.js tailwind app
npx new-tailwind-app [app_name] --react
# create a react.js tailwind app with prettier
npx new-tailwind-app [app_name] --react --prettier
# create a gatsby.js tailwind app
npx new-tailwind-app [app_name] --gatsby
# create a gatsby.js tailwind app with prettier
npx new-tailwind-app [app_name] --gatsby --prettier
# create a vue3 tailwind app
npx new-tailwind-app [app_name] --vue3
# create a vue3 tailwind app with prettier
npx new-tailwind-app [app_name] --vue3 --prettier
# create a laravel tailwind app
npx new-tailwind-app [app_name] --laravel
# if installed globally
new-tailwind-app [app_name] --flag
π©
Demo
# if you have installed globally
new-tailwind-app
# set up a basic tailwind app using npx
npx [email protected] [app_name] --basic
# sets up next.js tailwind app using npx
npx [email protected] [app_name] --react
π¨π»βπ» Contributing
Make sure you read the contributing guidelines before opening a PR. If you want something else to integrate with the CLI, open an issue in the repository and I will get back to it.
β‘οΈ
Other Projects
I have curated a detailed list of all the open-source projects I have authored. Do take out a moment and take a look.
π
License & Conduct
- MIT Β© Saad Irfan
- Code of Conduct
π¦ NEW: prettier flag
In this PR, I have removed the prettier integration with every new Tailwind CSS Next, React, Gatsby, and Vue3 app. Instead, I have added a
--prettier
Β flag to integrate prettier with the above mentioned frameworks.π IMPROVE: code quality
In this PR, I have done the following:
Add support for Svelte
I recently made the switch from React to Svelte and I'm loving it so far. There's a big shift going on right now to Svelte, and I think it'd be a huge plus to include support for Svelte in your project.
Not able to create a new project
Hi! Thanks for this tool but when I run
npx new-tailwind-app my-tw-app --basic
it gives me an error:How should I fix this? I have installed it globally.
Add support for TypeScript in Web frameworks.
Currently, the tool only supports JavaScript with Next.js, React.js, Gatsby.js, and Vue3. We need to add support for TypeScript as well. So developers who like to work with TypeScript can also utilize this tool.
fix error handling
Currently, I have implemented that if a folder already exists then it will let the user know. The bug is if the CLI breaks in the folder, the user does not get the appropriate error message and get's a msg that error: folder already exists.