7. CDN 快速上手：Play CDN

本节目标：不装任何东西，一个 HTML 文件就能用 Tailwind。适合学习、做 Demo、在 CodePen 上快速验证。

Play CDN 是 Tailwind 官方提供的浏览器端运行时。不需要 npm、不需要构建工具，加一行 <script> 就能用。

五秒钟上手

创建一个 index.html，内容如下：

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

双击打开这个文件，你就能看到效果。

自定义主题

想在 CDN 模式下用自定义颜色？加一个 <style> 块，类型设为 text/tailwindcss：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @theme {
    --color-clifford: #da373d;
  }
</style>

然后就能用 text-clifford、bg-clifford 这些类了：

<h1 class="text-clifford">自定义颜色</h1>

它能做什么

Play CDN 支持 v4 的绝大部分功能：

所有工具类（布局、颜色、间距、排版等）
响应式变体（md:、lg: 等）
状态变体（hover:、focus: 等）
深色模式（dark:）
自定义主题（@theme）
任意值（bg-[#316ff6]）

不能做什么（重要）

Warning

Play CDN 不适合生产环境。 原因：

体积大：浏览器要下载整个 Tailwind 运行时 + 编译你用到的所有类，首屏加载慢
无 tree-shaking：即使你只用了 10 个类，编译器也得准备好生成任何类
FOUC：页面加载时会有短暂的无样式闪烁
依赖第三方 CDN：cdn.jsdelivr.net 挂了你的页面就废了

官方原话（来源：Tailwind CSS 官方文档）：“designed for development purposes only, and is not intended for production.”

适用场景

场景	适合？
学习 Tailwind 语法	✅ 完美
CodePen / JSFiddle Demo	✅ 很好
快速验证一个布局想法	✅ 不错
给客户看原型	⚠️ 可以但别交付
正式上线的产品	❌ 千万别

跟构建工具的区别

维度	Play CDN	Vite/CLI 安装
安装	零	需要 npm install
构建步骤	无（浏览器实时编译）	有（预编译）
CSS 体积	大（含编译器）	小（只含用到的类）
首屏性能	差	好
离线使用	不行	可以

Tip

学习阶段用 Play CDN 没问题，但一旦开始做正式项目，赶紧切到 Vite 或 CLI 方式。

下一章我们配 VS Code，让写类名不再痛苦。