把博客样式从 Scss 改到 TailwindCSS

今年关于博客的规划里,有一项是改变博客样式的书写方式。Sass(Scss)对于我来说有些多余了,CSS 本身的功能已经足够强大,主流浏览器都已经支持嵌套(Nesting)样式

那么,我是想使用纯 CSS 书写样式吗?不,我不想,我想尝试另外一种写样式的方式——class。在 HTML 标签的 class 属性中使用 TailwindCSS 预定好的各种样式,实现我需要的功能,对于我这种个人博客很合适。

因为我不想维护大段的样式文件,只有模板文件(layouts/*)就足够了。所以,我选择了 TailwindCSS。选择它的原因有两个:

  1. 曾经用 TailwindCSS 给 yihong 的 running_page 贡献过代码,比较熟悉用法;
  2. Hugo 官方开始了对 TailwindCSS 新版本(v4,目前处于 alpha 阶段)的实验性支持,并提供了测试仓库

修改样式的过程,可谓是大刀阔斧,先把原来的所有样式都删除,然后借助 ChatGPT 一点点把样式转换成 classes。过程繁复,分了几次完成。

当然,这次迁移肯定有遗漏的地方,有些地方的样式和以前不一样、很简陋。有些地方的样式则变丑了。

所以,我想借助大家的力量:阅读到这篇文章的朋友,希望你抽出一点时间,提个样式 BUG,反馈地址在这里

欢迎通过「邮件」或者点击「这里」告诉我你的想法
Welcome to tell me your thoughts via "email" or click "here"