安装
Tailwind CSS 的工作原理是扫描您的所有 HTML 文件、JavaScript 组件和任何其他模板中的类名，生成相应的样式，然后将它们写入静态 CSS 文件。
它快速、灵活且可靠 — 零运行时。
使用 Play CDN 直接在浏览器中尝试 Tailwind，无需任何构建步骤。Play CDN 仅为开发目的而设计，不适用于生产环境。
将 Play CDN 脚本标签添加到 HTML 文件的 <head> 中，然后开始使用 Tailwind 的实用类来设置内容样式。
<!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.cn/npm/@tailwindcss/browser@4"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>使用 type="text/tailwindcss" 添加支持 Tailwind 所有 CSS 功能的自定义 CSS。
<!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.cn/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>