Day 03：「开始乘风飞行！」- 样式都不见了吗？快用 Tailwind 轻松调整文字版式

前一篇啊写了将近 5000 字的废话，你们一定看的很煎熬吧 XD
但是今天终於可以有进度啦！我们要来开始实作 Tailwind 了！

虽然不能一开始就编排美美的样式，不过按步就班的学肯定没问题，毕竟 Tailwind 真的很好上手～

在开始之前，我们先来看一段文字：

什麽是兔兔教？?

一种兔兔的信仰教派，本派信奉真神兔兔，且每时每刻都将兔兔放在心中，期待兔兔降临为我们出生时所带的原红萝卜通通吃乾净，以让我们可以进兔兔天国。

信兔兔，无 Bug

「这只坏掉的兔子又要传教了是不是？ 整个网页工程师生态圈都不知道被牠荼毒多久了！」

欸...呃，先别紧张啦，今天不是要来传教的 (你确定？)
今天啊，上面的那段文字虽然是兔兔教的教义 (？)，但是同时也是我们今天所要用的测试文字，所以就不用老派的那套 Lorem ipsum 拉丁文了。

那事不宜迟，我们要乘风起飞罗！

起飞的事前准备

想要起飞，首先你要有一座机场，但我也知道这很难，所以呢我帮大家准备了一个可以安心练习飞行，就算坠机也很安全的场地，是由 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 的内容：

既然了解了这个不是 Bug 之後，我们就该继续往下走罗～
 

字体大小 (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>
一种兔兔的信 ...

有！字体确实变大了，有慢慢要回来的感觉了呢！
但是，好像还少一味...
 

字体粗细、字重 (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>
一种兔兔的信 ...

是不是，字体一加粗马上就有模有样了起来，但是标题还是感觉哪里可以再怎麽样的 ... 让我们来看看接下来该如何修改吧！
 

文字对齐 (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>
一种兔兔的信 ...

置中後果然看起来好多了！
可是 ... 是不是其他部分让整体看起来不协调呀？
(你这兔毛病也很多欸...)
 

文字色彩 (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-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 把符号指定到文字的内侧。

终於只剩一个东西还没处理好，快完成了呢！
 

文字装饰 (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 连结一起贴在下面，大家要记得做作业哦！

给你们的回家作业：

• 作业实施要点：
  • 试着用其他文字颜色、字体大小、文字装饰来完成
• 这个没有样式，丑丑的兔兔教义：点我打开作业
• 完成品，可以给你参考用的：点我打开范本

关於兔兔们：

• Tailwind CSS 台湾官网
• Tailwind CSS 台湾 (脸书粉丝专页)
• 兔兔教 × Tailwind CSS Taiwan (脸书社群)
• 兔兔教大本营