附录 A:Tailwind 全类名一览表
本附录将 Tailwind 所有常用原子类分为 15 大类,覆盖全部能力: A.1 布局(Layout) 包含: * 常规布局(display) * 定位(position) * Flex * Grid * 多列布局 * 隐藏控制 A.1.1 Display A.1.
tag
本附录将 Tailwind 所有常用原子类分为 15 大类,覆盖全部能力: A.1 布局(Layout) 包含: * 常规布局(display) * 定位(position) * Flex * Grid * 多列布局 * 隐藏控制 A.1.1 Display A.1.
本章会深入对比: * Tailwind * Bootstrap * Material UI (MUI) * Ant Design * Chakra UI * Radix UI * Headless UI * Shadcn/UI * Flowbite * DaisyUI * Tremor / Admin UI 类库...
11.1 当今 CSS 技术的三大路线 现代 CSS 技术的演进已经进入“编译器时代”,目前分为三大核心路线: 路线 A:Tailwind(Token + Utility + JIT 编译器) 特点: * 原子化 CSS(Utility-first) * JIT 按需生成 * Theme 强(dark...
本章核心目标: * 统一的 Design Token 体系 * 多品牌、多主题、多租户的 UI 系统 * Tailwind 驱动的 UI 组件库 * 设计—开发完美协作机制 * Storybook / Tokens Studio / Figma 链路 * 企业级设计系统治理模式 Tailwind 在设计系统中的...
这一章是全书 最实战、最接地气、工程价值最高的章节之一 ,主要内容包括: * 企业级 UI 组件设计原则 * 使用 Tailwind 构建 30+ 高质量 UI 组件 * base / variants / states 核心架构 * 组件主题化、暗黑模式、响应式 * 与插件系统结合 * 与 shadcn/ui ...
本章将覆盖: * 官方生态(Typography / Forms / Aspect-Ratio / Line-Clamp / Container Queries 等) * Tailwind 的周边工具链(Headless UI、Heroicons) * 第三方生态系统(DaisyUI、Flowbite、shadc...
本章是 Tailwind 工程化体系的核心章节之一 ,难度高、内容巨大,面向: * 企业级前端工程师 * UI 架构师 * Design System 负责人 * Tailwind 高级用户 * 多主题 / 多租户系统研发者 Tailwind 的插件系统,是让它不仅仅是 CSS 框架,而是 企业级 UI 编...
本章是 企业级大型项目(SaaS、多租户、多品牌、复杂组件库)必须具备的完整工程体系 ,涵盖: * Tailwind 架构体系 * 多主题系统 * CSS 变量深度集成 * 按需加载、打包优化 * 组件库专用规范 * 多项目、多品牌、多租户的架构模式 * CI/CD、版本管理、设计系统协作流程 * 工程化组织结构...
本章目标: * 从工程架构视角解释 Tailwind 如何融入现代前端框架 * 提供 React/Vue/Svelte/Solid 的最佳实践模式 * 解释组件化与原子化之间的关系 * 给出企业级工程组织方式(文件组织、UI 组件库、Design System) * 深入 Next.
手把手用 Vercel 部署 Next.js + Postgres 多租户 SaaS 应用:Prisma 数据建模、workspace 租户隔离、Route Handler API、环境变量配置与 Node.js 运行时注意事项,附完整代码与 curl 验证命令。
构建一个完整的多租户 SaaS 博客平台——从架构设计、租户隔离策略、Stripe 订阅计费、自定义域名、RBAC 权限体系,到完整的前后端实战。
构建 Next.js 的完整部署流水线——从 Docker 多阶段构建优化、GitHub Actions 自动化、Vercel 一键部署,到 Kubernetes 编排、Helm Chart 与蓝绿部署。
构建 Next.js 的完整错误处理与可观测性体系——从 Error Boundary、全局错误页、Server Action 错误处理,到 Sentry 集成、结构化日志与生产环境监控。
构建 Next.js 的完整测试金字塔——从 Vitest 单元测试、React Testing Library 组件测试、MSW Mock 集成测试,到 Playwright E2E 测试,建立可维护的测试体系。
在 Next.js App Router 中构建完整的 SEO 体系——Metadata API 深度使用、@vercel/og 动态封面图、Sitemap 自动生成、结构化数据、国际化 hreflang 与搜索引擎监控。
全面提升 Next.js 应用性能——从 Core Web Vitals 指标理解、Bundle 分析与瘦身、图片与字体优化、Streaming SSR,到缓存策略与运行时性能调优。
在 Next.js App Router 中构建类型安全的表单系统——React Hook Form + Zod 深度集成,涵盖动态字段、多步骤表单、文件上传、异步验证与 Server Action 提交。
在 Next.js App Router 中选择合适的状态管理方案——深度对比 Zustand、Jotai、Redux Toolkit,理解服务端状态与客户端状态的边界,以及 URL 作为状态源的最佳实践。
在 Next.js App Router 中选择与集成组件库——深度对比 shadcn/ui、MUI、Ant Design,掌握 RSC/Client Component 边界下的组件设计、CVA 变体系统、Storybook 文档化。
在 Next.js 项目中深度集成 Tailwind CSS——从安装配置、主题定制、Design Token 体系、暗色模式、响应式策略,到自定义插件开发与性能优化。