tailwind 是一个流行的原子化 css 框架。本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。

能点击进来看到本文的应该都多多少少听过 tailwindcss，本文会结合我的使用体验，将tailwindcss方案的核心思想梳理一番。

Masonry layout can be made with the CSS columns property, and with Tailwind, that's just a couple CSS classes. CSS Columns is about as old as flexbox, but it never seemed to be as popular.

Atomic CSS 一詞出自於 Yahoo! 的工程師 Thierry Koblentz（以下簡稱 TK）在 2013 年所發表的 Challenging CSS Best Practices。

在看這篇文章之前，我們可以先看一下 2022 年 2 月的這篇專訪：The Making of Atomic CSS: An Interview With Thierry Koblentz，在這篇裡面提及了更多 Atomic CSS 出現的背景以及早期在 Yahoo! 內部的應用。

根據文章中的說法，有天他的主管來問他有沒有一種可以不改到 stylesheet 但還是可以動到畫面的方法，因為他想避免把東西改壞。

於是 TK 就做了一個「utility-sheet」，讓工程師可以在不改到 stylesheet 的狀況下依然能改到前端的樣式。聽起來這個 utility-sheet 應該就是一個靜態的 CSS 檔案，然後裡面有著各種 utility class。

接著過了幾年，一個工程主管問他是否能「全部都用 utility class」來改寫 Yahoo! 的首頁，在當時可以說是先驅中的先驅了。

Tailwind CSS offers out of the box support for theming your project. With Tailwind CSS, you can offer multicolor theme feature in your project with few lines of code.