vite-tailwind-react-setup

Overview

vite-tailwind-react-setup is a CLI tool that streamlines the creation of React projects with Vite and Tailwind CSS. It automates the setup process, offering optional Airbnb ESLint configuration.

Installation

Install the CLI tool globally:

npm install -g vite-tailwind-react-setup

Usage Create a new project:

new-react-app

Follow the prompts:

Project Name: Enter name or leave blank for current directory name
Directory: Specify or leave blank for current directory
Airbnb ESLint: Choose to include or not

Example:

$ new-react-app
? Enter your project name (leave blank to use current directory): my-awesome-app
? Enter the directory to create the project in (leave blank to use current directory): /path/to/project
? Do you want to include Airbnb ESLint configuration? (Y/n)

Features

React with Vite and Tailwind CSS setup
Optional Airbnb ESLint configuration
Preconfigured tailwind.config.js and postcss.config.cjs

Example App.jsx with Tailwind CSS classes

Project Structure

my-awesome-app/
├── node_modules/
├── public/
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .eslintrc.cjs (if Airbnb ESLint selected)
├── .gitignore
├── index.html
├── package.json
├── postcss.config.cjs
├── README.md
├── tailwind.config.js
└── vite.config.js

Configuration Files

tailwind.config.js

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

postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

.eslintrc.cjs (Airbnb Configuration)

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb', 'airbnb/hooks', 'plugin:react/recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'prettier'],
  rules: {
    'react/react-in-jsx-scope': 0,
  },
};

Dependencies

Core

react: ^18.2.0
react-dom: ^18.2.0
Development
@types/react: ^18.2.15
@types/react-dom: ^18.2.7
@vitejs/plugin-react: ^4.0.3
autoprefixer: ^10.4.14
postcss: ^8.4.27
tailwindcss: ^3.3.3
vite: ^4.4.5

Airbnb ESLint (Optional)

eslint: ^8.45.0
eslint-config-airbnb: ^19.0.4
eslint-config-prettier: ^8.8.0
eslint-plugin-import: ^2.27.5
eslint-plugin-jsx-a11y: ^6.7.1
eslint-plugin-prettier: ^5.0.0
eslint-plugin-react: ^7.32.2
eslint-plugin-react-hooks: ^4.6.0
prettier: ^3.0.0

Author

Subhro Kar

Contributing

Contributions are welcome. Open an issue or submit a pull request for improvements or bug fixes.