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，每一种样式一个效果
就算我在内文有预设的文字颜色，也会被覆盖，除非要去分析这些颜色之类的，不过这样搞太複杂
而且有时候写的人是故意这样藏文字，不如就算了，这我真的举双手投降