🚀 Tailwind CSS 安装（CDN 方式）

如果你想快速使用 Tailwind CSS，可以直接通过 CDN 引入，而无需安装任何依赖。这种方式适用于小型项目、临时测试或简单的静态页面。

📌 CDN 引入方式

在 HTML 文件的 <head> 标签中添加以下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS CDN</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="bg-blue-500 text-white text-center p-4">
    Hello, Tailwind CSS!
  </div>
</body>
</html>

🎯 CDN 方式的优缺点

✅ 优点：

  • 无需安装，只需一行代码即可使用。
  • 适用于简单项目，如小型页面或静态网站。
  • 快速体验 Tailwind CSS，不影响本地环境。

❌ 缺点：

  • 无法自定义配置（如修改颜色、间距等）。
  • 文件体积较大，会加载完整的 Tailwind CSS 库。
  • 依赖网络，如果 CDN 服务器不可用，可能影响样式加载。

📌 如何启用 JIT（Just-In-Time）模式？

如果你想使用 JIT 模式，可以通过 tailwind.config 进行配置：

<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#1DA1F2',
        }
      }
    }
  }
</script>

然后可以使用：

<div class="bg-primary text-white p-4">自定义颜色示例</div>

🎯 适用场景

✅ 适用于小型项目或快速测试
✅ 适用于静态 HTML 页面
✅ 适用于想要简单体验 Tailwind CSS 的用户

如果你想深入使用 Tailwind CSS（如优化打包、定制主题等），建议使用 NPM 方式安装。 🚀