时机已到! 原子化接替语义化声明，TailwindCSS使用指南

头图怎么能少？

博客：https://www.mintimate.cn Mintimate’s Blog，只为与你分享

页面框架

页面前端框架，真的是发展的很快。在前后端未分离的时代，我们经常提及的是 MVC 架构。然而，在纯前端领域，HTML、CSS 和 JavaScript 也可以被看作是一种类似的分层结构，它们构成了结构层、样式层和交互层。类比如下：

• 结构层：HTML 负责定义页面的结构和内容。
• 样式层：CSS 负责定义页面的样式和外观，CSS 通过选择器和属性来指定页面元素的样式。
• 交互层：JavaScript 负责处理页面的交互和行为，通过事件处理、DOM 操作等来实现与用户的交互，并控制页面的行为。

“三剑客”共同搭建起来页面前端的大hosue：

HTML+CSS+JS

当然，如果每个项目都从头开始写CSS、JavaScript，显然是不太现实的，并且不利于样式和系统风格的统一，后期维护也会“跑断腿”。

所以，我们一般会封装样式为样式库，方便我们直接后续调用。比如，使用

• Bootstrap: https://getbootstrap.com/

当然，现在以及2023年了，我推荐可以尝试使用:

• TailwindCSS: https://tailwindcss.com/docs/installation

TailwindeCSS

首先，需要注意⚠️：Tailwind CSS不采用传统的CSS规则书写，而是采用基于类的Utility-first方法。

Utility-first

基于类的Utility-first方法，是指通过组合大量低级实用类，来构建出高级组件和页面结构，而不是通过选择器等方法直接写入样式规则。类似于我们需要一个果篮，而这个果篮有多种不同水果🍅组成。

将CSS看作一套可重用的样式“工具”或模块，每个类只对应一个特定的样式效果，同时可以自定义，比如：我定义当前页面的bg-blue-500对应的颜色定制为 yellow，类似于送人时候，送两个果篮，一个果篮想放青苹果🍏，另外一个想放红苹果🍎。

TailwindCSS Star

正因为如此，TailwindCSS是需要编译的：

• Tailwind CSS定义了大量实用类，但不会直接写入其样式规则定义。
• 这些实用类对应的实际CSS规则需要动态生成。
• 根据不同的配置文件,生成的规则会有差异。
• 需要对实用类进行分类管理,优化输出文件体积。

这就保证了Tailwind CSS可以实现高度定制化，同时输出效率也较高。

版本历史

TailwindCSS自发布出，就支持原子化操作，当然TailwindCSS也在不断发展。其中：V2.0、V3.0和现在的V3.3算是比较大的版本。

TailwindCSS 2.0

参考更新日志发布的地址：https://tailwindcss.com/blog/tailwindcss-v2

重点是：

• 支持@apply引入其他原子样式来构建自己的CSS样式；
• 支持暗色模式，以及更多的色彩和自定义；
• 不再支持IE浏览器

其实最重要的是支持@apply来构建自己的CSS样式：

// 语义化创建一个Button样式
.btn {
  @apply bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50;
}

还有就是支持暗色标签：

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-500 dark:text-gray-300">
    这样可以根据顶级HTML是否含有我们的Dark标识，切换样式
  </p>
</div>

TailwindCSS 3.0

参考更新日志发布的地址：https://tailwindcss.com/blog/tailwindcss-v3

3.0，最重要的功能：

• Just-in-Time引擎默认启用

启动后，项目的启动速度大大提高。

优势小结

其实优势和特点，上文就已经提及，这里做一个小的总结：

1. 统一页面样式，提供开发速度；
2. 响应式设计，方便适配移动端设备；
3. 编译打包，插槽定制。

原子化对比语义化

前文说过，TailwindCSS是典型的原子化CSS（Atomic），对比传统的语义化CSS（Semantic）还是有一些特点和区别。

举个官网的例子，开发一个消息提示：

消息

如果使用的是语义化的开发，那么代码可能长这样：

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

但是，如果使用的是TailwindCSS，应该是这样的：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

使用语义化的 CSS 类名有以下几个主要优势:

