- The whole team needs to be able to run the html prototype file in VSCode with Live Server
- So the html file needs a kind of public directory, which includes assets; and so tailwind output css file needs to go where that html file can see it.
- What I came up with, based on review of:
npm installnpm run watch- Tailwind output goes to
./html/css/style.css
code .- Then edit
./html/index.html- It is looking at
./html/css/style.css
- It is looking at
- View in Live Server or wherever to visualize changes
npm run buildnpm init
npm install -D tailwindcss
npx tailwindcss initmodule.exports = {
content: ["./html/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}@tailwind base;
@tailwind components;
@tailwind utilities; "scripts": {
"watch": "tailwindcss -i ./tailwind.css -o ./html/css/style.css --watch",
"build": "tailwindcss -i ./tailwind.css -o ./html/css/style.css"
},<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/output.css" rel="stylesheet" />
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>npm run watchnpm run build