🚀 Tailwind CSS 安装（NPM 方式）

如果你希望在生产环境或项目开发中使用 Tailwind CSS，建议使用 NPM 方式安装，这样可以：
✅ 启用 JIT 模式，提高性能
✅ 自定义配置（颜色、间距、字体等）
✅ 优化打包，减少未使用的 CSS

📌 1. 初始化项目（如果你还没有前端项目）

如果你还没有一个前端项目，可以先创建一个：

mkdir my-tailwind-project
cd my-tailwind-project
npm init -y   # 初始化 package.json

📌 2. 安装 Tailwind CSS

运行以下命令安装 Tailwind 及相关依赖：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

📌 说明：

  • -D 代表安装为 开发依赖（devDependencies）。
  • npx tailwindcss init -p 会自动生成：
    • tailwind.config.js（Tailwind 配置文件）
    • postcss.config.js（PostCSS 配置文件）

📌 3. 配置 Tailwind

打开 tailwind.config.js 并修改 content 选项，让 Tailwind 只处理我们项目中的 HTML 或 JS 文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

📌 说明：

  • ./index.html：主 HTML 文件
  • ./src/**/*.{js,ts,jsx,tsx}：支持在 JavaScript/TypeScript 组件中使用 Tailwind

📌 4. 在 CSS 文件中引入 Tailwind

在 src/index.css（或 styles.css）文件中添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

📌 说明：

  • @tailwind base;：导入基础样式（Normalize、重置样式）。
  • @tailwind components;：用于扩展自定义组件（可选）。
  • @tailwind utilities;：导入所有工具类（如 bg-blue-500、flex 等）。

📌 5. 运行 Tailwind

在 package.json 的 scripts 中添加：

"scripts": {
  "build:css": "npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch"
}

然后运行：

npm run build:css

📌 说明：

  • -i ./src/index.css：输入 CSS 文件路径。
  • -o ./dist/output.css：输出编译后的 CSS 文件。
  • --watch：监听文件变化，实时编译。

📌 6. 在 HTML 中使用 Tailwind

创建 index.html，并引入编译后的 CSS：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS with NPM</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center items-center h-screen">
  <div class="bg-white p-6 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold text-blue-600">Hello, Tailwind!</h1>
  </div>
</body>
</html>

🎯 完成！你现在可以使用 Tailwind CSS 了！

📌 运行 npm run build:css，然后在浏览器打开 index.html，就可以看到 Tailwind CSS 的效果 🎉。

📌 7. 进一步优化

✅ 启用 JIT 模式（Just-In-Time 编译）

Tailwind 3.0 默认启用 JIT，无需额外配置。

✅ 启用生产模式优化

在 生产环境 中，Tailwind 只会编译用到的 CSS，减少最终 CSS 文件大小：

NODE_ENV=production npx tailwindcss -o ./dist/output.css --minify

这样可以大幅减少 CSS 体积，提高加载速度 🚀。

🎯 总结

安装方式适用场景优点缺点
CDN 引入小型项目/测试快速体验，无需安装不能自定义，CSS 体积较大
NPM 安装生产环境/项目开发可定制，性能优化，适用于前端框架需要安装依赖

如果你希望在真实项目中使用 Tailwind，NPM 方式是最佳选择！ 🚀