A modern frontend starter template powered by Vite 7 and Tailwind CSS v4, designed for lightning-fast development, optimized builds, and production-ready applications. Now with TypeScript support, comprehensive testing, and modern best practices.
- ⚡ Vite 7 - Lightning-fast HMR and optimized production builds
- 🎨 Tailwind CSS v4 - Modern utility-first CSS framework
- 📘 TypeScript Support - Optional but fully configured
- 🧪 Vitest - Fast unit testing with coverage reports
- 🔧 Modern JavaScript - No jQuery, pure vanilla JS with ES6+
- ♿ Accessibility - WCAG 2.1 compliant with ARIA support
- 🔒 Security Headers - CSP, X-Content-Type-Options, and more
- 📱 PWA Ready - Progressive Web App meta tags
- 🌗 Dark Mode - Built-in theme switching with localStorage
- 🖼️ Image Optimization - Automatic WebP conversion
- 📦 Code Splitting - Optimized bundle with manual chunks
- 🎯 SEO Optimized - Meta tags, Open Graph, Twitter Cards
- 🔍 Error Handling - Centralized error logger
- 📚 Comprehensive Docs - Full documentation included
- 🎨 Accessibility Utilities - Screen reader, focus, reduced motion support
- Node.js >= 18.0.0
- npm >= 9.0.0
# Clone the repository
git clone https://github.com/chetan3460/vite-tailwind-starter.git
cd vite-tailwind-starter
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env
# Start development server
npm run devVisit http://localhost:5173 to see your app running!
# Development
npm run dev # Start dev server
npm run preview # Preview production build
# Building
npm run build # Build for production
npm run build:analyze # Build with bundle analyzer
# Testing
npm test # Run tests in watch mode
npm run test:run # Run tests once
npm run test:coverage # Run tests with coverage
npm run test:ui # Open Vitest UI
# Code Quality
npm run lint # Lint code
npm run lint:fix # Lint and fix issues
npm run format # Format code with Prettier
npm run type-check # TypeScript type checking
npm run validate # Run all checks (lint + type + test)
# Version Management
npm run bump:patch # Bump patch version (1.0.x)
npm run bump:minor # Bump minor version (1.x.0)
npm run bump:major # Bump major version (x.0.0)vite-tailwind-starter/
├── docs/ # 📚 Documentation
│ ├── README.md # Documentation index
│ ├── getting-started.md # Setup guide
│ ├── components.md # Component docs
│ ├── build-deployment.md # Deployment guide
│ └── contributing.md # Contributing guidelines
├── public/ # Static assets
├── scripts/ # Build scripts
├── src/
│ ├── css/ # 🎨 Stylesheets
│ │ ├── app.css # Main CSS
│ │ ├── custom/ # Custom styles
│ │ └── utilities/ # Utility classes
│ ├── js/ # 💻 JavaScript
│ │ ├── app.js # Main entry point
│ │ ├── components/ # JS components
│ │ └── utils/ # Utilities (logger, error handler)
│ └── fonts/ # Custom fonts
├── tests/ # 🧪 Tests
│ ├── setup.js # Test environment
│ ├── unit/ # Unit tests
│ └── integration/ # Integration tests
├── partials/ # HTML partials
├── .env.example # Environment template
├── package.json # Dependencies
├── vite.config.js # Vite config
├── vitest.config.js # Test config
├── tsconfig.json # TypeScript config
├── .eslintrc.json # ESLint config
└── CHANGELOG.md # Version history
- ✅ Removed jQuery - 30KB bundle size reduction
- ✅ Added TypeScript - Full type safety support
- ✅ Testing Infrastructure - Vitest with 100% setup
- ✅ Enhanced Security - Security headers and CSP
- ✅ Better Accessibility - WCAG 2.1 compliant
- ✅ Comprehensive Docs - Full documentation suite
- ✅ Modern JavaScript - ES6+ with vanilla JS
- ✅ Error Handling - Centralized error management
- ✅ Build Optimization - Manual chunk splitting
See CHANGELOG.md for full details.
# Run all tests
npm test
# Run with coverage
npm run test:coverage
# Open test UI
npm run test:uiTests are written using:
- Vitest - Fast unit testing
- @testing-library - DOM testing utilities
- ** JSDOM** - DOM environment simulation
Vercel (Recommended):
npm i -g vercel
vercelNetlify:
npm i -g netlify-cli
netlify deployOther Platforms:
- GitHub Pages
- Cloudflare Pages
- AWS S3 + CloudFront
See Build & Deployment Guide for detailed instructions.
Comprehensive documentation is available in the docs/ folder:
- Getting Started - Installation and setup
- Components - Component usage and API
- Build & Deployment - Build and deploy
- Contributing - Contribution guidelines
- ESLint - JavaScript linting
- Prettier - Code formatting
- TypeScript - Type checking
- Vitest - Unit testing
- Git Hooks - Pre-commit validation (optional)
Run all checks:
npm run validate- WCAG 2.1 Level AA compliant
- ARIA labels and roles
- Keyboard navigation support
- Screen reader optimized
- Focus management
- Reduced motion support
- High contrast mode support
- Content Security Policy headers
- X-Content-Type-Options
- X-Frame-Options
- Referrer Policy
- Secure asset handling
- Environment variable management
- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- Edge (last 2 versions)
Legacy browser support via @vitejs/plugin-legacy.
Contributions are welcome! Please read our Contributing Guidelines for details on:
- Code of conduct
- Development process
- Submitting pull requests
- Coding standards
This project is licensed under the ISC License.
- Vite - Next generation frontend tooling
- Tailwind CSS - Utility-first CSS framework
- Vitest - Blazing fast unit testing
- All contributors and supporters
- Documentation: docs/README.md
- Issues: GitHub Issues
- Discussions: GitHub Discussions
If you find this project helpful, please give it a ⭐ on GitHub!
Made with ❤️ by Chetan