This is a quick start guide for setting up a project that uses the functional CSS library Tailwind CSS. This setup allows you to write Tailwind CSS classes in HTML and whenever you save changes to the file, the compiler will add any missing CSS to your style.css file.

First Time Setups

Settings:
search for live server and set live server > settings: Full Reload true (checked in settings)
search for unknown and set CSS > Lint: Unknown at Rule (set to ignore)

Extensions:
Install Tailwind CSS IntelliSense (autocomplete tailwind classes and hover to show actual CSS)
Install Inline Fold (collapses class names into an ellipsis) making HTML more readable

Regular Setup

1. Initialize tailwind config file

in in the terminal from the project directory:
npx tailwindcss init
creates the tailwind.config.js file
update file with:
content: ['./build/*.html'],

2. Create directories and files

build/index.html
src/input.css

3. to the input.css add

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

4. Set tailwind input file and output files

In the terminal call:
npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch

5. Create package.json

npm init -y (-y flag creates package.json with defaults)

6. Add the compiler script

"tailwind": "npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch"

7, Install prettier dev dependency (this helps to sort the tailwind preferred order of classes in html)

npm i -D prettier-plugin-tailwindcss

8. Add the prettier script

"prettier": "npx prettier --write */.html"

9. Run tailwind script while developing

npm run tailwind

10. Run prettier script as needed

npm run prettier