msaaddev / new-tailwind-app

💥 One stop shop for eliminating the grunt work of setting up a Tailwind Web App across multiple frameworks. Just type in `npx new-tailwind-app` in your terminal and set up everything instantly.

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 with npm 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

• Next.js
• React.js
• Gatsby.js
• Vue3
• Laravel

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 new-tailwind-app@latest [app_name] --basic

# sets up next.js tailwind app using npx
npx new-tailwind-app@latest [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-tailwind-app's Issues

Feature Request: Add Vite option

Hi, thank you for creating this amazing tool. I have an idea. It will be nice if this tool has the option to use Vite.

Thanks.

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.

Integrate React.js site with Tailwind Integration

Integrate Next.js site with Tailwind Integration

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.

Stuck at Creating a Next.js App...

Environment:
1 - Node version: v18.16.0
2 - Windows 10

Steps to reproduce:
1 - npm install -g new-tailwind-app
2 - npx new-tailwind-app app --next

It will just keep on doing that for like good 30 minutes without ever getting the app.

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.

Integrate Vue3 site with Tailwind Integration

Integrate Gatsby site with Tailwind integration

set up flags

Integrate Laravel site with Tailwind Integration

Set up basic template site with Tailwind Integration

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.

Tailwind not implemented

I just made a react app, & remove the App.css file & wrote some css classes with tailwind, but it never showing tailwind styling.
no error, nothing found.

Set up basic UI of the CLI