A practical, no-fuss setup for Tailwind CSS v4. Install the tools, wire up the CLI, and get a live rebuild loop running in minutes.
Prerequisite
npm ships with Node.js, so install Node once and verify both commands work in your terminal.
brew install nodeRestart your terminal if you installed Node on Windows, then check:
node -v
npm -v
Initialize
Make a project folder, initialize package.json, and create the source and output directories.
mkdir "Modern Website"
cd "Modern Website"
npm init -y
mkdir src dist
touch src/index.html src/input.css src/script.jsmkdir "Modern Website"
cd "Modern Website"
npm init -y
mkdir src
mkdir dist
New-Item src/index.html -ItemType File
New-Item src/input.css -ItemType File
New-Item src/script.js -ItemType FileInstall
From inside the project folder, install Tailwind and its CLI. Tailwind v4 uses a CSS-first setup, so no tailwind.config.js is required.
Terminal
npm install tailwindcss @tailwindcss/cliWire it up
Three small connections finish the setup: import Tailwind, run the watcher, and link the compiled stylesheet.
In src/input.css:
@import "tailwindcss";Keep this terminal running while you work.
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watchAdd this inside src/index.html:
<link href="../dist/output.css" rel="stylesheet">Test it with:
<h1 class="text-3xl font-bold underline">Hello World!</h1>Keep nearby
Check versions
node -v
npm -v
Stop Tailwind
Ctrl + C
Project structure
Modern Website/
├── 📁 dist/
│ └── output.css ← compiled by Tailwind (don't edit)
├── 📁 src/
│ ├── index.html ← your page
│ ├── input.css ← @import "tailwindcss" lives here
│ └── script.js
├── package.json
└── package-lock.json
VS Code tip: install Tailwind CSS IntelliSense. If the editor flags @theme, set CSS › Lint: Unknown At Rules to Ignore.