概述
工具优先的奢华界面
Tailwind CSS 对页眉、目的地页面及预订组件中使用的间距、排版和玻璃效果进行统一编码。
设计标记映射至品牌主色、主图渐变及页眉玻璃模糊效果的 CSS 变量，支持白标租户。
Shadcn UI 基础组件提供无障碍对话框、表单及开关，无需额外定制组件的偏移。
- 品牌变量映射
- 移动优先断点
- Shadcn 组件套件
- RTL 感知工具类
如何运作
Tailwind CSS 如何塑造每个宾客接触点
- 步骤 1
标记化
全局 CSS 定义品牌颜色、页眉高度及工具类使用的主图重叠变量。
- 步骤 2
组合
页面板块将目的地奢华色带、玻璃卡片与动效配方作为可复用的类组使用。
- 步骤 3
验证
视觉回归脚本验证主页、预订及轮播在各断点的间距一致性。
优势
设计优势
视觉一致性
统一的标记来源防止营销面与认证门户之间出现偏离品牌的颜色。
快速迭代
设计师与工程师无需在冗余 CSS 文件中查找，即可直接调整间距与排版。
无障碍默认值
焦点环、对比色对及对话框基础组件遵循 Shadcn 无障碍规范。
安全
安全样式实践
Tailwind CSS 在生产包中清除未使用的类，减少来自废弃 CSS 的攻击面。
任何内联用户生成样式均不进入 DOM——CMS 内容在渲染前经过净化处理。
- 生产环境清除
- 净化的富文本
- 禁止任意用户 CSS
- 一致的焦点状态
集成
工具链集成
PostCSS 在 Next.js 构建中将 Tailwind CSS 与 autoprefixer 串联。
组件类与 React 模块同位；全局层位于 apps/web/src/app/globals.css。
- PostCSS + Tailwind CSS v3
- clsx/tailwind-merge 辅助工具
- 奢华动效类配方
- 目的地色带工具类
应用场景
样式化体验
主页焦点图
玻璃预订组件、目的地轮播及技术功能区共享倾斜卡片工具类。
目的地资料库
分栏媒体板块、FAQ 手风琴及风景水印使用目的地奢华类。
门户仪表盘
管理员、合作伙伴及司机数据表复用紧凑的 Tailwind CSS 数据密度模式。
支持