基於 CSS Utility Classes 的 CSS 框架，就是任何的樣式都是一個 css class。

比如

• text-white 字設成白色
• font-bold 粗體
• py-2 (上下 padding .5rem)
• px-4 (左右 padding 1rem)

數值幾乎都是 0, .25, .5, .75, 1, 1.25...

只要你有 HTML 與 CSS 基礎，很快就可以學會怎麼用 Tailwind CSS 做網站。

Tailwind CSS 作者是 Adam Wathan。目前全職投入開發 Tailwind CSS。他的 YouTube Channel 有許多用 Tailwind CSS 做設計的影片可以跟著學。也有賣一套教學叫做 Refactoring UI。

當下最前沿的新創 zeit.co, next.js 作者 Guillermo Rauch 也推薦從 Tailwind CSS 入門：

If I had to recommend a way of getting into programming today, it would be HTML + CSS with @tailwindcss

The RoI is just incredible. This responsive demo is just ~21 custom CSS props. The whole thing is mostly built-in tailwind classes and vanilla HTML.https://t.co/S7U1OFzoxc pic.twitter.com/9opFHPdryq

— Guillermo Rauch (@rauchg) February 7, 2020

套件

做 darkmode 可以試試看 tailwindcss-theming。

坑

無法支援 AMP，超過了 AMP 要求的大小。