Vite-Tailwind-React-Cli

A simple CLI tool to set up a new React project with Vite and Tailwind CSS in one step.

Features

• Initializes a new React project with Vite.
• Configures Tailwind CSS with PostCSS and Autoprefixer.
• Automatically sets up Tailwind CSS configuration files.
• Options to choose between npm and pnpm.
• Optionally initialize a Git repository and create .gitignore.
• Optionally set up ESLint and Prettier.
• Optionally install axios, react-router-dom, redux, @reduxjs/toolkit, husky, Jest, and dotenv.

Prerequisites

• Node.js (v14.0.0 or higher)
• npm (v6.0.0 or higher)

Installation

First, install the CLI tool globally:

npm install -g vite-tailwind-react-cli

Usage

To create a new React project with Vite and Tailwind CSS, run:

create-vtr my-new-project

Replace my-new-project with your desired project name.

Project Structure

The generated project will have the following structure:

my-new-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
├── .gitignore
├── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
└── README.md

Configuration

Tailwind CSS is configured to scan the following files for class names:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

The default src/index.css includes the necessary Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License.

Acknowledgements

• Vite
• React
• Tailwind CSS
• Execa

Developer

• Anish