CDN vs build tool comparison in Tailwind - Hands-On Comparison

CDN vs Build Tool Comparison

📖 Scenario: You want to start a new project using Tailwind CSS. You need to decide between using the CDN for quick setup or installing Tailwind with a build tool for full power. You will try both approaches to understand the difference.

🎯 Goal: Set up Tailwind CSS using both the CDN method and the build tool method, then compare the output to understand why production projects use build tools.

📋 What You'll Learn

Create an HTML page using Tailwind via CDN

Set up Tailwind with npm and the CLI build tool

Compare the generated CSS file sizes

Demonstrate a feature only available with build tools

💡 Why This Matters

🌍 Real World

Every production Tailwind project uses build tools. CDN is only for learning and quick demos.

💼 Career

Interviewers expect you to know the difference and when to use each approach.

1

Create HTML page with Tailwind CDN

Create an index-cdn.html file that loads Tailwind CSS from the CDN and uses a few utility classes to style a heading and button.

Tailwind

Need a hint?

Add <script src="https://cdn.tailwindcss.com"></script> in the head section.

2

Initialize Tailwind with npm

In a new project folder, run npm init -y, install Tailwind CSS as a dev dependency, and generate the config file with npx tailwindcss init.

Tailwind

# Terminal commands:
# Step 1: Initialize npm project
# Step 2: Install tailwindcss
# Step 3: Generate config file

Need a hint?

Use npm install -D tailwindcss to install as a dev dependency, then npx tailwindcss init to create tailwind.config.js.

3

Configure content paths and create input CSS

Update tailwind.config.js to scan your HTML files, and create an input.css file with the three Tailwind directives.

Tailwind

// tailwind.config.js
module.exports = {
  content: [/* Add your content paths here */],
  theme: { extend: {} },
  plugins: [],
}

/* input.css */
/* Add the three Tailwind directives here */

Need a hint?

Set content to ['./*.html'] so Tailwind scans your HTML files for used classes.

4

Build and compare output sizes

Run the Tailwind CLI to compile your CSS, then create the same styled page using the build output instead of the CDN. Add a custom color using theme.extend to demonstrate a build-tool-only feature.

Tailwind

// tailwind.config.js — add a custom color
module.exports = {
  content: ['./*.html'],
  theme: {
    extend: {
      // Add custom color here
    }
  },
  plugins: [],
}

// Terminal: build command
// npx tailwindcss -i input.css -o output.css --minify

Need a hint?

Add a colors object inside extend with your custom color name and hex value.