1. Getting Started
  2. Play CDN

安装

开始使用 Tailwind CSS

Tailwind CSS 通过扫描所有 HTML 文件、JavaScript 组件和其他模板中的类名,生成相应的样式,并将其写入静态 CSS 文件。

它快速、灵活且可靠——零运行时。

使用 Play CDN 安装 Tailwind CSS

使用 Play CDN 在浏览器中尝试 Tailwind CSS,无需任何构建步骤。 Play CDN 仅用于开发目的,不用于生产。

01

添加 Play CDN 脚本到你的 HTML

将 Play CDN 脚本标签添加到你的 HTML 文件的 <head> 中,然后开始使用 Tailwind 的实用类来样式化你的内容。 utility classes to style your content.

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" 添加自定义 CSS,支持所有 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