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.

Install Tailwind via npm

npm install -D tailwindcss
npx tailwindcss init

Configure tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.html"],
  theme: { extend: {} },
  plugins: [],
}

Create your input CSS file

/* css/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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 →