Skip to content

Latest commit

 

History

History

Color-Palette-Generator

Vite + React + TailwindCSS Starter


GitHub repo size GitHub forks GitHub Repo stars Last commit Commit activity

This template provides a stater setup to get React working in Vite with TailwindCSS installed.


Getting Started*

1. Clone this repo*

git clone https://github.com/purnasth/vite-react-tailwind-starter.git

2. Install and Run*

Run the following commands in your terminal:

npm install
npm run dev
  • npm install to install the node_modules on your local repo which has been .gitignore in this github repo.
  • npm run dev for running this in your browser, by default it opens in port http://localhost:5173/

Codes Used

NOTE: Please disregard these below provided codes if you've already completed the first two steps of the "Getting Started" section. It's only meant for those interested in manually creating a Vite + React project with TailwindCSS.

Install vite + react

npm create vite@latest ./
# Select a framework: React
# Select a variant: JavaScript + SWC
npm install
npm run dev

Install tailwindCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Replace tailwind.config.js inner codes with

/** @type {import('tailwindcss').Config} \*/
export default {
content: [
"./index.html",
"./src/**/\*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Paste these lines in index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Import react icons

npm install react-icons --save

Import axios

npm install axios

⭐ Star this repo on GitHub — it helps!