声明：我还没有在任何项目中使用过 Tailwind.css。

Tailwind.css 不仅是一个 utility class 的集合。它实际上定义了一个通过以 token list 语法（HTML class）承载的 DSL，用来书写等价于 CSS/Sass/Less 的样式声明。写到 class 里的每个 token 其实几乎就是一个 mixin，在现代化工具链支持下，这个 mixin 可以带参数。每个 mixin 颗粒度可大可小，有一部分做到了和具体值解耦从而可以对接 design token，也有另一部分是纯粹的原子类（一个类名等价一条固定的样式声明，比如flex-wrap）。和纯原子类的方案的不同之处在于，这种 DSL 已经部分表达了设计上的规约，并且这种规约是可以响应全局更新的。

在 HTML class 中描述样式，内容和样式就有了强耦合。场景、优势、劣势也很明确，这部分和 CSS vs inline style 其实是一样的。解耦有成本，而内联 DSL 免去了作为胶水层的 selector，降低了极大的起名负担。CSS 本身的问题，vjeux 在他那个著名的React: CSS in JS[1]的演讲里面其实把问题已经阐述得很清楚了。

参考

  1. ^React: CSS in JShttps://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。