前一篇啊寫了將近 5000 字的廢話，你們一定看的很煎熬吧 XD
但是今天終於可以有進度啦！我們要來開始實作 Tailwind 了！
雖然不能一開始就編排美美的樣式，不過按步就班的學肯定沒問題，畢竟 Tailwind 真的很好上手～
在開始之前，我們先來看一段文字：
什麼是兔兔教？?
一種兔兔的信仰教派，本派信奉真神兔兔，且每時每刻都將兔兔放在心中，期待兔兔降臨為我們出生時所帶的原紅蘿蔔通通吃乾淨，以讓我們可以進兔兔天國。
信兔兔，無 Bug
「這隻壞掉的兔子又要傳教了是不是？ 整個網頁工程師生態圈都不知道被牠荼毒多久了！」
欸...呃，先別緊張啦，今天不是要來傳教的 (你確定？)
今天啊，上面的那段文字雖然是兔兔教的教義 (？)，但是同時也是我們今天所要用的測試文字，所以就不用老派的那套 Lorem ipsum 拉丁文了。
那事不宜遲，我們要乘風起飛囉！
起飛的事前準備想要起飛，首先你要有一座機場，但我也知道這很難，所以呢我幫大家準備了一個可以安心練習飛行，就算墜機也很安全的場地，是由 Tailwind 官方所推出的 Playground：Tailwind Play。
Tailwind Play 會跟進 Tailwind 版本更新而支援最新的語法及功能，在撰寫時也會跳出相關的語法提示，非常適合初學者拿來練練手，或是像我撰寫文章時拿來當效果的 Demo。
我們先準備一個簡單的內容架構，是我們改成 html 格式的教義，像是這樣：
<h3>什麼是兔兔教？?</h3>
<p>
一種兔兔的信仰教派，本派信奉真神兔兔，且每時每刻都將兔兔放在心中，期待兔兔降臨為我們出生時所帶的原紅蘿蔔通通吃乾淨，以讓我們可以進兔兔天國。
</p>
<p>
<ul>
<li>每天都吃紅蘿蔔</li>
<li>不吃紅蘿蔔就吃菜</li>
</ul>
</p>
<button>
<b><i>信兔兔，無 Bug</i></b>
</button>
而呈現的效果則會像是：
OK，相信這對你來說一定很簡單，那事不宜遲我們丟進 Tailwind Play 來用 Tailwind 加工吧！ 進去後把畫面左邊的內容取代掉之後：
相信有眼睛的人都看的出來，原本的樣式就已經夠陽春了，結果現在變得更加陽春 ... 連按鈕背景和邊框都不見了！ 不是說不會墜機的嘛！怎麼還沒起飛就爆炸了！ (事實上就是因為還沒起飛，所以才不算墜機啊)
其實啊，這不是 bug，而是 feature 啦！
這個全部樣式都消失的特性，是 Tailwind 的 Preflight 功能，也就是起飛前置作業哦。
「為何全部的樣式都去除掉、變的這麼醜，是起飛前應該要做的事呀？」
原因呢其實很簡單。
這是基於 modern-normalize 所延伸出來的一個特性，而因為每一家瀏覽器的預設樣式都不太相同，所以確保你的設計系統所呈現出來的樣式能在各瀏覽器保持一致性、不用去為了哪一家特別撰寫什麼樣式，所以統一把預設樣式都全部清除了哦！
這邊我簡單列舉一下被 Preflight 的內容：
| 行為 | html 標籤 |
|---|---|
| 去除字體樣式 | <h1>~<h6> |
| 去除清單樣式 | <ol>、<ul>、<li> |
| 去除外距 (margin) | <h1>~<h6>、<hr>、<p>、<pre> |
| 行內顯示改區塊顯示 | <img>、<svg>、<video>、<canvas>、<audio>、<iframe> |
既然了解了這個不是 Bug 之後，我們就該繼續往下走囉～
字體大小 (font-size)藉由 text-{尺寸} 這個功能，我們可以設定 / 改變文字大小，例如 text-base 功能是將文字大小設定為 1rem。 (相當於 16px)
以下是預設可以使用的字體大小功能：
在這邊我們把標題的文字大小設為 text-2xl：
<h3 class="text-2xl">什麼是兔兔教？?</h3>
<p>
一種兔兔的信 ...
有！字體確實變大了，有慢慢要回來的感覺了呢！
但是，好像還少一味...
字體粗細、字重 (font-weight)藉由 font-{粗細} 這個功能，我們可以設定 / 改變文字粗細，例如 font-bold 功能是將字重設為 700。
以下是預設可以使用的字重功能：
接著我們把標題的字體粗細設為 font-bold：
<h3 class="text-2xl font-bold">什麼是兔兔教？?</h3>
<p>
一種兔兔的信 ...
是不是，字體一加粗馬上就有模有樣了起來，但是標題還是感覺哪裡可以再怎麼樣的 ... 讓我們來看看接下來該如何修改吧！
文字對齊 (text-align)透過 text-{方向} 這個功能，我們可以設定 / 改變文字對齊的方向，例如 text-right 功能是將文字置右。
以下是預設可以使用的文字對齊功能：
接著我們用 text-center來把標題置中：
<h3 class="text-2xl font-bold text-center">什麼是兔兔教？?</h3>
<p>
一種兔兔的信 ...
置中後果然看起來好多了！
可是 ... 是不是其他部分讓整體看起來不協調呀？(你這兔毛病也很多欸...)
文字色彩 (text-color)透過 text-{顏色}-{深淺度} 這個功能，我們可以設定 / 改變文字顏色，例如 text-red-500 功能是將文字色彩設定為深淺度 500 的紅色。 (#EF4444)。
以下是預設可以使用的文字色彩功能：
注意：還有些顏色不具深淺度，如白色 (
text-white)、黑色 (text-black)，透明 (text-transparent)
接著我們用 text-green-500 來幫標題上個可愛的紅蘿蔔葉子顏色：
<h3 class="text-2xl font-bold text-center text-green-500">什麼是兔兔教？?</h3>
<p>
一種兔兔的信 ...
看起來更可口了，讓我現在就馬上想要來一根紅蘿蔔呢！
上半部看起來是很好看了啦 ... 但是下面的字好像不是那麼井然有序，
我們再來看看有什麼方式可以把它變得更棒好了。
清單樣式 (list-style-type)透過 list-{樣式類型} 這個功能，我們可以設定清單符號的樣式，例如 list-disc 功能是將清單符號設定為一個圓點。
以下是預設可以使用的清單樣式功能：
接著我們用 list-decimal 把清單內容弄得有先後順序：
<h3 class="text-2xl font-bold text-center text-green-500">什麼是兔兔教？?</h3>
<p>
一種兔兔的信仰教 ... 兔兔天國。
</p>
<p>
<ul class="list-decimal list-inside">
<li>每天都吃紅蘿蔔</li>
<li>不吃紅蘿蔔就吃菜</li>
</ul>
...
上面這邊比較特別一點，因為清單的符號預設是在文字的外側，所以只加上 list-decimal 時還是不會看到符號出現，因為符號跑出畫面外了，所以在加上一個 list-inside 把符號指定到文字的內側。
終於只剩一個東西還沒處理好，快完成了呢！
文字裝飾 (text-decoration)透過文字裝飾這個功能，我們可以設定文字上的小特效，例如 line-through 功能是將文字畫上刪除線。
以下是預設可以使用的文字裝飾功能：
接著我們把按鈕的文字變成藍色，並且用 underline 把它做的像超連結吧：
...
<ul class="list-decimal list-inside">
<li>每天都吃紅蘿蔔</li>
<li>不吃紅蘿蔔就吃菜</li>
</ul>
</p>
<button class="text-blue-500 underline">
<b><i>信兔兔，無 Bug</i></b>
</button>
哇！這樣就全部完成了！
不知道你是不是也覺得又快又輕鬆簡單呢？
兔兔我啊覺得這樣真的是比純 CSS 省力太多了啦～
上面所使用的這些文字類功能性 class 還不是全部，但是常用的大部分我們都用過一遍了。 那麼，今天的部分就到這裡囉！
我會把今天所使用的範例文章和成品的 playground 連結一起貼在下面，大家要記得做作業哦！
給你們的回家作業：關於兔兔們：
兔兔大大，你上面的 list 樣式範例用 list-decimal，但是圖片樣式卻是 list-disc
謝謝你！ 我沒改到 XD
這不好說，等這陣子忙完，繼續寫作業
iThome鐵人賽
看影片追技術