体验 CDN

开始使用 Tailwind CSS

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件、以及任何其他模板中的类名，生成相应的样式，然后将它们写入静态 CSS 文件。

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

安装

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

将体验 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>

尝试添加一些自定义 CSS

使用 type="text/tailwind 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>

开始使用 Tailwind CSS

安装

使用 Vite

使用 PostCSS

Tailwind 命令行

框架指南

将体验 CDN 脚本添加到你的 HTML

尝试添加一些自定义 CSS