Skip to content

πŸš€ Vite + React + Tailwind CSS Starter β€” Fast setup with linting, formatting, and best-practice tools for smooth UI development. ⭐️ Star to support my work!

License

Notifications You must be signed in to change notification settings

marcop135/vite-react-tailwind-lint

Repository files navigation

πŸš€ Vite + React + Tailwind CSS Starter

A modern, fast starter template using Vite, React, and Tailwind CSS. Includes built-in linting, formatting, and best practices for rapid development.

✨ Features

  • ⚑️ Instant dev server with Vite
  • 🎨 Tailwind CSS
  • βš›οΈ React
  • 🧼 HTMLHint, ESLint, Stylelint
  • πŸ–ŒοΈ Prettier + Tailwind plugin
  • πŸ› οΈ Ready-to-use scripts: dev, build, preview
  • πŸ“¦ Minimal, production-ready config
  • 🧩 Easily extendable toolchain

πŸ§ͺ Project Structure

  • src/ – Source files (HTML, JS, SCSS, assets)
  • dist/ – Production build output
  • index.html – Entry HTML file
  • vite.config.js – Vite config
  • eslint.config.js, .stylelintrc, .htmlhintrc – Lint configs
  • prettier.config.mjs – Formatting config
  • package.json – Scripts & dependencies

βš™οΈ Requirements

πŸš€ Getting Started

npx degit marcop135/vite-react-tailwind-lint my-app
cd my-app
npm install
npm run dev

πŸ§ͺ Scripts

npm run dev       # Start dev server
npm run build     # Build for production
npm run preview   # Preview production build
npm run lint      # Lint JS, JSX, TS, TSX, CSS, SCSS, HTML, and MD files
npm run format    # Format html, css, js, jsx, jsx, ts, tsx, and MD files

Now edit the following files to start customizing:

  • index.html – Main HTML file
  • src/main.jsx – React entry point

🧹 Linting & Formatting

Includes:

  • eslint – Lint JavaScript
  • stylelint – Lint CSS/SCSS
  • htmlhint – Lint HTML/JSX
  • prettier – Format code

πŸ“Œ Run automatically:

npm run lint
npm run format

πŸ“Œ Run manually:

Linting & Formatting Commands:

# Lint all JSX files in src/
npx eslint "src/**/*.{js,jsx,ts,tsx}"

# Lint all CSS files in src/
npx stylelint "src/*.css"

# Lint all HTML files in the project (root, src/, dist/, etc.)
npx htmlhint "**/*.html"

# Check code formatting for all JS, JSX, TS, TSX, CSS, SCSS, HTML, and Markdown files in src/
npx prettier --check "src/**/*.{js,jsx,ts,tsx,css,scss,html,md}"

πŸ“š Official Documentation


🀝 Contributing

Contributions welcome! Open issues or submit PRs.

πŸ‘€ Author

Marco Pontili

πŸ“ License

Licensed under the MIT License.

About

πŸš€ Vite + React + Tailwind CSS Starter β€” Fast setup with linting, formatting, and best-practice tools for smooth UI development. ⭐️ Star to support my work!

Topics

Resources

License

Stars

Watchers

Forks