Tailwind CSS：从“原子地狱”到“真香”——一份避免过度设计的工程师指南

原创已于 2025-09-26 21:27:35 修改 · 432 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

山川湖海

关注

标签

#css #前端

分类前端开发

于 2025-09-26 21:26:26 首次发布

目标：用最少字数，让你决定“用还是不用”，并提供“够用就好”的最佳实践。

1. 一句话省流

三页以内管理后台 → 直接 Bootstrap，别上 Tailwind。
需要像素级还原 / 多主题 / 组件库解耦 → Tailwind 值得，但务必“砍配置 + 白名单 + @apply”，否则就是原子地狱。

2. 与 Bootstrap 的本质差异（代码说话）

场景	Bootstrap 5	Tailwind（按需子集）
自定义品牌色	改 `$primary` 并重新编译源码	在 `tailwind.config.js` 里加一行 `primary: colors.indigo`
头像负间距 + 描边	写自定义 CSS	`-ml-4 ring-4 ring-white`（原子一步到位）
生产体积	最低 38 kB（grid 仅）	4 kB（gzip，白名单配置）
暗黑模式	换整套 `bootstrap-dark.css`	同一行 class：`dark:bg-gray-900`
对话框逻辑	依赖 jQuery/Popper，样式耦合	用 Headless UI，样式 100% 自定义

3. 过度设计现场

<!-- 反面教材：原子地狱 -->
<button class="relative inline-flex items-center justify-center px-4 py-2 md:px-6 md:py-3 text-sm md:text-base font-semibold text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed ...">
  提交
</button>

维护者想改一个字号，得在 200 个文件里全局搜索替换。

4. “够用就好”四步法

① 砍配置（只留 3 档断点 + 限定颜色 & 间距）

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    screens: { sm: '640px', md: '768px', lg: '1024px' },
    colors: ({ colors }) => ({
      transparent: colors.transparent,
      white: '#fff',
      gray: colors.slate,
      primary: colors.indigo,
    }),
    extend: {
      spacing: { 0: '0', 2: '0.5rem', 4: '1rem', 6: '1.5rem', 8: '2rem', 12: '3rem' },
    },
  },
  plugins: [],
}

② 白名单类名（最多 20 个）

布局：flex / grid / block / hidden / md:flex
间距：p/m-0/2/4/6/8
字号：text-sm/base/lg/xl/2xl
颜色：text-gray-600/900 bg-white primary-500
圆角：rounded / rounded-md
阴影：shadow / shadow-md
交互：hover:bg-primary-600 disabled:opacity-50

③ 超了就用 @apply

@layer components {
  .btn {
    @apply inline-flex items-center px-4 py-2 rounded bg-primary-500 text-white hover:bg-primary-600 disabled:opacity-50;
  }
  .card {
    @apply bg-white rounded-md shadow p-4;
  }
}

④ 把原子关进组件（React 示例）

export function Button({ primary, children }) {
  const base = 'btn';          // 已经 @apply 过
  return <button className={base}>{children}</button>;
}

业务层再看不到长串 class。