CSS框架與響應式 - Tailwind

我之前的幾個專案其實沒有注重 RWD 這件事，包括星塵之路官網、失智列車網站
都是巴友提醒，或直接縮放視窗把排版整個玩壞了截圖傳給我看，我才驚覺其重要性
不過搞 media query 真的很痛苦，於是我決定去學習CSS的框架

Tailwind 是什麼？NB的嗎？

屬實NB，我現在是 TailwindCSS 的狗了

一切盡在不言中，汪汪





幽冥：這就是... 我的正確答案吧......

笑死，我是真的花了非常多時間在拉CSS百葉窗，已經快要受不了了

module.exports通靈 ＆ plugins 設定

安裝 Tailwind 之後還有一些前置作業要做
首要便是去 tailwind.config.js 把 Tailwind 會作用在哪些文件上給設定好

這邊我一開始忘記設定某資料夾的路徑，以為是bug一直找不出原因，真的要檢查路徑設定啊...
其實在學校用筆電做的時候，Tailwind 有在沒設定的元件上作用，所以我一直覺得設定檔沒漏寫
git 推到雲端，回家下載進度後突然就出問題了
在那之前你明明一直有幫我通靈的，難道是為了我，一整天下來，力量已經消耗殆盡了嗎...？
Tailwind 我的超人

另外我有安裝一些官方推薦的小插件，像是：@tailwindcss/line-clamp
這是一個可以自訂文本在固定行數後截斷的實用小工具

闇黑模式 ＆ localStorage

Tailwind 除了做 RWD 很方便之外，其中還有讓你做闇黑模式超級方便的好處
只要把各個 Element 闇黑模式（dark:）的顏色樣式都加上，然後在最頂層上個 dark class
搭啷！闇黑模式製作完成！！ 是不是很省事？
記得要去 tailwind.config.js 設定 darkMode: 'class',，不然是沒有用的喔

由於開關是用元件的State判斷，而我不能讓使用者重整（觸發元件 re-render）後就丟失設定
這個時候可以使用 localStorage ，這玩意就算你應用程式關掉重開，也能記住一些資料
利用它來做闇黑模式和按鈕狀態的設定記憶

詳細原始碼可以看我 Github 開源儲存庫的 setting Component 和 App Component
不過這部分牽扯到 Hook，闇黑模式我是最後才做，往後一些的標題我會說一個蠻重要的 Hook 應用

另外我知道闇黑模式之下，有些本來就被原作者設定文字樣式的文本，會顯得難以閱讀
這就要說到巴哈的文字編輯器：你幫文字加了三種樣式，它就有三層無名DIV，每一種樣式一個效果
就算我在內文有預設的文字顏色，也會被覆蓋，除非要去分析這些顏色之類的，不過這樣搞太複雜
而且有時候寫的人是故意這樣藏文字，不如就算了，這我真的舉雙手投降