Tailwind CSS 安装与配置 #

安装方式概览 #

方式 适用场景 优点 缺点
CDN 快速测试、学习 简单快速 无法定制、体积大
Tailwind CLI 简单项目 无需构建工具 功能有限
PostCSS 生产项目 完整功能、可定制 需要配置
框架集成 React/Vue 等项目 开箱即用 依赖框架

方式一：CDN 引入 #

最简单的方式，适合快速测试和学习：

html 
<!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 CDN</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="bg-blue-500 text-white p-4">
    Hello, Tailwind CSS!
  </div>
</body>
</html>

CDN 配置 #

可以通过内联脚本进行简单配置：

html 
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          brand: '#1da1f2',
        }
      }
    }
  }
</script>

注意：CDN 方式不适合生产环境，因为它包含所有样式，文件体积较大。

方式二：Tailwind CLI #

适合不需要构建工具的简单项目。

安装 #

bash 
# 使用 npm
npm install -D tailwindcss

# 或使用 yarn
yarn add -D tailwindcss

# 或使用 pnpm
pnpm add -D tailwindcss

初始化配置文件 #

bash 
npx tailwindcss init

这会创建 tailwind.config.js 文件：

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

配置内容路径 #

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

创建 CSS 入口文件 #

创建 input.css 文件：

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

构建 CSS #

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

方式三：PostCSS（推荐） #

适合生产环境，提供完整功能。

安装依赖 #

bash 
npm install -D tailwindcss postcss autoprefixer

初始化配置 #

bash 
npx tailwindcss init -p

这会创建两个文件：

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

配置 PostCSS #

postcss.config.js：

javascript 
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

配置 Tailwind #

tailwind.config.js：

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

添加 Tailwind 指令 #

src/index.css：

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

在项目中引入 #

javascript 
// main.js 或 index.js
import './index.css'

框架集成 #

Vite + React #

bash 
# 创建项目
npm create vite@latest my-project -- --template react

# 进入项目
cd my-project

# 安装 Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 tailwind.config.js：

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

src/index.css：

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

src/main.jsx：

jsx 
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

Next.js #

bash 
# 创建项目时选择 Tailwind CSS
npx create-next-app@latest my-project

# 或手动安装
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 tailwind.config.js：

javascript 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Vue + Vite #

bash 
# 创建项目
npm create vite@latest my-project -- --template vue

# 安装 Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 tailwind.config.js：

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

Nuxt.js #

bash 
# 安装
npm install -D @nuxtjs/tailwindcss

nuxt.config.ts：

typescript 
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
})

配置文件详解 #

基本结构 #

javascript 
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 内容扫描路径
  content: ['./src/**/*.{html,js}'],
  
  // 主题配置
  theme: {
    // 扩展默认主题
    extend: {
      colors: {
        brand: '#1da1f2',
      },
    },
    // 完全覆盖默认主题（不推荐）
    // theme: { ... }
  },
  
  // 插件
  plugins: [],
  
  // 核心插件
  corePlugins: {},
  
  // 变体
  variants: {},
}

content 配置 #

javascript 
content: [
  // 所有 HTML 文件
  './src/**/*.html',
  
  // 所有 JS/TS 文件
  './src/**/*.{js,ts,jsx,tsx}',
  
  // Vue 文件
  './src/**/*.vue',
  
  // 使用数组指定多个路径
  './pages/**/*.{html,js}',
  './components/**/*.{html,js}',
  
  // 使用 safelist 确保某些类始终被包含
  './node_modules/my-ui-library/**/*.{js,ts}',
]

safelist 配置 #

javascript 
module.exports = {
  safelist: [
    // 确保这些类始终存在
    'bg-blue-500',
    'text-center',
    
    // 使用模式匹配
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
  ],
}

开发与生产构建 #

开发模式 #

bash 
# 使用 watch 模式
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

生产构建 #

bash 
# 压缩输出
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

package.json 脚本 #

json 
{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
  }
}

下一步 #

安装配置完成后，继续学习 基本概念 了解 Tailwind CSS 的核心工作原理！

最后更新：2026-03-28