Next.js 介绍
一、Next.js 是什么? * 定位 :基于 React 的全栈 Web 框架,用来构建从简单博客到复杂 SaaS 的各种 Web 应用。二、为什么要用 Next.js(核心特性总览) 1.文件系统路由(File-based Routing) 你不需要再手写路由表,结构一目了然。([Next.js][2]) 2.
tag
一、Next.js 是什么? * 定位 :基于 React 的全栈 Web 框架,用来构建从简单博客到复杂 SaaS 的各种 Web 应用。二、为什么要用 Next.js(核心特性总览) 1.文件系统路由(File-based Routing) 你不需要再手写路由表,结构一目了然。([Next.js][2]) 2.
常用组件模式(超简速查) Button(样式配方) Input Card Modal(Dialog Content) 附录 C 总结 本附录内容具有以下特点: * 覆盖 Tailwind 绝大部分使用场景 * 高可读性(按功能分类) * 不冗余(真正常用速查内容) * 与 shad...
B.1 Button 组件(核心中的核心) B.1.1 设计目标 * 支持 :primary / secondary / outline / ghost / destructive / link * 支持 :sm / md / lg / icon * 支持 状态(显示 spinner) * 支持 dis...
本附录将 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.