Tailwind CSS 通过 CDN 引入

Tailwind CSS CDN 简介

如果想要在 HTML 页面中使用 Tailwind CSS，我们需要先引入 Tailwind CSS 相关的文件（这是一个 JavaScript 文件）。引入 Tailwind CSS，其实有以下 2 种方式：

引入本地文件。
通过 CDN 引入。

语法：

<!-- 本地方式 -->
<script src="js/tailwindcss.js"></script>

<!-- CDN 方式 -->
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

说明：

如果想要通过引入本地文件的方式，我们需要先去 Tailwind CSS 官网或 GitHub 下载 Tailwind CSS 对应的库文件到本地，然后再通过 script 标签导入。

而 “CDN 方式”，指的是 Tailwind CSS 的核心文件是存放在远程服务器上的。我们只需要使用一个 script 标签去请求该文件，就可以使用 Tailwind CSS 了，非常简单方便。

CDN 是什么？

CDN ，全称 “Content Delivery Network（内容分发网络）”，它就像是一个遍布全球的资源仓库。简单来说，CDN 方式就是直接使用别人服务器上的文件，我们只需要在 script 标签使用绝对路径（以 “https://” 开头）引入，就可以直接使用对应的功能。

对于 Tailwind CSS 的 CDN 方式来说，我们不需要把 Tailwind CSS 核心文件下载到本地，而是直接在 HTML 代码中通过一个链接，引入官方提供的浏览器版解析引擎（@tailwindcss/browser@4）。

当我们刷新页面时，Tailwind CSS 会自动扫描你 HTML 标签中所有的类名，并实时生成对应的 CSS 样式。这种方式非常适合初学的小伙伴进行练习。

此外需要注意的是，Tailwind CSS v3 和 Tailwind CSS v4 的官方 CDN 地址是不一样的，小伙伴们不要搞错了。

<!-- Tailwind CSS v3 -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Tailwind CSS v4 -->
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

Tailwind CSS CDN 示例

接下来，我们通过一个简单的例子来介绍一下如何使用 CDN 方式来引入 Tailwind CSS。

示例：使用 Tailwind CSS CDN

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="bg-white p-8 rounded-2xl shadow-xl max-w-sm w-full">
        <div class="flex flex-col items-center">
            <div class="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center text-white text-3xl font-bold mb-4">
                A
            </div>
            <h2 class="text-2xl font-bold text-gray-800">阿莫</h2>
            <p class="text-gray-500 mt-1">绿叶网站长</p>
            <div class="mt-6 flex gap-4 w-full">
                <button class="flex-1 bg-green-500 text-white py-2 rounded-lg font-medium hover:bg-green-600 transition-colors cursor-pointer">
                    关注我
                </button>
                <button class="flex-1 border border-gray-300 text-gray-600 py-2 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer">
                    发消息
                </button>
            </div>
        </div>
    </div>
</body>
</html>

页面效果如下图所示。

Tailwind CSS CDN 示例

分析：

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

我们直接在 head 标签中通过 CDN 方式（即上面这句代码）来导入 Tailwind CSS 核心库文件，然后就可以直接在页面中使用 Tailwind CSS 原子类了。

在这个例子中，我们使用了大量的 Tailwind CSS 原子类，包括：

布局与对齐：flex、items-center、justify-center（让卡片在屏幕中心居中）。
尺寸与间距：w-24、h-24（定义头像大小）、p-8（内边距）、mt-6（上外边距）。
文字排版：text-2xl（大号字体）、font-bold（加粗）、text-gray-800（深灰色文本）。
视觉外观：bg-white（白底）、rounded-2xl（超大圆角）、shadow-xl（立体阴影）。
交互效果：hover:bg-green-600（鼠标悬停变色）、transition-colors（平滑过渡）。

对于这些原子类，小伙伴们不需要深究，后面我们会详细给大家介绍。

常见问题

1. 为什么我在 VSCode 中编写 Tailwind CSS 类时，并没有自动提示呢？

这是 CDN 引入最大的 “痛点”。因为你的项目中没有本地的 Tailwind CSS 配置文件，VSCode 插件无法识别你的类名。

对于初学的小伙伴来说，建议先使用 CDN 的方式来学习。等到真正做项目（比如 Vue 项目）时，我们应该在 Vite 配置 Tailwind（即下一节的内容），这样就会有完美的自动提示了。

2. CDN 版本能用于正式上线的生产环境吗？

Tailwind CSS 官方强烈不建议在大型生产环境中使用 CDN 版本，主要原因有以下 2 点：

性能损耗与闪烁：浏览器必须先下载一个庞大的 JavaScript 解析引擎，然后在你打开网页的瞬间，实时去扫描整个页面的 HTML 代码并动态生成 CSS。由于页面渲染在前、CSS 生成在后，网速慢的时候页面会先闪过一次 “没有样式的丑陋排版”，然后再突然恢复正常，用户体验极差。
无法极致压缩：正式项目应该使用 Vite 等构建工具打包，构建工具能在你发布代码前，就把未使用的 CSS 全部剔除，最终只生成一个几 KB 的极小纯 CSS 文件。