Use Tailwind CSS in a Static Website (Without the Play CDN)

Tailwind CSS is super handy for styling websites quickly without writing endless lines of custom CSS. Usually, you will see people dropping in the Play CDN for quick testing, but for real projects, that's not the best approach.

Most tutorials cover Tailwind with dynamic projects (React, Vue, etc.), but if you’re just building a simple static site with plain HTML, there's much less documentation. So, let's walk through it step by step.

Prerequirements

Make Sure You Have Node.js Installed

We'll need Node.js and npm (npm comes bundled with Node.js). Check if they're installed:

node -v
npm -v

If you don't see version numbers, grab the installer from nodejs.org.

Initialize npm in Your Project

Navigate into your project folder and initialize npm:

npm init -y

This creates a package.json file where npm tracks your dependencies.

Install Tailwind CLI

Now install the Tailwind CLI tool (and the Tailwind CSS package itself):

npm install tailwindcss @tailwindcss/cli

Use Tailwind CSS

Project Structure

Your project structure isn’t super important, but here's the one I'll use for this guide. Feel free to adapt it to your needs.

my-static-site/
├─ package.json
├─ public/
│  ├─ index.html
│  └─ static/
│     └─ css/
│        ├─ tailwind-input.css
│        └─ tailwind.css

tailwind-input.css Tailwind’s input file (where we tell Tailwind what to include)
tailwind.css The generated CSS file with all the classes you actually use

Create Your Tailwind Input File

Inside public/static/css/tailwind-input.css, add:

@import "tailwindcss";

That's all that’s needed for Tailwind v4. You could add additional settings or themes here, but we'll keep it simple

Build Tailwind CSS

Generate the final CSS file with:

npx tailwindcss -i ./public/static/css/tailwind-input.css -o ./public/static/css/tailwind.css

Tailwind will scan your HTML files, detect which classes you used, and output a slim CSS file containing only those classes.

Use It in Your HTML

Now just link the generated CSS in public/index.html

<link rel="stylesheet" href="./static/css/tailwind.css">

Done! You can now start using Tailwind classes in your HTML

Add a Script to Make Life Easier

Typing that long command every time is annoying. Let’s add a script inside package.json:

"scripts": {
  "build-css": "tailwindcss -i ./public/static/css/tailwind-input.css -o ./public/static/css/tailwind.css"
}

Now you can just run npm run build-css, which is much easier