Day 3 - Tailwind CSS Setup

Learn the different ways to add Tailwind CSS to your project.

1. Ways to Set Up Tailwind

There are two primary ways to start using Tailwind CSS in your project:

🌐

Play CDN

Quick start, no install needed

Best for beginners
⚙️

Tailwind CLI

Uses npm, compiles CSS locally

Real projects
🔧

PostCSS / Vite

Framework integrations (React, Vue…)

Advanced setup

2. Method 1: Play CDN (for Learning)

Add a single <script> tag inside your HTML <head>:

<!-- Paste inside <head> -->
<script src="https://cdn.tailwindcss.com"></script>

Your full HTML boilerplate looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- Your content here -->
  </body>
</html>
⚠️ Note: The Play CDN is only for development and learning. It loads the full Tailwind stylesheet which is very large. For production, use the Tailwind CLI.

3. Method 2: Tailwind CLI (for Real Projects)

The CLI compiles a minimal CSS file containing only the classes you actually use in your project.

  1. Install Tailwind via npm
    npm install -D tailwindcss
    npx tailwindcss init
  2. Configure tailwind.config.js
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./**/*.html"],
      theme: { extend: {} },
      plugins: [],
    }
  3. Create your input CSS file
    /* css/input.css */
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  4. Build and watch for changes
    npx tailwindcss -i ./css/input.css -o ./css/output.css --watch

4. CDN vs CLI — Quick Comparison

Feature Play CDN Tailwind CLI
Setup time Instant (1 line) ~5 minutes
Requires Node.js? No Yes
CSS bundle size Very large (full CSS) Tiny (purged CSS)
Works offline? No Yes
Use in production? No Yes
Best for Learning & prototyping Real production projects
← Previous: Introduction Next: Typography →