TailwindCSS 3, postCSS with live-reload as standalone, github pages ready

Setup

# Install required packages
yarn

# For development without purging/minification
yarn dev

# For final outcome with purging/minification
# docs/assets/css/style.css
yarn build

Enabling JIT

# In postcss.config.js
#  //require('tailwindcss'), uncomment it for normal tailwindcss
#  //require('@tailwindcss/jit'), uncomment it for jit

Github pages

# Create your project repository on github
# Configure your project with the github

# Make your project
# Build the project using
yarn build

# Push to github

# Go to repository Setting page at github
# Under GitHub pages choose Branch: main and /docs as pages folder, SAVE
# You will get the url of your site under GitHub pages

# IMPORTANT:
# Do some minor change (e.g in README.md) and push to the repo. again to trigger the GitHub deployment process.

# DONE

Tips for VSCode

Useful extensions for tailwindCSS

Tailwind CSS IntelliSense

Tailwind Docs