自学教程

TailwindCSS V3 安装 (CDN)

Tailwind CSS 教程

Tailwind CSS V3 安装(CDN)

对于前端初学者、快速写 Demo、临时制作页面原型的场景，不想搭建繁琐的 Node 环境、不想配置复杂工程，Tailwind CSS V3 的 CDN 模式是最优选择。只需一行代码引入，无需任何本地安装、无需配置文件，打开 HTML 文件即可直接使用所有样式。

需要重点区分：Tailwind V3 和 V4 的 CDN 完全不通用，V3 使用官方默认通用 CDN 地址，语法、自定义方式、插件规则都和 V4 有明显区别，本文专门讲解 Tailwind CSS V3 专属 CDN 完整用法。

一、什么是 Tailwind V3 CDN 模式

CDN 全称内容分发网络，简单理解就是：Tailwind 官方把完整的 V3 样式库托管在公共服务器上，我们的网页直接远程加载资源，零本地环境、零配置、开箱即用。

这种模式主打「快速体验」，适合新手入门学习、临时页面开发、功能原型测试；但受限于网络和编译机制，绝对不适合正式线上项目部署。

通俗类比：CDN 模式是网页试玩版，随开随用；NPM 本地安装是完整版，拥有全部功能和性能优化能力。

二、V3 CDN 两种引入方式

Tailwind V3 提供两种主流 CDN 引入方案，分别适配动态编译演示和纯静态页面场景。

1、Play CDN 动态引入（推荐新手使用）

这是 V3 官方主推的体验方式，支持在线动态编译、自定义主题、自定义工具类、开启官方插件，灵活性更高。

<script src="https://cdn.tailwindcss.com"></script>

将该代码放入 HTML 的 head 标签中，即可全局启用 Tailwind V3 所有内置工具类。

最小可运行完整 Demo

实例

Run this code »
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind V3 CDN 演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-500 text-center mt-10">
    Hello Tailwind CSS V3
  </h1>
</body>
</html>

2、静态 CSS 文件引入

直接引入编译压缩完成的 V3 静态样式文件，无在线编译逻辑，加载更稳定，仅适合简单静态页面展示，不支持在线自定义配置和插件开启。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.0/dist/tailwind.min.css" rel="stylesheet">

三、V3 CDN 支持的自定义能力

很多新手误以为 CDN 只能用默认样式，其实 Tailwind V3 CDN 支持基础自定义配置，可以满足大部分 Demo 开发需求。

1、自定义主题颜色、字号、间距

通过全局 tailwind.config 对象，可扩展自定义品牌色、尺寸、圆角等主题配置，新增的样式可直接通过 class 调用。

实例

Run this code »
<script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d'
          }
        }
      }
    }
  </script>

配置完成后，可直接使用 text-brand、bg-dark 等自定义样式类。

2、自定义工具类（V3 标准写法）

V3 CDN 不支持 V4 的 @utility 语法，统一使用 @layer utilities 定义自定义工具类，也是 V3 专属标准写法。

实例

Run this code »
<style type="text/tailwindcss">
 @layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
}
</style>

定义后即可全局使用 content-auto、text-shadow 自定义工具类。

3、快速开启官方插件

V3 CDN 支持通过 URL 参数快速开启官方内置插件，无需 NPM 安装，一行代码即可启用排版、表单、比例等插件能力。

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>

常用插件说明：forms 美化表单样式、typography 文章排版、aspect-ratio 比例布局，开启后可直接使用 prose、form-input 等插件类名。

四、V3 CDN 核心优缺点与使用禁忌

CDN 模式优势是极简易用，但存在硬性短板，官方明确规定 禁止用于生产环境。

优点缺点
零环境、零配置，一行代码直接使用加载完整全套样式，无法 tree-shaking，CSS 体积大，页面加载慢
适合新手练习、Demo 开发、原型快速搭建强依赖外网 CDN 服务器，网络异常会导致页面样式全部错乱
支持自定义主题、工具类、官方插件不支持 @apply 深度复用、第三方插件、高级编译语法
无需安装 Node 和 NPM，入门门槛极低浏览器实时编译样式，复杂页面会出现卡顿，性能较差

五、必须放弃 CDN、改用 NPM 本地安装的场景

只要满足以下任意一种情况，必须切换为 Tailwind V3 NPM 本地构建模式：

  • 项目需要正式对外上线、部署到生产环境
  • 需要使用 @apply 合并复用样式、自定义组件层样式
  • 需要引入第三方社区插件、深度定制框架能力
  • 需要压缩 CSS 体积、优化页面加载速度
  • Vue、React、Webpack 等工程化框架项目

NPM 本地构建的核心优势：编译时自动扫描项目源码，只保留页面用到的样式，删除所有冗余代码，最终 CSS 文件仅有几 KB，是 CDN 模式无法实现的。

六、V3 CDN 与 V3 NPM 模式对比

对比项V3 CDN 模式V3 NPM 本地构建
环境依赖无，浏览器直接运行需要 Node.js 环境
适用场景学习练习、Demo、原型演示正式项目开发、线上部署
样式体积加载完整样式库，体积大自动剔除无用样式，体积极小
自定义能力支持基础主题、工具类、官方插件支持全部语法、插件、深度自定义
网络依赖强依赖外网，离线无法使用打包完成后完全离线可用

七、新手实操建议

1、初学 Tailwind CSS 优先使用 V3 CDN 模式，不用纠结复杂的工程配置，快速上手语法、熟悉原子类开发思路。

2、练习阶段熟练后，及时学习 V3 NPM 本地安装方式，养成「Demo 用 CDN，上线用 NPM」的开发习惯。

3、严格区分 V3 和 V4 语法，V3 使用 @layer utilities，V4 使用 @utility，切勿混用导致样式失效、代码报错。

4、线上项目坚决不使用 CDN，避免因 CDN 服务波动、网络拦截导致网站样式崩坏。

总结

Tailwind CSS V3 的 CDN 模式是新手最佳入门方式，零配置、上手快、支持基础自定义和插件能力，完全满足学习和原型开发需求。但它只是简化体验版本，缺失性能优化和高级自定义能力，无法适配正式项目开发。掌握 CDN 用法后，进一步学习 NPM 本地构建，才能完整发挥 Tailwind CSS V3 的真正开发优势。

拓展阅读：

《Tailwind CSS V3 安装(NPM)》

《Tailwind CSS V4 安装(CDN)》

标签：

0 条笔记