Tailwind CSS 排版小贴士

Tailwind CSS 4 带来了 CSS-first 配置方式，非常适合与 MDX 内容结合使用。本文分享几个在文章系统中常用的排版技巧。

使用 CSS 变量保持一致

本项目在 internal/tailwind/theme.css 中定义了设计变量，例如：

• --background：页面背景
• --headline：标题颜色
• --paragraph：正文颜色
• --surface：卡片背景

在 MDX 组件映射中直接引用这些变量，可以确保文章内容与站点其他页面视觉一致。

自定义组件映射

通过 next-mdx-remote 的 components prop，你可以为每个 Markdown 标签指定渲染组件：

const components = {
  h1: (props) => <h1 className="text-3xl font-bold text-headline" {...props} />,
  p: (props) => <p className="text-paragraph leading-relaxed" {...props} />,
  a: (props) => <a className="text-button hover:underline" {...props} />,
};

这种方式比全局 .prose 样式更灵活，你可以精确控制每个元素的样式。

响应式布局

文章详情页通常采用左右分栏：

• 左侧主内容区：占满可用宽度，阅读舒适
• 右侧目录：桌面端固定显示，移动端折叠为按钮触发

<div className="grid gap-8 lg:grid-cols-[1fr_280px]">
  <article>{/* 正文 */}</article>
  <aside className="hidden lg:block">{/* TOC */}</aside>
</div>

图片优化

MDX 中的图片建议统一封装为自定义 Image 组件：

• 使用 next/image 的优化能力
• 添加圆角、阴影与懒加载
• 统一图片下方说明文字样式

结语

结合 Tailwind CSS 与 next-mdx-remote，你可以打造一个完全自定义、类型安全且易于扩展的文章系统。更多组件可以按需添加，保持代码的最小可维护性。