昨天學了如何儲存多對多的資料，前兩天又學了多對多的關係，這對剛學的人來說應該是有些困擾吧？我當時在學的時候經常迷失在多對多的關係之中，努力地想著想著最常問的就是「我現在在哪？」經常引起另一個人的大笑。
在那如蜘蛛網的地方打滾了這麼久，又到了四天連假，就讓我們用比較輕鬆的方式開啟這四天連假吧！我們今天要來看看Tailwind Css又用了什麼魔法讓你的頁面變漂亮。

今天我們要看一些能夠讓你文章變得更直覺的一些用法。

• Whitespace
  這是能夠讓你的文章可以正常顯示空白以及換行的重要推手，沒有他你的文章會完全沒有換行或是換段，他主要的類別有：
  • whitespace-normal
  • whitespace-nowrap
  • whitespace-pre
  • whitespace-pre-line
  • whitespace-pre-wrap
  • whitespace-break-spaces

每一個都有不同的效果，若是想看看他的呈現可以到(https://tailwindcss.com/docs/whitespace )，那我們選擇的是whitespace-pre-wrap，他可以保留你文字中的空白但是會去除下一行開頭前的空白。還有一個Word Break他也有類似的概念，有需要的可以去看看(https://tailwindcss.com/docs/word-break )。

• Line Height
  這應該很好理解，他就是行高，控制著使用者在閱讀時的感受。
  • leading-3
    他有各種不同的行距是以數字定義的，一直到10
  • leading-relaxed
    他也有像這種已經為你設定好的，是以文字當選項的，其餘還有tight、snug、loose以及其他更多，那我們選擇的是leading-relaxed。

如果要看看其餘選項可以去看看(https://tailwindcss.com/docs/line-height )。

我們今天來介紹一個很特別的東西，不知道有沒有人注意到，我們在第14天時我的截圖報錯是淺淺的粉色，在第12天的create錯誤的地方是用

<div class = "error p-3 bg-red-150 text-white font-thin rounded">

但是在介紹的時候是用

<div class = "error p-3 bg-red-600 text-white font-thin rounded">

這其實是因為Tailwind Css他保留了許多空間讓你自己去定義你所需要的屬性，而上面的red-150就是我們自己所選擇的顏色，那他的檔案是應該要寫在哪呢？
我們可以打開public\build\assets\app-be178382.css看看，我稍微截一點程式碼出來：

...
--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.left-0{left:0px}.right-0{right:0px}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.mx-6{margin-left:1.5rem;margin-right:1.5rem}
...

大家發現了嗎？他所有的程式都是寫在同一行沒有換行的，那我們應該寫進去嗎？那之後我要更改會不會找不到我所需要更改的地方？
這其實不是我們的目的地，我們可以到另外一個檔案去看看resources\css\app.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

這整個檔案只有這短短三行，卻包含了我們大部分所會用到的css。而我們也在這個檔案中去定義我們所需要的屬性，例如我們所用到的bg-red-150：

.bg-red-150 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 161 161 / var(--tw-bg-opacity))
}

加上去之後我們需要跑npm run dev去讓他更新前端,然後就可以看看有沒有你想要的漂亮顏色了喔！

我們今天可以開始定義自己想要的樣式了，努力將網頁往自己喜歡的方向前進吧！我們明天要開始寫他的修改與刪除，連假時也不要忘記寫寫laravel喔，我們明天見，掰掰！