1. 快速开始
  2. Play CDN

安装

开始使用 Tailwind CSS

Tailwind CSS 通过扫描你的所有 HTML 文件、JavaScript 组件以及其他模板中的 class 名称,生成对应的样式,并将其写入静态 CSS 文件。

它快速、灵活且可靠 —— 零运行时(zero-runtime)。

使用 Play CDN

使用 Play CDN 可以直接在浏览器中试用 Tailwind,无需任何构建步骤。Play CDN 仅用于开发环境,不建议在生产环境中使用。

01

在 HTML 中添加 Play CDN 脚本

在你的 HTML 文件的 <head> 部分添加 Play CDN 脚本标签,然后就可以开始使用 Tailwind 的工具类为内容添加样式了。

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">      Hello world!    </h1>  </body></html>
02

尝试添加自定义 CSS

使用 type="text/tailwindcss" 可以添加支持所有 Tailwind CSS 特性的自定义 CSS。

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>    <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>
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy