vite-tailwind-react-setup

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.