create-azman-vite

The fastest way to bootstrap a modern Vite + React + Tailwind CSS application

Overview

create-azman-vite is a specialized CLI tool designed to eliminate the repetitive setup process when starting a new React project. It creates a production-ready Vite application pre-configured with React 18, Tailwind CSS, and essential development tools.

Features

• ⚡ Vite-powered development - Lightning fast HMR and build times
• ⚛️ React 18 - Latest React features out of the box
• 🎨 Tailwind CSS ver-4 - Utility-first CSS framework for rapid UI development
• 🔧 Zero configuration - Everything set up and optimized for you
• 📦 Modern tooling - ESLint, Prettier, PostCSS, and Autoprefixer pre-configured
• 📱 Responsive design - Mobile-first approach with Tailwind
• 🚀 Optimized production build - Code splitting and asset optimization

Quick Start

# Using npx (recommended)
npx create-azman-vite my-app

#Don't run it as: (remove 'i')
npm i create-azman-vite ./

# Using npm
npm init azman-vite my-app

# Then navigate to your new project
cd my-app

# Start the development server
npm run dev

Visit http://localhost:yourport to see your application.

Project Structure

When you run create-azman-vite, it generates the following structure:

my-app/
├── public/               # Static assets
│   └── vite.svg
├── src/
│   ├── assets/           # Project assets (images, fonts, etc.)
│   ├── App.jsx           # Main App component
│   ├── main.jsx          # Application entry point
│   └── index.css         # Global styles with Tailwind directives
├── .eslintrc.json        # ESLint configuration
├── index.html            # HTML entry point
├── package.json          # Project dependencies and scripts
├── tailwind.config.js    # Tailwind CSS configuration
└── vite.config.js        # Vite configuration

Available Scripts

After creating a project, you can run these commands:

| Command | Description | |---------|-------------| | npm run dev | Start the development server | | npm run build | Build for production |

Customization

Tailwind CSS

You can customize your design system by editing tailwind.config.js:

module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Add your custom colors here
        primary: '#3b82f6',
      },
      // Add other theme customizations
    },
  },
  plugins: [],
}

Vite Configuration

Modify vite.config.js for advanced setup:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  // Add other Vite configurations here
})

Why choose create-azman-vite?

• Development Speed: Start coding immediately without wasting time on configuration
• Best Practices: Follows modern React patterns and community standards
• Performance: Optimized for both development and production workflows
• Simplicity: Clean structure with only what you need, nothing more
• Flexibility: Easy to extend with additional tools and libraries

Requirements

• Node.js 16.0.0 or later
• npm 7.0.0 or later (or equivalent yarn/pnpm version)

Acknowledgments

• Vite
• React
• Tailwind CSS

Made with ❤️ by [https://github.com/Azman-Idrisi]