1. Getting Started
  2. Play CDN

安装

开始使用 Tailwind CSS

Tailwind CSS 通过扫描所有 HTML 文件、JavaScript 组件以及其他模板中的类名来工作,生成相应的样式,然后将其写入静态 CSS 文件。

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

使用体验 CDN

使用体验 CDN 直接在浏览器中尝试 Tailwind,无需任何构建步骤。体验 CDN 仅用于开发目的,不适用于生产环境。

01

将体验 CDN 脚本添加到您的 HTML 中

将体验 CDN 脚本标签添加到 HTML 文件的 <head> 中,并开始使用 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" 添加自定义 CSS,它支持所有的 Tailwind 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>