自学教程

TailwindCSS V4 安装 (CDN)

Tailwind CSS 教程

很多刚接触 Tailwind CSS V4 的同学，都希望可以不用配置 Node、不用 NPM，写几行代码就可以快速体验框架。Play CDN 就是专门用来做快速体验、写 Demo、做原型的方案，但它不等于生产环境的解决方案，里面有不少需要注意的限制与坑。

⚠️重要提示：[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com) 是 Tailwind V3 的 CDN 地址，不能用于V4版本，V4必须使用 @tailwindcss/browser@4。

什么是CDN方式？

CDN就是把 Tailwind V4 的浏览器编译脚本托管在公共网络服务器上，HTML页面直接远程加载脚本。本地电脑不需要安装任何工具，不需要npm，不需要配置文件，保存HTML文件直接在浏览器打开就可以写样式。

类比理解：CDN相当于网页试玩版游戏，点开即用；NPM本地构建相当于完整安装到电脑。试玩版上手方便，但性能、完整功能会受到限制。

V4 Play CDN基础引入

把下面script标签放到HTML的<head>里面，就可以直接使用Tailwind全部内置工具类。

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

最小完整示例，复制保存为 .html，浏览器直接打开运行：

实例

Run this code »
<!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 text-blue-600 p-4">Hello Tailwind!</h1>
</body>
</html>

CDN模式下，还能做哪些自定义？

V4 的 Play CDN 支持一部分自定义能力，使用特殊标签 <style type="text/tailwindcss">，脚本会识别这个标签内部的 V4 专属指令，普通 <style> 标签无法解析 @theme、@utility。

1. 使用 @theme 自定义主题色、设计标记

通过 @theme 指令扩展颜色、断点等设计标记，定义完成后直接在class中使用。

实例

Run this code »
<!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>
    <style type="text/tailwindcss">
      @theme {
        --color-clifford: #da373d;
      }
    </style>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline text-clifford">
      Hello world!
    </h1>
  </body>
</html>

2. 使用 @utility 新增自定义工具类

V4 使用 @utility 来编写自定义工具类，定义出来的工具天然支持 hover:、md:、dark: 等修饰符。

实例

Run this code »
<style type="text/tailwindcss">
    @utility text-shadow {
      text-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
    }

    @utility bg-gradient-card {
      background: linear-gradient(120deg, #0ea5e9, #8b5cf6);
    }

    @utility rotate-hover {
      transform: rotate(1deg);
    }

    @utility my-border {
      border: var(--tw-capture);
    }
    @variants my-border-[*] {
      --tw-capture: --value;
    }

    @theme {
      --color-brand: #165DFF;
    }
  </style>

使用示例：

实例

Run this code »
<div class="bg-gradient-card p-4 rounded-lg text-white hover:rotate-hover">
 测试自定义工具类
</div>

❗重点限制：V4 Play CDN 不支持加载npm包形式的官方插件，例如 @tailwindcss/typography、@tailwindcss/forms，这类插件只能在NPM本地构建项目中通过@plugin指令引入。

⚠️ CDN模式重大局限：千万不要直接拿来做线上正式项目

Play CDN 的定位是开发演示，官方明确不建议直接部署到生产环境。

优点缺点
一行代码引入，零配置，立刻上手体验浏览器端实时编译，无法Tree‑Shaking剔除未使用样式，页面加载性能较差
适合写Demo、学习、原型测试强依赖外部CDN网络；网络异常、CDN服务故障会直接导致页面样式全部错乱
支持@theme、@utility做简单自定义部分高级能力受限，不支持第三方NPM插件包
不用安装Node、npm环境对浏览器版本有门槛，仅支持现代浏览器（Chrome≥111、Safari≥16.4、Firefox≥128）

简单记：学习、写Demo、做原型，使用CDN；网站要对外上线，必须切换为NPM本地构建模式。

什么时候应该放弃CDN，选择本地NPM安装？

遇到下面任意一种场景，就建议切换NPM本地构建：

  1. 项目需要正式对外发布上线；
  2. 需要引入第三方社区NPM插件；
  3. 追求CSS打包后尽可能小的体积；
  4. Vue、React等前端框架项目；
  5. 需要完整的构建、打包工程流程。

NPM本地构建的核心优势：编译阶段扫描你的源码，只将页面实际用到的样式输出到最终CSS，删除全部未使用工具类，打包后CSS体积往往只有几KB到十几KB，这是CDN模式做不到的。

CDN与NPM模式对比总结

模式CDN(Play V4)NPM本地构建(V4)
环境要求无，浏览器直接运行需要Node.js环境
用途定位学习、Demo、原型演示正式项目开发上线
样式体积浏览器实时编译，无法自动剔除无用样式编译阶段自动剔除无用样式，输出CSS体积极小
自定义能力支持@theme、@utility；不支持npm插件包全部能力开放，支持@plugin加载各类插件
网络依赖强，依赖外部CDN服务器打包完成之后完全离线可用
浏览器要求仅现代浏览器可配合构建做降级兼容

新手实操小建议

  1. 初学阶段：直接复制V4 Play CDN代码，本地打开HTML练习，快速熟悉Tailwind的写法，不用被复杂的NPM安装流程劝退。
  2. 练习到一定阶段：要主动熟悉NPM本地安装流程，不要养成线上项目直接使用CDN的习惯。
  3. 注意区分版本：不要把V3的CDN地址用于V4项目，会出现语法报错、@theme/@utility不识别。

写在最后

Play CDN是Tailwind V4给新手提供的入门钥匙，降低体验门槛，但不等于完整形态的Tailwind。CDN帮助我们快速熟悉原子类开发思路；当你准备开发真正上线的项目时，切换NPM本地构建，才能发挥V4全部能力。

拓展阅读：《TailwindCSS V4 安装(NPM)》

标签：

0 条笔记