Tailwind CSS v4 CDN: The Fastest Setup Guide

TL;DR: The v4 Play CDN is the fastest way to try Tailwind: add a single script tag and start using classes immediately. It’s for development and prototypes only — for production, install Tailwind via CLI or Vite. v4 targets modern browsers only (Safari 16.4+, Chrome 111+, Firefox 128).

What’s the fastest way to add Tailwind v4 via CDN?

Short answer: Add the v4 Play CDN to your <head> and use utility classes right away.

<!doctype html>  
<html>  
  <head>  
    <meta charset="UTF-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>  
  </head>  
  <body>  
    <h1 class="text-3xl font-bold">Hello, Tailwind v4</h1>  
  </body>  
</html>

One script, no build step, perfect for quick demos and CodePens.

Can I customize Tailwind v4 while using the CDN?

Short answer: Yes — add a <style type="text/tailwindcss"> block and define tokens with @theme.

<style type="text/tailwindcss">  
  @theme {  
    --color-brand: #6b5cff;  
    --font-display: "Inter", system-ui, sans-serif;  
  }  
</style>  

<h2 class="text-2xl font-bold text-brand">Brand color via @theme</h2>

This CSS-first approach reflects v4’s “configure in CSS” philosophy.

Is the Play CDN production-ready?

Short answer: No. It’s designed for development/prototyping. For production, install Tailwind via the CLI or Vite.

Production options:

Tailwind CLI: npx @tailwindcss/cli -i ./src/input.css -o ./dist/tailwind.css
First-party Vite plugin: @tailwindcss/vite for best performance.

Which browsers are supported in v4?

Short answer: v4 targets modern browsers only — Safari 16.4+, Chrome 111+, Firefox 128+. Stick with v3.4 if you must support older browsers.

How do I migrate from CDN to a proper build?

Short answer: Create a CSS entry, import Tailwind, and build with CLI/Vite.

Create src/input.css

@import "tailwindcss";  
/* optional: @theme tokens here */

Build with CLI

npx @tailwindcss/cli -i ./src/input.css -o ./dist/tailwind.css --watch

Or use the Vite plugin for even better DX

// vite.config.ts  
import { defineConfig } from "vite";  
import tailwindcss from "@tailwindcss/vite";  
export default defineConfig({ plugins: [tailwindcss()] });

What common “gotchas” should I expect?

Short answer: CDN is convenient but limited.

@apply isn’t available on CDN. It needs a build step (PostCSS).
CDN is dev-only. Don’t ship it to production; install Tailwind.
Mixing build + CDN can conflict. Prefer one source of truth (move fully to CLI/Vite for apps).

What should I use next to design faster?

Short answer: Plug in prebuilt components, then swap CDN for a build when you go live.

Build a quick hero with Tailkits UI – Hero Sections (copy-paste, v4-ready).
Explore Tailkits UI (200+ components) to accelerate layout.
When you switch to production, see Install Tailwind CSS in Laravel with Vite.
Browse Tailwind Templates and Free Components for ready patterns.

Last updated: October 29, 2025

FAQ

Can I pin a major version with the Play CDN?

Yes — the official snippet uses `@4`, which tracks the latest v4.x. For strict reproducibility in production, use the CLI/Vite build instead of CDN.

Can I use @apply with the Play CDN?

No. `@apply` requires a build pipeline (PostCSS). Use CLI/Vite.

Is there a performance benefit to the Vite plugin?

Yes. The first-party v4 Vite plugin is optimized and faster than generic PostCSS setups.

What changed in v4 that impacts CDN users?

CSS-first configuration and modern-browser targeting. Expect fewer legacy polyfills and a simpler setup.

Why isn’t the CDN recommended for production?

You’ll ship unnecessary styles and lose build-time features like purging and `@apply`. Use CLI/Vite to tree-shake and optimize.