πŸ’₯ 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.

  • By Saad Irfan ⚑️
  • Last update: Jan 2, 2023
  • Comments: 6

cover


A zero-configuration cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

separator

  • 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

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

help section

🎩 Demo

# if you have installed globally
new-tailwind-app

creates tailwind app

# set up a basic tailwind app using npx
npx [email protected] [app_name] --basic

creates tailwind app

# sets up next.js tailwind app using npx
npx [email protected] [app_name] --react

creates next.js tailwind app

πŸ‘¨πŸ»β€πŸ’» 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

Github

https://github.com/msaaddev/new-tailwind-app

Comments(6)

  • 1

    πŸ“¦ 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.

  • 2

    πŸ‘Œ IMPROVE: code quality

    In this PR, I have done the following:

    • [x] Improved Code quality
    • [x] Fixed outdating future dependency bug
    • [x] Added custom error message if the directory exists.
  • 3

    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.

  • 4

    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:

    Command line error

    How should I fix this? I have installed it globally.

  • 5

    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.

  • 6

    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.