https://github.com/paulmagadi/tailwind-install-vite-js
Tailwind CSS Installation Using Vite
https://github.com/paulmagadi/tailwind-install-vite-js
css css-framework tailwindcss tailwindcss-v4 vanilla-javascript vite vitejs
Last synced: 9 days ago
JSON representation
Tailwind CSS Installation Using Vite
- Host: GitHub
- URL: https://github.com/paulmagadi/tailwind-install-vite-js
- Owner: paulmagadi
- Created: 2025-05-06T09:49:10.000Z (10 days ago)
- Default Branch: main
- Last Pushed: 2025-05-06T10:35:34.000Z (10 days ago)
- Last Synced: 2025-05-06T10:39:25.150Z (10 days ago)
- Topics: css, css-framework, tailwindcss, tailwindcss-v4, vanilla-javascript, vite, vitejs
- Language: HTML
- Homepage: https://paulmagadi.github.io/Tailwind-install-Vite-JS/
- Size: 0 Bytes
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Tailwind CSS Installation Using Vite
This guide helps you set up Tailwind CSS in a **Vite + Vanilla JavaScript** project.
---
## 1. Create a Vite Project
```bash
npm create vite@latest
```
- Enter your project name (e.g. `my-tailwind-app`)
- Select **Vanilla** and **JavaScript**
Then navigate to the new project folder:
```bash
cd my-tailwind-app
```
Install dependencies:
```bash
npm install
```
---
## 2. Install Tailwind CSS with Vite Plugin
```bash
npm install tailwindcss @tailwindcss/vite
```
---
## 3. Configure Vite to Use Tailwind CSS
In the root directory, create a `vite.config.js` file (if not auto-created):
```js
// vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})
```
---
## 4. Create and Configure Tailwind CSS
In your `src/` folder, create a `styles.css` file and add:
```css
/* src/styles.css */
@import "tailwindcss";
```
---
## 5. Add Tailwind to Your HTML
In your `index.html`, link the stylesheet and add sample content:
```html
Tailwind + Vite
Hello world!
```
---
## 6. Run the Development Server
```bash
npm run dev
```
Visit `http://localhost:5173` to see your Tailwind-styled project!
# Deployment
Install the gh-pages package:
bash
`npm install --save-dev gh-pages`
## Update Build Script in package.json
```
"scripts": {
...
"deploy": "npm run build && gh-pages -d dist"
}
```
## Deploy the project:
bash
`npm run deploy`
Push the codes to github, the website will be deployed to github pages using *branch* **gh-pages**