Tailwind, Vite integration with Github-Pages deployment steps

Vite-Tailwind-Github-Integration.md

TailwindCss-Vite

1. Create project using the below commands.

npm create vite@latest my-project-name
> Vanilla
> JavaScript

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

2. Paste the below in the tailwind.config.js file

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

3. create main.css file and paste the below code

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

4. Link the main.css file to index.html file

5. create a new git repository and push all the file as-usual

6. Go to package.json file add the below code

"homepage": "ur git repository link"

7. create a new file naming "vite.config.js" & paste the below in that file

import { defineConfig } from 'vite'

export default defineConfig({
  base:"/...ur git repository name.../"
})

8. Now run the below command

npm run build

9. Go to .gitignore file and comment the dist line

10. Go to terminal again and type these commands

npm run build

11. Again git push...

12. git subtree push --prefix dist origin gh-pages

now check ur output in git All the best😉

issue : change this path "./src/*/.{js,ts,jsx,tsx}", to -> "./src/**/*.{js,ts,jsx,tsx}", or "./**/*.{js,ts,jsx,tsx}",
and add

• this content config to assets folder too

while setting up the project i forget to change this config