Skip to content

Sahasawat-Boss/react-vite-tailwind-ts-template

Repository files navigation

React + Vite + Tailwind CSS + TypeScript Template ⚡

Template Image

This is a starter template for creating modern React applications using:

📌 Features

✅ Pre-configured Vite + React + TypeScript
✅ Integrated Tailwind CSS
✅ Ready-to-use file structure
✅ Fast and lightweight


🛆 Installation

1⃣ Clone this repository as your project starter:

git clone https://github.com/Sahasawat-Boss/react-vite-tailwind-ts-template.git my-project
cd my-project

2⃣ Remove the Old Git History

If you want to start fresh without the commit history of this template:

Remove-Item -Recurse -Force .git
git init
git add .
git commit -m "Initial commit"

Now, you have a clean repository.

3⃣ Install dependencies:

npm install

4⃣ Start the development server:

npm run dev

Your app will be running at http://localhost:5173/ 🎉.


🎨 Tailwind CSS Configuration

Tailwind is already set up! You can customize it in tailwind.config.ts:

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Use Tailwind classes directly in your components:

<button className="bg-blue-500 text-white px-4 py-2 rounded-lg">
  Click Me
</button>

🛠 Folder Structure

📂 my-project
 ┓ 📂 src
 ┃ ┓ 📂 assets
 ┃ ┓ 📂 components
 ┃ ┓ 📂 pages
 ┃ ┓ 🐜 App.tsx
 ┃ ┓ 🐜 main.tsx
 ┃ ┓ 🐜 index.css
 ┓ 🐜 .gitignore
 ┓ 🐜 package.json
 ┓ 🐜 tailwind.config.ts
 ┓ 🐜 tsconfig.json
 ┓ 🐜 vite.config.ts

🚀 Creating a New Project Using This Template

Instead of cloning manually, you can use this repository as a GitHub template:

  1. Click "Use this template" on GitHub.
  2. Create your new repository.
  3. Clone the new repo and start coding!

🔗 Useful Commands

Start Development Server

npm run dev

Build for Production

npm run build

Preview the Production Build

npm run preview

🤝 Contributing

Feel free to fork this repository and improve it! If you make useful changes, consider opening a pull request.


License

This project is licensed under the MIT License.


🔥 Created by @Sahasawat-Boss

Releases

Packages

Used by

Contributors

Languages