Tailwind CSS 安装

将 Tailwind CSS 集成到你的项目中有多种方式，但最推荐、功能最全的方式是使用 PostCSS 将其作为插件安装。这种方式可以让你利用 Tailwind 的所有特性，如 @apply, @theme 指令以及自定义配置等。

本章将以一个典型的 Vite 项目为例，介绍如何安装和配置 Tailwind CSS。

步骤 1: 创建项目

首先，确保你有一个项目。如果你从零开始，可以创建一个 Vite 项目：

# 使用 NPM
npm create vite@latest my-project -- --template vue

# 使用 Yarn
yarn create vite my-project --template vue

cd my-project

步骤 2: 安装 Tailwind CSS

在你的项目目录中，通过 npm 安装 tailwindcss 及其对等依赖 postcss 和 autoprefixer。

npm install -D tailwindcss postcss autoprefixer

• tailwindcss: Tailwind CSS 核心库。
• postcss: 一个用 JavaScript 转换 CSS 的工具，Tailwind 就是基于它构建的。
• autoprefixer: 一个 PostCSS 插件，可以自动为你添加 CSS 的浏览器厂商前缀。

步骤 3: 生成配置文件

接下来，运行 init 命令来生成 tailwind.config.js 和 postcss.config.js 这两个配置文件。

npx tailwindcss init -p

• tailwind.config.js: Tailwind 的主配置文件，你可以在这里定制颜色、字体、间距等。
• postcss.config.js: PostCSS 的配置文件。

命令执行后，你的项目根目录下会生成这两个文件。

步骤 4: 配置模板路径

打开 tailwind.config.js 文件，在 content 数组中配置你所有模板文件的路径。Tailwind 的 JIT 引擎会扫描这些文件，以确定需要生成哪些 CSS 类。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}", // 匹配 src 目录下所有相关文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

步骤 5: 在 CSS 中引入 Tailwind

在你的主 CSS 文件中（对于 Vite + Vue 项目，通常是 src/style.css 或 src/assets/main.css），使用 @tailwind 指令来注入 Tailwind 的 base, components, 和 utilities 样式。

/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

• @tailwind base: 注入 Tailwind 的基础样式和样式重置（Preflight）。
• @tailwind components: 注入 Tailwind 的组件类。
• @tailwind utilities: 注入 Tailwind 的功能类。

最后，确保在你的应用入口文件（如 src/main.js）中导入了这个 CSS 文件。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './style.css' // 导入 CSS 文件

createApp(App).mount('#app')

步骤 6: 启动开发服务器

现在，运行你的构建流程，启动开发服务器。

npm run dev

打开你的 App.vue 或 index.html，尝试添加一些 Tailwind 的类，例如 text-3xl font-bold underline，如果样式生效，那么恭喜你，Tailwind CSS 已经成功集成到你的项目中了！