一个实用优先的 CSS 框架，HTML 内快速构建网页内容，包含 flex、pt-4、text-center 和 rotate-90 等类，可以直接在标记中组合以构建任何设计。
Tailwind CSS通过扫描所有HTML文件、JavaScript组件及其他模板中的类名，生成相应的样式并将其写入静态CSS文件中。速度快、灵活且可靠——无需在运行时处理。
安装
从头开始使用Tailwind CSS的最简单、最快捷的方法是使用Tailwind CLI工具。CLI也可以作为独立可执行文件使用，无需安装Node.js。
Tailwind CLI
通过 npm 安装 tailwindcss，并创建 tailwind.config.js 文件。
npm install -D tailwindcss
npx tailwindcss init配置模板路径，在 tailwind.config.js 文件中添加所有模板文件的路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}将 Tailwind 指令添加到您的 CSS 中，将 Tailwind 的每个层的 @tailwind 指令添加到您的主 CSS 文件中。
@tailwind base;
@tailwind components;
@tailwind utilities;启动 Tailwind CLI 构建过程，运行 CLI 工具以扫描模板文件中的类并构建 CSS。
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch开始在 HTML 中使用 Tailwind，将编译好的 CSS 文件添加到 <head> 中，然后开始使用 Tailwind 的实用程序类来设置内容的样式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
