vt-tw/README.md

A fully initialized React Vite + Tailwind CSS starter template to kickstart modern front-end projects. This package provides an optimized and minimal boilerplate with fast development, zero-config setup, and best practices.

---


# **VT-TW: React + Vite + Tailwind Starter**  

🚀 **VT-TW** is a fully initialized **React Vite + Tailwind CSS** starter template, designed for modern front-end projects. It offers **fast development**, **zero-config setup**, and **best practices** to kickstart your next project effortlessly.  


<p align="center">
  <img src="./mockup.gif" alt="mockup-image"  />
</p>



---

# VT-TW 🚀

A modern React + Vite + Tailwind CSS starter kit.

[![npm version](https://img.shields.io/npm/v/vt-tw?color=blue&label=vt-tw)](https://www.npmjs.com/package/vt-tw)
[![Vite](https://img.shields.io/badge/Vite-%2335495e.svg?style=flat&logo=vite&logoColor=yellow)](https://vitejs.dev/)
[![Tailwind CSS](https://img.shields.io/badge/TailwindCSS-%2306B6D4.svg?style=flat&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
[![Deploy](https://img.shields.io/badge/Deployed%20on-Vercel-black?logo=vercel)](https://vt-tw.vercel.app/)
[![GitHub stars](https://img.shields.io/github/stars/thinakaranmanokaran/Twindle?style=social)](https://github.com/thinakaran13/vt-tw)


👉 **Live Demo:** [https://vt-tw.vercel.app](https://vt-tw.vercel.app)

---


## **✨ Features**  
✅ **React 19 + Vite** – Lightning-fast development  
✅ **Tailwind CSS** – Utility-first styling  
✅ **ESLint & Prettier** – Clean and consistent code  
✅ **React Router** – Pre-configured for navigation  
✅ **Zero Config Setup** – Just install and start coding  

---


## **📦 Installation**  

### **Using npx (Recommended)**  
```sh
npx vt-tw
```
_This will prompt you to enter your project name._  

### **Using npm**  
```sh
npm i vt-tw
```
_Then, run:_  
```sh
npx create-vt-tw <your-project-name>
```

---


## **🚀 Usage**  

After creating your project:  

```sh
cd <your-project-name>
npm install
npm run dev
```

---


## **📂 Folder Structure**  

```
your-project/
├── src/            # React components & pages
├── public/         # Static assets
├── tailwind.config.js  # Tailwind CSS config
├── vite.config.js  # Vite config
├── package.json    # Project metadata
└── README.md       # Documentation
```

---


## **⚡ Development**  
To start the development server:  
```sh
npm run dev
```

To build for production:  
```sh
npm run build
```

To preview the build:  
```sh
npm run preview
```

To format and lint the code:  
```sh
npm run lint
```

---


## **📖 Learn More**  
- [Vite Documentation](https://vitejs.dev/)  
- [React Documentation](https://react.dev/)  
- [Tailwind CSS Documentation](https://tailwindcss.com/)  

---


## **👨‍💻 Author**  
**Thinakaran Manokaran** 🚀  
GitHub: [@thinakaranmanokaran](https://github.com/thinakaranmanokaran)  
Portfolio: [Thinakaran Manokaran](https://thinakaranmanokaran.netlify.app)  

---


## **📜 License**  
This project is licensed under the **MIT License**.  

🚀 Happy Coding! **Enjoy Code!** 😎🎉  

---