Tailwind CSS 推出即受到广大开发者的欢迎，当前 Github star 数已达 77.8k。它是一个功能类优先（utility-first）的 CSS 框架，它提供了一系列功能类，让开发者可以在 HTML 中通过组合这些功能类（原子类）的方式去快速构建用户界面。

本文将给大家分享下一代原子级 CSS 框架：Mojo CSS，并简要阐述其与 Tailwind CSS 的异同。

Mojo CSS 基本介绍

Mojo CSS 定位为下一代原子级 CSS 框架，是由 Mohammad Zamanian 和 Ali Mirabbasi 开发和维护的开源项目。

Mojo CSS 于 2023 年发布，该框架的工作原理是扫描你的代码并实时创建 CSS 视觉效果，而无需你编写新的 CSS 代码。与 Tailwind 一样，Mojo CSS 也会移除未使用的 CSS，以提高页面性能并简化维护工作。

Mojo CSS 不仅仅是另一个 CSS 框架，它还是一种全新的样式设计方式，以易用性、定制化和速度优先。Mojo 的核心是一个超轻量级（约 15kb gzipped）的 JavaScript 引擎，它可以通过扫描页面上的实用工具动态生成 CSS。

快速安装：

npm install mojocss
# or

yarn add mojocss

为何 Mojo CSS 如此受欢迎？主要归因于一下方面：

1）自定义主题：

告别仅限于暗色模式的局限。Mojo 可让开发者定义无限的主题颜色，让您自由发挥创意，使您的项目真正独一无二。最棒的是什么？非常简单，只需选择三种主色调即可！

mojo({
  base: {
    themes: {
      default: {
        body: "#f2f7f9",
        invert: "#6b88a5",
        primary: "#ff6145",
      },
      // Try out different color themes,
      // make as many you want without worrying about overloading the project.
      dim: {
        body: "#1a2a39",
        invert: "#90a4b8",
      },
      blackout: {
        body: "#000",
        invert: "#999",
      },
    },
  }
});

2）CSS 选择器：

Mojo 打破常规，让您可以在 HTML 中使用真正的 CSS 选择器，并与框架的实用工具无缝集成。这对于那些渴望灵活性和可读性的用户来说，无疑是一场变革。

当 HTML 限制了复杂的 CSS 选择器时，Mojo 的任意选择器就会介入，使您能够在标记中利用原始 CSS 的强大功能，同时充分利用 Mojo 的实用工具。

只需使用 _="" 属性，并在括号中指定所需的选择器即可：

<ul _="(li.active) bg-c-red text-c-white" >
  <li>First Item</li>
  <li class="active">Second Item</li>
  <li>Third Item</li>
</ul>

3）内置色彩引擎：

Mojo 允许您使用无限的颜色以及无数的色调和色差，从而将颜色定制提升到一个新的水平。您的创造力无穷无尽。

<div>
  <div class="bg-c-primary:-10"></div>
  <div class="bg-c-primary:-5"></div>
  <div class="bg-c-primary"></div>
  <div class="bg-c-primary:+5"></div>
  <div class="bg-c-primary:+10"></div>
</div>

4）响应式设计：

Mojo 的响应式设计使用断点变量，告诉网站如何根据屏幕尺寸安排内容。将断点定义为变体，可以根据不同的屏幕尺寸轻松调整元素样式。每个实用工具类都有响应式变体。

5）模式进一步简化：

利用 CSS-IN-JS 语法和嵌套规则，Mojo 的模式简化了 CSS 的编写，使您能够应用全局样式或封装实用程序集，从而减少代码重复。

模式对象的结构如下：

mojo({
  patterns: {
      // Your Styles
  },
  // ... other configurations
});

6）尺寸至关重要：

作者深知轻量级框架的重要性。Mojo 简化后只有约 50kb 大小，压缩后只有约 15kb 大小，非常轻量。

缩小 Mojo 的大小并不意味着牺牲功能或灵活性。尽管体积小巧，但 Mojo CSS 提供了一套全面的实用工具，让您可以制作出美观、功能丰富的用户界面。它在效率和功能之间实现了完美平衡，让您的开发之旅更加顺畅愉快。

Mojo CSS vs Tailwind CSS

Mojo CSS 比 Tailwind 更好吗？下面将比较 Mojo CSS 和 Tailwind 的各种功能，看看哪一个更胜一筹。

1）浏览器兼容性：

首先需要提到的是浏览器兼容性，Tailwind 和 Mojo CSS 对现代浏览器支持很好，不会有太多的兼容性问题。

但 Mojo CSS 为了提供流畅的手机和电脑屏幕兼容性，使用了变体断点。开发者需要使用这些断点来应对网站如何调整大小和排列内容。

2）UI 主题和组件：

Tailwind 提供定制的用户界面组件，包括各种用户界面元素，如输入框、卡片和导航栏。这些组件是使用 Tailwind 的实用工具类构建的，可以实现彻底的定制和风格化。Tailwind 通过提供预定义的内置组件，简化了 CSS 设计过程。Tailwind 拥有 500 多个自定义组件和模板。

至于 Mojo CSS，文档网站上还没有提供模板，也没有发布 Mojo CSS 组件列表，但其自定义定制化主题可能会受到更多开发者的欢迎。

3）集成和扩展性：

Tailwind 拥有庞大的用户群，由此产生了许多插件和资源。你可以使用许多免费的 Tailwind 插件来改进 CSS，比如改进宽高比的插件。你可以在这里和 Tailwind 官方文档中找到更多 Tailwind CSS 插件。

因 Mojo CSS 还比较年轻，与 Tailwind CSS 相比，Mojo CSS 的扩展和插件很少。

但值得一提的是，Mojo CSS 拥有一个名为 Mojo CSS Intellisense 的 Visual Studio 扩展，只要在 Visual Studio 的 CSS 项目中添加 mojo.config.js 文件即可使用。该扩展将为您的 Mojo 实用程序提供自动完成功能，并支持 HTML、JavaScript 和 Vue.js 等语言和框架。

4）速度与性能：

Tailwind 以提供稳定可靠的版本而著称。它采用即时 CSS 编译器，只使用必要的 CSS，而不是预先编译所有内容。Tailwind 会向客户端发送 10kB 的 CSS，以改进 CSS。至于 Tailwind 的可靠性，它是有据可查的，也是公认的。

而 Mojo CSS 虽然没有遇到重大问题，但它是一款较新且测试较少的 CSS。尽管如此，Mojo CSS 的性能仍然令人印象深刻，这主要归功于其轻量级 CSS 样式组件，总大小仅为 50 kB，压缩后为 15 kB。

5）上手成本：

Tailwind 和 Mojo CSS 都有官网及完善的文档，上手成本不高。

使用 Tailwind 可以大大减少 CSS 的编写量，而使用 Mojo CSS 则无需编写任何 CSS。与 Mojo CSS 不同的是，Tailwind 需要对 HTML 和 CSS 有深入的了解。

总结

Tailwind 和 Mojo 这两个 CSS 框架都很优秀。但对于开发者的我们，能满足我们项目需求的才是最好的框架。Mojo CSS 是一款优秀的革命性 CSS 框架，相信它还有很长的路要走，未来可期！