• 代码可读性更强。类名如p-6、max-w-sm等一目了然地表达了样式效果，甚至可以联想到最终的效果🤔。
• CSS 更模块化。不同的类可组合使用,避免重复样式。
• 更易维护。直观的类名和模块化 CSS 让其他开发者更容易理解和修改样式。
• 可重用性更高。模块化的类可跨页面、组件重复使用。
• 前后端分离。HTML 和 CSS 解耦,样式由类控制,便于后端渲染。

开发实战

刚刚举得都是官网的例子，这里我举个我开发的例子，比如：我最近写了一个提示框，是这样的：

提示框

当然，要符合页面的设计，也做了亮色模式处理：

亮色模式

这个时候，我们使用TailWindCSS原子化处理，应该怎么设计？

• 首先，整体需要一个白色的box底，后面外围需要圆角，内部列表展示提示信息；
• 其次，内部重点使用下划线进行凸显，颜色要和主题相映衬；
• 最后，暗色模式下；需要改变字体的颜色。

通过上述的分析，我们可以很轻松地联想到关键词：bg-white dark:bg-gray-800 rounded-3xl shadow-md，以及list-disc、text-sky-500 dark:text-sky-300 decoration-indigo-400 underline underline-offset-4；当然，这些都是在参考和学习了TailwindCSS文档后，才知道：

TailwindCSS官方文档

不要说什么学习TailwindCSS，从语义化CSS转换到原子化CSS，需要读官方文档、需要学习设计系统的知识。这年头主流的前端框架组件库，那个是一点都不需要学习？

之后，再进行分析： 需要放在一个容器布局上，所以我们需要使用gird进行布局：

Gird布局

最后的代码：

<div class="md:flex">
  <div class="p-5">
    <div
        class="uppercase tracking-wide text-2xl text-indigo-500 dark:text-indigo-200 font-semibold"
    >
      额外操作
    </div>
    <div
        class="mt-2 text-slate-500 dark:text-slate-400 w-100">
      <p class="text-lg font-medium">
        <ul class="list-disc">
          <li>你可以安装一个User-Agent切换插件,并将它设置为Edge Android,以此测试移动端的搜索；</li>
          <li>浏览器会限制页面打开多页面，你<span
              class="decoration-sky-400 text-pink-500 dark:text-pink-300">需要运行本网站打开多个标签页</span>；
          </li>
          <li>本网站可能存在广告，你可以<span
              class="text-sky-500 dark:text-sky-300 decoration-indigo-400"
          >点击广告测试浏览器的额外性能『滑稽😁』</span>ヾ(≧≦)〃
          </li>
        </ul>
      </p>
    </div>
  </div>
</div>

效果也不错，看看移动端的效果：

移动端效果

其实TailwindCSS也广泛运用在各个UI库。

组件UI库

这里我再介绍一个组件UI库，方便直接开箱即用TailwindCSS。很早之前，个人项目就开始使用Vue3，但是目前Vue3的组件，大部分还是Alpha阶段。

比如：Vue2阶段很火的Element UI，目前我认为Element Plus还没发展到像2.0时候那样好用。而且我很不适应的地方：label会被用来作为值，但label这个单词本身并没有值的含义！

后来使用了Arco Design: https://arco.design/：

Arco Design

很不错的UI库和设计规范，不过我最近用的Nuxt3；Arco Desgin还在适配，所以其实这次还是推荐之前就推荐过的：NuxtUI: https://ui.nuxt.com/

Nuxt UI

基本上，组件就是基于TailwindCSS开发的，比如设置主题颜色：

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

如果想从组件UI上直接上手TailwindCSS，那么使用NuxtUI是一个不错的选择。

总结

Tailwind CSS通过提供大量预设样式类,极大简化了样式的编写。

开发者可以快速组合出自定义界面,提高开发效率。相比语义化CSS,原子化CSS类名方式更具扩展性,是未来CSS编写的发展趋势。

本文系统概述了从语义化到原子化的演进,以及如何上手使用Tailwind CSS。对于想采用新的CSS编写范式的开发者具有很强的参考价值。当然，更多的内容，还等这大家探索，或者有机会，出其他教程给大家。

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表