Tailwind Setup and Install

You can add Tailwind to a project in two ways: using a CDN link for quick experiments, or installing it via npm for production projects. This topic covers both methods clearly.

Method 1 — CDN (Quickest Way to Try Tailwind)

The CDN method requires no installation. Paste one script tag into your HTML file and Tailwind works instantly. This method is great for learning and prototyping, but not recommended for production because it cannot remove unused classes.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
  </body>
</html>

Open this file in a browser and you see a large, bold, blue heading — no CSS file written.

Method 2 — npm Install (For Real Projects)

The npm method sets up Tailwind as part of your build process. It scans your files, finds the classes you use, and generates a small CSS file containing only those classes.

Step-by-step npm setup:

1. Create a project folder and open a terminal inside it.

2. Run:
   npm init -y

3. Install Tailwind:
   npm install -D tailwindcss

4. Create config file:
   npx tailwindcss init

5. Open tailwind.config.js and set the content paths:
   module.exports = {
     content: ["./src/**/*.{html,js}"],
     theme: { extend: {} },
     plugins: [],
   }

6. Create src/input.css and add:
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

7. Build your CSS:
   npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

8. Link output.css in your HTML:
   <link href="/dist/output.css" rel="stylesheet">

Folder Structure After Setup

your-project/
│
├── src/
│   ├── input.css       ← You write @tailwind directives here
│   └── index.html      ← Your HTML with Tailwind classes
│
├── dist/
│   └── output.css      ← Tailwind generates this automatically
│
├── tailwind.config.js  ← Your configuration file
└── package.json

What the --watch Flag Does

The --watch flag tells Tailwind to keep running and rebuild the CSS file every time you save a change. Without it, you must re-run the build command manually after every edit.

Verifying the Setup Works

Add a class to any element in your HTML, save the file, and check whether the style appears in the browser. If it does, your setup is working correctly.

<p class="text-red-500 text-xl">This text should be large and red.</p>

Tailwind with Vite (Modern Alternative)

Vite is a fast development tool that many developers pair with Tailwind. The setup is nearly identical but Vite handles the build process with hot-reload built in. Install both with:

npm create vite@latest my-app
cd my-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

After that, follow the same content path and CSS directive steps from Method 2 above.

Previous lessons
Back to courses
Next lessons

Leave a Comment