Gray Matter

• CODE

React + MDX 学习的时候，用到了 Front Matter 解析，于是需要看 Gray Matter 的 README 并上手测试。那么正好借用这个机会通过案例学习一下 TailwindCss。上面的图片是 Gemini 3 Pro 生成出来的，那么我再让它带着我一步步学习就好了。

Hello

Firstly, creat your next.js project. (for more, see React & https://pnpm.io/)

pnpm create next-app@latest react-notes --yes
cd react-notes
pnpm dev

Open your page.tsx and write.

export default function Home() {
  return <h1>Hello, React</h1>;
}

Then you see.

My basic html paper

export default function Home() {
  return (
    // min-h-screen  最小高度占满屏幕
    // be-gray-800   页面的背景颜色
    // py-10         上下流出 padding 的间距
    // max-w-3xl     限制最大宽度
    // mx-auto       (margin-x: auto) 这个 div 水平居中
    <div className="min-h-screen bg-gray-800 py-10 px-4">
      <div className="max-w-3xl mx-auto">
        <h1>Hello, React</h1>
        <div>This is a div</div>
      </div>
    </div>
  );
}

Prepare a roundered card

• To-do

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-800 py-10 px-4">
      <div className="max-w-3xl mx-auto">
        {/* 标题 */}
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-white">Gray Matter Test</h1>
        </div>
        {/* 卡片 */}
        <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200 px-6 py-4">
          <h2 className="text-gray-900 text-base font-bold tracking-tight ">
            This is card title
          </h2>
          <p className="text-gray-500 dark:text-gray-400 mt-2 text-sm ">
            This is card content.
          </p>
        </div>
      </div>
    </div>
  );
}

Final