Glittering's blog

Appearance

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

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

一句话：

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

你在这里定义：

  • 颜色体系
  • 间距 / 字号 / 圆角
  • 断点
  • 动画
  • 暗黑模式
  • 插件
js
// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: { },
  plugins: []
}

二、theme vs extend（重点） ​

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

❌ 不推荐新手用

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

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

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

✅ 正确姿势

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

📌 结论

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

三、最常用的 extend 项 ​

1️⃣ 颜色（Colors） ​

定义主色 / 语义色 ​

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

使用：

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

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

js
colors: {
  primary: {
    50:  '#e6f4ff',
    100: '#bae0ff',
    500: '#1677ff',
    700: '#0958d9'
  }
}
html
<div class="bg-primary-500 hover:bg-primary-700"></div>

📌 这样才像设计系统

2️⃣ 字号（fontSize） ​

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

结构：

js
fontSize: [fontSize, lineHeight]

3️⃣ 间距（spacing） ​

js
extend: {
  spacing: {
    18: '72px',
    22: '88px'
  }
}
html
<div class="mt-18 px-22"></div>

📌 常用于不规则设计稿

4️⃣ 圆角（borderRadius） ​

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

5️⃣ 阴影（boxShadow） ​

js
extend: {
  boxShadow: {
    card: '0 4px 12px rgba(0,0,0,.08)',
    popup: '0 8px 24px rgba(0,0,0,.12)'
  }
}
html
<div class="shadow-card"></div>

6️⃣ 断点（screens） ​

js
extend: {
  screens: {
    xs: '480px',
    '3xl': '1600px'
  }
}
html
<div class="xs:text-sm 3xl:text-xl"></div>

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

js
export default {
  darkMode: 'class'
}

使用：

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

Vue 切换：

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

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

定义动画 ​

js
extend: {
  keyframes: {
    fadeIn: {
      '0%': { opacity: 0 },
      '100%': { opacity: 1 }
    }
  },
  animation: {
    fade: 'fadeIn .3s ease-out'
  }
}
html
<div class="animate-fade"></div>

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

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

📌 使用原则

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

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

1️⃣ content 一定要全 ​

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

2️⃣ 动态 class 会被 purge 掉 ​

❌

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

✅

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

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

js
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'
      }
    }
  }
}

九、什么时候该改 config？ ​

✅ 应该改

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

❌ 不该改

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

Copyright © 2026