Skip to content

Tailwind CSS Installation and Setup Guide

DodaTech Updated 2026-06-28 4 min read

In this tutorial, you will learn about Tailwind CSS Installation and Setup Guide. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS installation can be done via npm with PostCSS, the Tailwind CLI, or a CDN link for quick prototyping, depending on your project needs.

What You'll Learn

You will learn three methods to install Tailwind CSS (npm+PostCSS, CLI, CDN), how to configure the build Process, and how to verify that Tailwind is working correctly.

Why It Matters

Proper setup ensures Tailwind generates only the CSS you use, keeping production bundles small. DodaTech uses the npm+PostCSS setup for Doda Browser to enable full configuration and purging.

Real-World Use

DodaZIP's marketing site uses the CDN approach for rapid prototyping, then switches to the npm setup before going live to enable custom themes and smaller bundle sizes.

flowchart LR
    A[What Is Tailwind] --> B[Installation]
    B --> C[npm + PostCSS]
    B --> D[Tailwind CLI]
    B --> E[CDN]
    C --> F[Configuration]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Method 1: npm + PostCSS (Production Setup)

npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  }
}

@import "tailwindcss";

Expected output: Tailwind processes the CSS file and outputs all utility classes based on your content sources.

Method 2: Tailwind CLI (Standalone)

npm install -D @tailwindcss/cli
npx @tailwindcss/cli -i input.css -o output.css --watch

@import "tailwindcss";

Expected output: Tailwind generates output.css from input.css and watches for changes. The --watch flag auto-recompiles on file changes.

Method 3: CDN (Quick Prototyping)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CDN</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@4/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold text-gray-800">Hello Tailwind</h1>
    <p class="text-gray-600 mt-2">This works instantly with no build step.</p>
  </div>
</body>
</html>

Expected output: A styled page using Tailwind utilities loaded from CDN. No install or build step needed.

Verifying the Setup

<div class="flex items-center justify-center h-64">
  <div class="bg-blue-500 text-white px-6 py-3 rounded-lg shadow-md">
    Tailwind is working!
  </div>
</div>

Expected output: A centered blue box with white text, padding, rounded corners, and shadow. If styles appear, Tailwind is configured correctly.

Common Mistakes

1. Not Including the @tailwind Directives

Without @import "tailwindcss" in your main CSS file, Tailwind has no entry point and generates nothing.

2. Forgetting Content Paths

Tailwind v3+ needs to know which files to scan for class usage. A missing content array in config produces an empty CSS file.

3. CDN Lacks Customization

CDN setup uses default Tailwind. You cannot change the theme, add plugins, or enable variants via CDN.

4. Installing Old Versions

npm install tailwindcss installs the latest stable. Check the version with npm list tailwindcss to ensure you are on v3+.

5. Not Running the Build Step

Without a build command or watch mode, new classes added to HTML may not appear. Always run the build pipeline after editing.

Practice Questions

  1. What command installs Tailwind via npm? npm install tailwindcss @tailwindcss/postcss postcss

  2. What file configures PostCSS plugins? postcss.config.js in the project root.

  3. How do you start the Tailwind CLI in watch mode? npx @tailwindcss/cli -i input.css -o output.css --watch

  4. What is the limitation of the CDN approach? No custom theme configuration, no plugins, no purging. Best for prototyping only.

  5. What happens if content paths are empty? Tailwind generates a minimal CSS file with base styles but no utility classes.

Challenge

Set up a new project using the npm+PostCSS approach. Create an index.html with a styled header and a card. Run the build and verify output.css contains the used utilities.

FAQ

Can I use Tailwind with Vite?

Yes. Install tailwindcss and postcss, add postcss.config.js with @tailwindcss/postcss, and Vite processes it automatically.

Does Tailwind work with Next.js?

Yes. Next.js supports Tailwind directly. Create a CSS file with @import 'tailwindcss' and import it in your layout.

How do I upgrade from Tailwind v2 to v3?

Update the package, replace @tailwind directives with @import 'tailwindcss', and update content paths in the config.

What is the difference between Tailwind CLI and PostCSS?

Both generate the same output. CLI is standalone. PostCSS integrates into an existing build pipeline with other plugins.

Can I use Tailwind without a build step?

Yes, via CDN. However, you lose customization and tree-shaking. CDN is best for prototypes and demos only.

Mini Project

Set up a new project with npm+PostCSS Tailwind. Create a landing page hero section with a heading, subtext, and two buttons using utility classes. Verify the build produces correct CSS.

What's Next

With Tailwind installed, learn how to Configure Tailwind to customize your theme. Then explore Utility-First Fundamentals for building layouts.

← Previous What Is Tailwind CSS? — Utility-First Framework Overview Next → Tailwind CSS Configuration — Customizing the Default Theme

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Tailwind Css