- 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
- 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: [],
}
- create
main.css
file and paste the below code
@tailwind base;
@tailwind components;
@tailwind utilities;
-
Link the
main.css
file toindex.html
file -
create a new git repository and push all the file as-usual
-
Go to
package.json
file add the below code
"homepage": "ur git repository link"
- 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.../"
})
- Now run the below command
npm run build
-
Go to
.gitignore
file and comment thedist
line -
Go to terminal again and type these commands
npm run build
-
Again
git push...
-
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
assets
folder toowhile setting up the project i forget to change this config