Tailwind CSS Config

「什么时候该改 config，什么时候不该」。

# 一、tailwind.config.js 是干嘛的？

一句话：

设计系统（Design Token）配置中心

你在这里定义：

颜色体系
间距 / 字号 / 圆角
断点
动画
暗黑模式
插件

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

1
2
3
4
5
6

# 二、theme vs extend（重点）

# 1️⃣ theme：完全覆盖默认值

❌ 不推荐新手用

theme: {
  colors: {
    primary: '#1677ff'
  }
}

1
2
3
4
5

⚠️ 后果： 👉 默认的 red / blue / gray 全没了

# 2️⃣ extend：在默认基础上扩展（99% 用这个）

✅ 正确姿势

theme: {
  extend: {
    colors: {
      primary: '#1677ff'
    }
  }
}

1
2
3
4
5
6
7

📌 结论

👉 业务项目：永远优先用 extend

# 三、最常用的 extend 项

# 1️⃣ 颜色（Colors）

# 定义主色 / 语义色

extend: {
  colors: {
    primary: '#1677ff',
    success: '#52c41a',
    warning: '#faad14',
    danger: '#ff4d4f'
  }
}

1
2
3
4
5
6
7
8

使用：

<div class="bg-primary text-white"></div>

# 定义一整套色阶（推荐）

colors: {
  primary: {
    50:  '#e6f4ff',
    100: '#bae0ff',
    500: '#1677ff',
    700: '#0958d9'
  }
}

1
2
3
4
5
6
7
8

<div class="bg-primary-500 hover:bg-primary-700"></div>

📌 这样才像设计系统

# 2️⃣ 字号（fontSize）

extend: {
  fontSize: {
    xs: ['12px', '16px'],
    sm: ['14px', '20px'],
    base: ['16px', '24px'],
    lg: ['18px', '28px']
  }
}

1
2
3
4
5
6
7
8

结构：

fontSize: [fontSize, lineHeight]

# 3️⃣ 间距（spacing）

extend: {
  spacing: {
    18: '72px',
    22: '88px'
  }
}

1
2
3
4
5
6

<div class="mt-18 px-22"></div>

📌 常用于不规则设计稿

# 4️⃣ 圆角（borderRadius）

extend: {
  borderRadius: {
    xl: '12px',
    '2xl': '16px'
  }
}

1
2
3
4
5
6

# 5️⃣ 阴影（boxShadow）

extend: {
  boxShadow: {
    card: '0 4px 12px rgba(0,0,0,.08)',
    popup: '0 8px 24px rgba(0,0,0,.12)'
  }
}

1
2
3
4
5
6

<div class="shadow-card"></div>

# 6️⃣ 断点（screens）

extend: {
  screens: {
    xs: '480px',
    '3xl': '1600px'
  }
}

1
2
3
4
5
6

<div class="xs:text-sm 3xl:text-xl"></div>

# 四、暗黑模式配置（常用）

export default {
  darkMode: 'class'
}

1
2
3

使用：

<div class="bg-white dark:bg-gray-900"></div>

Vue 切换：

document.documentElement.classList.toggle('dark')

# 五、动画 & keyframes（进阶但常用）

# 定义动画

extend: {
  keyframes: {
    fadeIn: {
      '0%': { opacity: 0 },
      '100%': { opacity: 1 }
    }
  },
  animation: {
    fade: 'fadeIn .3s ease-out'
  }
}

1
2
3
4
5
6
7
8
9
10
11

<div class="animate-fade"></div>

# 六、抽象样式：@apply（谨慎）

/* main.css */
.btn {
  @apply px-4 py-2 rounded bg-primary text-white hover:bg-primary-700;
}

1
2
3
4

📌 使用原则

组件库 / 公共组件 ✅
页面私有样式 ❌（直接 class）

# 七、和 Vue / Vite 配合的坑点

# 1️⃣ content 一定要全

content: [
  './index.html',
  './src/**/*.{vue,js,ts}'
]

1
2
3
4

# 2️⃣ 动态 class 会被 purge 掉

❌

<div :class="`bg-${color}-500`" />

✅

const colorMap = {
  primary: 'bg-primary-500',
  danger: 'bg-danger-500'
}

1
2
3
4

# 八、推荐一套【企业级 config 模板】

export default {
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#e6f4ff',
          500: '#1677ff',
          700: '#0958d9'
        }
      },
      boxShadow: {
        card: '0 4px 12px rgba(0,0,0,.08)'
      },
      borderRadius: {
        xl: '12px'
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 九、什么时候该改 config？

✅ 应该改

设计稿有明确主色 / 圆角 / 阴影规范
想统一风格
做组件库 / 中后台

❌ 不该改

只是某一个页面特殊样式
一次性 demo
纯试验项目

上次更新: 2025/12/26, 01:42:33

← Tailwind CSS基础知识 Tailwind 插件机制→