Tailwind CSS 简介
Tailwind CSS 安装
兼容性
  1. Tailwind CSS 入门基础
  2. Tailwind CSS 安装

Tailwind CSS 安装

Tailwind 的安装方式有好几种，选哪种取决于你的项目类型。

安装方式对比

方式适用场景优点缺点
CDN快速体验、简单项目零配置，开箱即用文件大，无法定制
npm + PostCSS生产项目完整功能，可定制配置稍复杂
Vite/Webpack现代前端项目集成方便，热更新需要构建工具
Play CDN学习、原型即时预览不适合生产

方式一：CDN 引入

最快的方式，适合快速体验。

<!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 Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
    <h1 class="text-xl font-medium text-black">Hello Tailwind!</h1>
  </div>
</body>
</html>

注意：CDN 方式无法按需生成，文件体积较大（约 3MB），不适合生产环境。

方式二：npm 安装（推荐）

适合大多数项目，支持完整功能和定制。

步骤 1：初始化项目

mkdir my-project
cd my-project
npm init -y

步骤 2：安装 Tailwind

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

这会创建两个文件：

  • tailwind.config.js - Tailwind 配置文件
  • postcss.config.js - PostCSS 配置文件

步骤 3：配置模板路径

编辑 tailwind.config.js：

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

content 数组告诉 Tailwind 去哪些文件里扫描类名。

步骤 4：添加 Tailwind 指令

创建 src/input.css：

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

步骤 5：构建 CSS

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

步骤 6：在 HTML 中引入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./dist/output.css" rel="stylesheet">
  <title>My Tailwind Project</title>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
</body>
</html>

方式三：Vite 项目

Vite 是现代前端构建工具，和 Tailwind 配合很好。

创建 Vite 项目

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

安装 Tailwind

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

配置 tailwind.config.js

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

添加 CSS

创建 src/style.css：

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

在 main.js 中引入

import './style.css'

运行项目

npm run dev

方式四：React 项目

Create React App

npx create-react-app my-project
cd my-project
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 tailwind.config.js：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 src/index.css 添加：

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

Next.js

npx create-next-app@latest my-project --typescript --tailwind

Next.js 13+ 内置 Tailwind 支持，创建项目时选择即可。

方式五：Vue 项目

Vue + Vite

npm create vite@latest my-project -- --template vue
cd my-project
npm install
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: [],
}

配置文件详解

tailwind.config.js 基础结构

module.exports = {
  // 扫描哪些文件的类名
  content: ['./src/**/*.html'],
  
  // 主题配置
  theme: {
    extend: {
      // 扩展默认主题
      colors: {
        'brand': '#3b82f6',
      }
    },
  },
  
  // 插件
  plugins: [],
  
  // 模式：class 或 media
  darkMode: 'media',
}

常用配置示例

自定义颜色：

theme: {
  extend: {
    colors: {
      primary: {
        50: '#eff6ff',
        500: '#3b82f6',
        900: '#1e3a8a',
      }
    }
  }
}

自定义字体：

theme: {
  extend: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      mono: ['Fira Code', 'monospace'],
    }
  }
}

自定义间距：

theme: {
  extend: {
    spacing: {
      '128': '32rem',
      '144': '36rem',
    }
  }
}

编辑器配置

VS Code 插件

安装 Tailwind CSS IntelliSense 插件，提供：

  • 类名自动补全
  • 语法高亮
  • 悬停预览
  • 语法检查

VS Code settings.json

{
  "tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascript",
    "typescript": "typescript"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

常见问题

类名不生效

检查 content 配置是否包含你的文件路径：

content: [
  "./src/**/*.{html,js,jsx,ts,tsx,vue}",
  "./pages/**/*.html",
]

样式被覆盖

确保 Tailwind 的 CSS 在其他样式之后引入，或使用 !important：

<div class="!text-red-500">强制红色</div>

生产构建优化

npx tailwindcss -o build.css --minify
上一章：Tailwind CSS 简介
下一章：兼容性