Tailwind 简介与安装

Tailwind 是一个"实用优先"（utility-first）的 CSS 框架。它不提供现成组件，而是提供大量小工具类，比如 flex、text-center、p-4，在 HTML 里组合这些类来搭界面。

好处是：不用起类名、不用在不同文件间跳来跳去、改样式只改 HTML，构建时自动移除没用到的样式，最终 CSS 文件很小。

安装方式

推荐用 npm 安装并配合构建工具：

1. npm install -D tailwindcss
2. npx tailwindcss init 生成配置文件
3. 在 CSS 里写 @tailwind base; @tailwind components; @tailwind utilities;
4. 构建：npx tailwindcss -i input.css -o output.css --watch

也可以直接用 CDN 版本（只建议学习时用）：<script src="https://cdn.tailwindcss.com"></script>

代码示例

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-4">
    <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">T</div>
    <div>
        <div class="text-xl font-semibold">Tailwind 示例</div>
        <p class="text-gray-500">实用类组合，不需要写一行自定义 CSS。</p>
    </div>
</div>