iT邦幫忙

2021 iThome 鐵人賽

DAY 3
3
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!系列 第 4

Day 03:「開始乘風飛行!」- 樣式都不見了嗎?快用 Tailwind 輕鬆調整文字版式

Day03-Banner

前一篇啊寫了將近 5000 字的廢話,你們一定看的很煎熬吧 XD
但是今天終於可以有進度啦!我們要來開始實作 Tailwind 了!

雖然不能一開始就編排美美的樣式,不過按步就班的學肯定沒問題,畢竟 Tailwind 真的很好上手~

在開始之前,我們先來看一段文字:

什麼是兔兔教??

一種兔兔的信仰教派,本派信奉真神兔兔,且每時每刻都將兔兔放在心中,期待兔兔降臨為我們出生時所帶的原紅蘿蔔通通吃乾淨,以讓我們可以進兔兔天國。

信兔兔,無 Bug

「這隻壞掉的兔子又要傳教了是不是? 整個網頁工程師生態圈都不知道被牠荼毒多久了!」

欸...呃,先別緊張啦,今天不是要來傳教的 (你確定?)
今天啊,上面的那段文字雖然是兔兔教的教義 (?),但是同時也是我們今天所要用的測試文字,所以就不用老派的那套 Lorem ipsum 拉丁文了。

那事不宜遲,我們要乘風起飛囉!

carrotPoint 起飛的事前準備

想要起飛,首先你要有一座機場,但我也知道這很難,所以呢我幫大家準備了一個可以安心練習飛行,就算墜機也很安全的場地,是由 Tailwind 官方所推出的 Playground:Tailwind Play

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 功能,也就是起飛前置作業哦。

Preflight

「為何全部的樣式都去除掉、變的這麼醜,是起飛前應該要做的事呀?」

原因呢其實很簡單。

這是基於 modern-normalize 所延伸出來的一個特性,而因為每一家瀏覽器的預設樣式都不太相同,所以確保你的設計系統所呈現出來的樣式能在各瀏覽器保持一致性、不用去為了哪一家特別撰寫什麼樣式,所以統一把預設樣式都全部清除了哦!

這邊我簡單列舉一下被 Preflight 的內容:

行為 html 標籤
去除字體樣式 <h1>~<h6>
去除清單樣式 <ol><ul><li>
去除外距 (margin) <h1>~<h6><hr><p><pre>
行內顯示改區塊顯示 <img><svg><video><canvas><audio><iframe>

既然了解了這個不是 Bug 之後,我們就該繼續往下走囉~
 

carrotPoint 字體大小 (font-size)

藉由 text-{尺寸} 這個功能,我們可以設定 / 改變文字大小,例如 text-base 功能是將文字大小設定為 1rem。 (相當於 16px)

以下是預設可以使用的字體大小功能:

  • text-xs
  • text-sm
  • text-base
  • text-lg
  • text-xl
  • text-2xl
  • text-3xl
    ...
  • text-9xl

在這邊我們把標題的文字大小設為 text-2xl

<h3 class="text-2xl">什麼是兔兔教??</h3>
<p>
一種兔兔的信 ...

有!字體確實變大了,有慢慢要回來的感覺了呢!
但是,好像還少一味...
 

carrotPoint 字體粗細、字重 (font-weight)

藉由 font-{粗細} 這個功能,我們可以設定 / 改變文字粗細,例如 font-bold 功能是將字重設為 700

以下是預設可以使用的字重功能:

  • font-thin
  • font-extralight
  • font-light
  • font-normal
  • font-medium
  • font-semibold
  • font-bold
  • font-extrabold
  • font-black

接著我們把標題的字體粗細設為 font-bold

<h3 class="text-2xl font-bold">什麼是兔兔教??</h3>
<p>
一種兔兔的信 ...

是不是,字體一加粗馬上就有模有樣了起來,但是標題還是感覺哪裡可以再怎麼樣的 ... 讓我們來看看接下來該如何修改吧!
 

carrotPoint 文字對齊 (text-align)

透過 text-{方向} 這個功能,我們可以設定 / 改變文字對齊的方向,例如 text-right 功能是將文字置右

以下是預設可以使用的文字對齊功能:

  • text-left
  • text-center
  • text-right
  • text-justify

接著我們用 text-center來把標題置中:

<h3 class="text-2xl font-bold text-center">什麼是兔兔教??</h3>
<p>
一種兔兔的信 ...

置中後果然看起來好多了!
可是 ... 是不是其他部分讓整體看起來不協調呀?
(你這兔毛病也很多欸...)
 

carrotPoint 文字色彩 (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>
一種兔兔的信 ...

看起來更可口了,讓我現在就馬上想要來一根紅蘿蔔呢!
上半部看起來是很好看了啦 ... 但是下面的字好像不是那麼井然有序,
我們再來看看有什麼方式可以把它變得更棒好了。
 

carrotPoint 清單樣式 (list-style-type)

透過 list-{樣式類型} 這個功能,我們可以設定清單符號的樣式,例如 list-disc 功能是將清單符號設定為一個圓點

以下是預設可以使用的清單樣式功能:

  • list-none
  • list-disc
  • list-decimal

接著我們用 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 把符號指定到文字的內側。

終於只剩一個東西還沒處理好,快完成了呢!
 

carrotPoint 文字裝飾 (text-decoration)

透過文字裝飾這個功能,我們可以設定文字上的小特效,例如 line-through 功能是將文字畫上刪除線

以下是預設可以使用的文字裝飾功能:

  • underline
  • line-through
  • no-underline

接著我們把按鈕的文字變成藍色,並且用 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 連結一起貼在下面,大家要記得做作業哦!

carrotPoint 給你們的回家作業:

  • 作業實施要點:
    • 試著用其他文字顏色字體大小文字裝飾來完成
  • 這個沒有樣式,醜醜的兔兔教義:點我打開作業
  • 完成品,可以給你參考用的:點我打開範本

關於兔兔們:


上一篇
Day 02:「Tailwind CSS?那好吃嗎?」- 淺談 Tailwind 的核心概念
下一篇
Day 04:「當個方塊設計師」- 製作自己的方塊,改變大小並加上背景色彩及邊框
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32

2 則留言

0
孤獨一隻雞
iT邦新手 4 級 ‧ 2021-09-04 18:09:52

有兔兔就給讚

搋兔 iT邦新手 5 級 ‧ 2021-09-04 23:36:06 檢舉

那你要交作業了嗎? XD

/images/emoticon/emoticon16.gif這不好說,等這陣子忙完,繼續寫作業

0
bucky0112
iT邦新手 5 級 ‧ 2021-09-11 08:42:38

兔兔大大,你上面的 list 樣式範例用 list-decimal,但是圖片樣式卻是 list-disc

搋兔 iT邦新手 5 級 ‧ 2021-09-12 00:10:40 檢舉

謝謝你! 我沒改到 XD

我要留言

立即登入留言