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>