前端Wiki/CSS 框架/进阶/Tailwind CSS 原子化

原子类思想

原子类（Atomic/Utility-First）的思想是：一个类只做一件事，样式靠类名组合而非手写 CSS。text-center 只管居中，p-4 只管内边距，bg-gray-100 只管背景——界面是几十个小类的叠加结果。

下面的可运行示例用纯 CSS 手写了一套迷你原子类，你可以直观看到它的运作方式。它解决两个老问题：一是 CSS 类命名困难（再也不用给容器起 .main-content-wrapper 这种名字）；二是样式互相干扰（每个原子类职责单一，没有级联覆盖的惊喜）。

代价也要清楚：HTML 里的类名会很长很长；修改一个通用样式（比如全部按钮换色）要改很多处——Tailwind 用「抽取组件」和配置文件来缓解。理解「原子类不是 Bootstrap 那种成品组件类」这个本质区别，是掌握 Tailwind 的第一步。

本节要点原子类：一个类一件事，组合搭出样式；优点是不用起类名、无样式干扰；代价是类名冗长，通用样式抽取靠组件化。

CSS

<style>
  /* 手写一套迷你"原子类"：一个类只做一件事 */
  .text-center { text-align: center; }
  .text-red    { color: #d33; }
  .font-bold   { font-weight: 700; }
  .p-4         { padding: 16px; }
  .bg-gray     { background: #f1f3f5; }
  .rounded     { border-radius: 8px; }
  .shadow      { box-shadow: 0 1px 4px rgba(0,0,0,.15); }
</style>
<!-- 样式 = 原子类的组合，不需要写任何自定义 CSS -->
<div class="p-4 bg-gray rounded shadow">
  <p class="text-center font-bold">原子化组合示例</p>
  <p class="text-center text-red">每个类名职责单一</p>
</div>
<!-- 传统写法则要为这个卡片起名 .card 并写一大段 CSS -->

🔗 相关词条Bootstrap Tailwind HTML CSS 内边距组件

📚 推荐阅读

Element Plus v2.2 组件库教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读