Tailwind 与 shadcn/ui 实战指南
本系列共 11 篇文章
Tailwind v4 + Vite：5 分钟完整配置模板与目录结构
从零开始配置 Tailwind CSS v4 + Vite 项目，提供完整的 5 分钟模板和推荐的目录结构。包含 v3 到 v4 迁移清单，帮你快速搭建现代化前端项目。
shadcn/ui 安装与主题定制完全指南（含 CSS 变量）
详解 shadcn/ui 安装配置与主题定制方法，涵盖 CSS 变量、OKLCH 颜色、暗色模式切换。掌握品牌化 UI 设计最佳实践，5 分钟快速上手
用 shadcn/ui 搭建后台骨架：Sidebar + Layout 最佳实践
掌握 shadcn/ui Sidebar 与 Next.js Layout 整合的最佳实践。从组件架构、响应式设计到权限控制，手把手搭建可扩展的后台管理骨架，含完整代码示例
Tailwind 响应式布局实战：容器查询与断点策略
深入讲解 Tailwind CSS 容器查询与断点策略，掌握从视口到容器的响应式设计演进，实现组件级响应式布局。
Tailwind 暗黑模式：class 与 data-theme 两套方案对比
系统对比 Tailwind CSS 暗黑模式的 class 与 data-theme 两套方案，涵盖实现原理、配置方式、框架集成实战，帮你做出最适合项目的选择
shadcn/ui 组合模式：多个组件协同的最佳实践
学习 shadcn/ui 组合模式的最佳实践，掌握 Dialog+Form、DataTable+DropdownMenu 等常见场景的组合技巧，包含 Context 模式、状态管理、性能优化等高级话题
Dialog、Sheet、Popover：弹层类组件的可达性与焦点管理
深入解析 shadcn/ui 的 Dialog、Sheet、Popover 三种弹层组件的可达性实现与焦点管理，涵盖 WCAG 标准、ARIA 属性、键盘导航、焦点陷阱，提供完整代码示例
Tailwind 性能优化：JIT、content 配置与生产体积控制
详解 Tailwind CSS JIT 模式工作原理、content 配置最佳实践、生产体积四层优化策略，包含实战案例与 Tailwind v4 新特性分析
Astro + Tailwind：岛屿组件与全局样式不冲突的配置
Astro 岛屿架构下 Tailwind CSS 样式冲突怎么办？本文讲解 astro-island/astro-slot 机制、Tailwind v4 正确集成方法、4 种常见样式冲突场景的解决方案，帮你避坑实战
React Compiler + shadcn/ui：自动优化时代的前端开发
详解 React Compiler 在 shadcn/ui 项目中的应用，包括启用方式、实战经验、迁移注意事项和性能对比，帮助你从手动优化过渡到自动优化
shadcn/ui 常见问题排查：样式冲突、组件不渲染、类型错误
系统性梳理 shadcn/ui 开发中的三大类常见问题，提供详细的排查步骤和解决方案，帮助开发者快速定位并修复样式冲突、组件渲染失败和 TypeScript 类型错误
