彩色粉末组成的抽象画面

Blog

用 Tailwind CSS 设计界面

Tailwind 把间距、字号和颜色写成 class,改界面时不用在 CSS 文件和组件之间来回跳。博客卡片用圆角、细边框和内边距,就能和周围的页面层次分开。

深色模式可以用 dark: 变体,也可以走设计系统里的 CSS 变量。卡片背景用 bg-card,说明文字用 text-muted-foreground,主题切换时颜色会一起跟着变。

排版上保持标题、摘要、正文的字号递进,行高略宽松,长文读起来会轻松很多。列表页只放摘要,把完整段落留给文章页,卡片才不会显得拥挤。

返回文章列表