Skip to content
全部文档

Play CDN

使用 Play CDN 在浏览器中试用 Tailwind,无需任何构建步骤。

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

在 HTML 中加入 Play CDN 脚本

将 Play CDN 的 script 标签加入 HTML 文件的 <head>,然后使用 Tailwind 的工具类为内容添加样式。

index.html
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/tailwindcss" 添加自定义 CSS,可使用 Tailwind 的全部 CSS 特性。

index.html
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>

文档译文以 MIT 协议授权;原文版权归 Tailwind Labs。湘ICP备2026005453号-2