Tailwind CSS - 配置

现代 Tailwind CSS 配置

tailwind.config.js 文件是任何 Tailwind CSS 项目的核心。你可以在其中定义和定制框架的各个方面，以匹配你项目的设计系统。在现代 Tailwind (v3+) 中，配置与强大的即时（JIT）引擎协同工作，JIT 引擎通过扫描你的模板文件按需生成样式。这带来了极快的构建时间，并且生成的 CSS 文件仅包含你实际使用的样式。

现代项目设置

虽然你可以使用 CDN 进行快速演示，但专业的设置涉及构建过程。以下是在使用 Vite 或 Next.js 等工具的现代前端项目中设置 Tailwind CSS 的标准方式。

**步骤 1：安装依赖：** 安装 Tailwind CSS 及其对等依赖项 PostCSS 和 Autoprefixer 作为开发依赖项。

npm install -D tailwindcss postcss autoprefixer

**步骤 2：初始化 Tailwind CSS：** 运行 init 命令以生成 tailwind.config.js 和 postcss.config.js 文件。-p 标志对于创建 PostCSS 配置文件至关重要。
Terminal window
```
npx tailwindcss init -p
```
**步骤 3：配置模板路径：** 打开 tailwind.config.js 并在 content 数组中指定所有模板文件的路径。这是 Tailwind 的 JIT 引擎知道在哪里查找类名的方式。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}', // 根据你的项目结构进行调整
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

**步骤 4：添加 Tailwind 指令：** 创建一个主 CSS 文件（例如 src/index.css）并为 Tailwind 的每个层添加 @tailwind 指令。

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

**步骤 5：导入 CSS 并启动构建过程：** 将 CSS 文件导入到你的主入口点（例如 main.jsx 或 App.js）并启动开发服务器。Tailwind 现在将监视你的文件并在你工作时生成 CSS。

// 例如，src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css' // 导入 CSS 文件

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

核心配置概念

tailwind.config.js 文件允许你自定义框架的每个细节。以下是最重要的几个部分：

**content**：如上所示，这是生产构建最关键的设置。它告诉 Tailwind 扫描哪些文件来查找工具类，确保未使用的样式被移除（tree-shaking），从而实现最小的文件大小。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/pages/**/*.{html,js,jsx}',
    './src/components/**/*.{html,js,jsx}',
  ],
  // ...
}

**theme**：你可以在这里定制项目的设计系统。你可以调整颜色、字体、间距、断点等。为了在添加自己的内容的同时保留 Tailwind 的默认设置，请使用 extend 对象。

/** @type {import('tailwindcss').Config} */
export default {
  // ...
  theme: {
    // 这将覆盖整个默认调色板
    colors: {
      'primary': '#1fb6ff',
      'secondary': '#7e5bef',
    },
    extend: {
      // 这将添加到默认主题
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

**plugins**：使用官方或第三方插件扩展 Tailwind 的功能。插件可以添加新的工具类、组件或基础样式。

/** @type {import('tailwindcss').Config} */
export default {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    // require('some-third-party-plugin'),
  ],
}

**darkMode**：Tailwind 中的一项一流功能。配置深色模式的激活方式。'class' 策略是最常见和最灵活的，允许用户手动切换深色模式。它通过向父元素（通常是 <html> 或 <body>）添加 .dark 类来工作。

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  // ...
}

// HTML 中的使用示例
// <html class="dark">
//   <body class="bg-white dark:bg-slate-900">
//     ...
//   </body>
// </html>

**prefix**：为所有 Tailwind 工具类添加自定义前缀，以避免与其他 CSS 库的命名冲突。这在将 Tailwind 引入大型现有代码库时特别有用。

/** @type {import('tailwindcss').Config} */
export default {
  prefix: 'tw-',
}

// Usage in HTML
// <div class="tw-text-center tw-p-4">...</div>

**important**：控制 Tailwind 工具类的特异性。虽然你可以在任何工具类前添加 ! 前缀（例如 !p-4），但你也可以配置全局行为。

将 important 设置为根选择器（如应用程序 ID）是推荐的最佳实践。它在不依赖 !important 的情况下增加了特异性，因为 !important 可能难以覆盖，并可能与使用内联样式的第三方库发生冲突。

// 推荐策略：使用选择器
/** @type {import('tailwindcss').Config} */
export default {
  important: '#app',
}

// 确保你的根元素具有此 ID
// <body id="app">...</body>

// 遗留策略（请谨慎使用）
// module.exports = {
//   important: true,
// }