Hyoban

如果你還不太懂 HTML 和 CSS#

HTML 大概是長成下面這樣子的。每個 HTML 標籤都有自己的含義（如表示圖片或者鏈接）；或由一組標籤包圍，或者自閉合；可以層級嵌套。N 多個 HTML 標籤共同組合而成為你在瀏覽器中看到的網頁。

<img alt="A dog on an iPad" src="/assets/images/dog-ipad.jpg" />
<p class="text">Here is <a href="https://example.com">a link</a></p>

如果你對有哪些常用的 HTML 標籤感興趣，可以看這個 Simple.css 的 Demo 網頁。

但是，如果只有 HTML，你的網頁可能看起來會非常簡陋，只有瀏覽器所提供的默認樣式。所以，我們需要 CSS 來為我們的網頁添加樣式。

.text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}

.text 是一個 CSS 類選擇器，它會匹配到 HTML 中 class 中包含 text 的標籤，從而為其添加樣式。這裡我們簡單設置了一下文本的顏色，大小和行高。

結合 HTML 和 CSS，你就已經可以做出好看的靜態網頁了。如果你對還有哪些 CSS 的語法感興趣，別急，看完這邊文章你會得到一個極佳的學習文檔。

Tailwind 是什麼#

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

以上是 Tailwind 的官方介紹。簡單來說，它就是一個原子化 CSS 框架，提供了很多工具類來讓你可以直接在 HTML 為你的網頁添加樣式。

在開始介紹如何通過 Tailwind 學習 CSS 之前，我們先來看看 Tailwind 幫我們做了什麼：

1. 掃描你的 HTML 文件，找到所有的 class 屬性
2. 根據這些 class 屬性中匹配的工具類，如 flex m-1，生成對應的 CSS 內容

是的，就這麼簡單。你完全可以在不使用 Tailwind 的情況下，手動寫出 CSS 的內容。它不像 Vue.js 或者 React 那樣，理解它們所做的事情需要付出很大的學習成本。

為什麼要用 Tailwind 來學習 CSS#

與通過 MDN 的文檔來學習相比：

1. Tailwind 的文檔更加簡潔，更多圖例；MDN 的文檔更加詳細，更多概念。
   
2. Tailwind 分類更加清晰，更能突出重點；MDN 的文檔更加全面，但是容易讓人迷失。
   • CSS 的知識點很多，但是日常開發中我們只會用到其中的一部分。
3. Tailwind 的文檔有助於你更快了解一些關鍵概念，如 深色模式支持 和 響應式設計。
4. Tailwind 的 主題系統 有助於你寫出更有設計感的頁面。
5. Tailwind 提供一個功能強大的 Playground，讓你可以直接在瀏覽器中進行學習。

如果你是個設計師#

作為一個設計師，如果你只會使用設計工具來做設計的話，那麼可能會遇到的一個問題是：

開發：你這個設計我不好實現啊！！

但是，如果你用代碼做設計，他再敢這麼說，你就直接把 Tailwind Playground 的鏈接丟給他，看他還敢多說話。

同時，和開發用一套技術意味著你們能獲得效率上的提升：

1. 開發不需要自己將整套設計一點點的對應到代碼實現中
2. 設計能確保開發百分百還原自己的設計

最後要強調的#

並非所有的 Tailwind 工具類都十分直觀且簡單，就好像 flex-row 等於 flex-direction: row;一樣。grid-cols-1 對應生成的 CSS 要稍複雜一些，它等於 grid-template-columns: repeat(1, minmax(0, 1fr));。在你沒有理解它幫你生成的 CSS 的含義之前，請不要繼續只看 Tailwind 的文檔，你應該做的是去 MDN 的文檔中學習這個屬性的具體含義。

在 Playground 中，你可以通過自動補全和將鼠標移上去的方式來看到某個工具類對應生成的 CSS。所以，開始學習 Tailwind 吧，即使你不會 CSS。它優秀的文檔和 Playground 會成為你學習的好幫手。

一個插件#

在 vscode 中，你可以通過安裝我寫的一個插件來看到哪些文本會生成對應的 CSS。