跳到主要内容

安装与配置

本章介绍如何在项目中安装和配置 Tailwind CSS。Tailwind CSS 支持多种安装方式，我们将介绍最常用的几种方法。

使用 Vite 安装（推荐）​

Vite 是现代前端项目的首选构建工具，与 Tailwind CSS 配合使用体验最佳。

步骤一：创建项目​

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

npm create vite@latest my-project
cd my-project

步骤二：安装 Tailwind CSS​

安装 Tailwind CSS 及其 Vite 插件：

npm install tailwindcss @tailwindcss/vite

步骤三：配置 Vite 插件​

在 vite.config.js 中添加 Tailwind CSS 插件：

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

步骤四：导入 Tailwind CSS​

在你的主 CSS 文件中添加 Tailwind 指令：

@import "tailwindcss";

步骤五：开始使用​

现在你可以在 HTML 中使用 Tailwind 的工具类了：

<h1 class="text-3xl font-bold text-blue-500">
  Hello Tailwind CSS!
</h1>

使用 PostCSS 安装​

如果你使用的是 Webpack、Rollup 等其他构建工具，可以通过 PostCSS 集成 Tailwind CSS。

安装依赖​

npm install -D tailwindcss postcss autoprefixer

初始化配置文件​

npx tailwindcss init -p

这会创建 tailwind.config.js 和 postcss.config.js 两个文件。

配置模板路径​

在 tailwind.config.js 中配置需要扫描的文件路径：

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

添加 Tailwind 指令​

在你的主 CSS 文件中添加：

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

这三个指令分别引入基础样式、组件样式和工具类样式。

使用 Tailwind CLI​

对于简单的项目或快速原型，可以直接使用 Tailwind CLI。

安装​

npm install -D tailwindcss

创建输入文件​

创建 input.css 文件：

@import "tailwindcss";

构建 CSS​

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

这会监听文件变化并自动重新构建。

使用 Play CDN（仅用于开发测试）​

Play CDN 适合快速测试和学习，不建议在生产环境使用。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-500">
    Hello Tailwind CSS!
  </h1>
</body>
</html>
注意

Play CDN 会在浏览器中运行 Tailwind，性能较差，仅适合开发测试使用。

框架集成指南​

Next.js​

Next.js 项目可以使用 Vite 方式或 PostCSS 方式集成：

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

配置 tailwind.config.js：

export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

React (Create React App)​

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

配置 tailwind.config.js：

export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Vue​

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

配置 tailwind.config.js：

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 src/assets/main.css 中添加：

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

然后在 main.js 中导入：

import './assets/main.css'

配置文件详解​

tailwind.config.js 是 Tailwind CSS 的核心配置文件。

content 配置​

content 选项告诉 Tailwind 扫描哪些文件来提取类名：

export default {
  content: [
    "./src/**/*.html",
    "./src/**/*.js",
    "./src/**/*.vue",
    "./components/**/*.{vue,js}",
  ],
}
提示

正确配置 content 非常重要，否则 Tailwind 无法生成你需要的 CSS。

theme 配置​

theme 选项用于自定义设计令牌：

export default {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

plugins 配置​

plugins 选项用于添加官方或第三方插件：

import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'

export default {
  plugins: [
    forms,
    typography,
  ],
}

开发工具配置​

VS Code 插件​

安装 Tailwind CSS IntelliSense 插件，获得以下功能：

  • 类名自动补全
  • 悬停预览 CSS
  • 语法高亮
  • 错误提示

配置建议​

在 .vscode/settings.json 中添加：

{
  "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

验证安装​

创建一个测试文件验证 Tailwind 是否正常工作：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS 测试</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="bg-white p-8 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-800 mb-4">
      Tailwind CSS 安装成功！
    </h1>
    <p class="text-gray-600">
      如果你能看到这个卡片的样式，说明 Tailwind CSS 已经正常工作。
    </p>
    <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
      测试按钮
    </button>
  </div>
</body>
</html>

小结​

本章介绍了 Tailwind CSS 的多种安装方式：

  • Vite 插件：现代项目的推荐方式，配置简单
  • PostCSS：适用于 Webpack、Rollup 等构建工具
  • CLI：适合简单项目或快速原型
  • Play CDN：仅用于学习和测试

选择适合你项目的安装方式，下一章我们将学习 Tailwind CSS 的核心理念。