Tailwind CSS 实战：构建响应式博客

为什么选择 Tailwind？

作为一个设计师，我对 CSS 有比较高的要求。Tailwind 的原子化方式让我可以快速实现设计稿，同时保持一致性。

项目结构

src/

components/

Header.tsx

Footer.tsx

ArticleCard.tsx

pages/

Home.tsx

Articles.tsx

ArticleDetail.tsx

关键实现

#### 响应式布局

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

{articles.map(article => (

<ArticleCard key={article.id} article={article} />

))}

</div>

#### 暗色模式

Tailwind 的 dark: 前缀让暗色模式实现变得简单。

遇到的问题