前言

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 代码。它会根据 HTML 生成 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 框架，相信它还有很长的路要走，未来可期！

—————————

推荐学习教程：阿里大牛600分钟精讲React全家桶让你从入门到精通（基础+进阶+实战+源码）

注：前端资料分享，（学习文档+面试八股文+场景题+简历模板+视频教程等）

仅供参考!!!