TailwindCSS 样式

灵动桌面框架使用 TailwindCSS 4.2+ 处理原子化样式，与 Ant Design 组件配合使用。

配置

TailwindCSS 4 使用 CSS-first 配置方式：

/* src/styles/global.css */
@import "tailwindcss";

CSS 设计令牌

/* src/styles/variables.css */
:root {
  --color-primary: #1677ff;
  --color-bg: #ffffff;
  --color-text: #1f1f1f;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

[data-theme='dark'] {
  --color-bg: #141414;
  --color-text: #ffffffd9;
}

常用模式

页面容器

<div className="p-6 space-y-4">
  <h2 className="text-xl font-semibold">标题</h2>
  <div className="grid grid-cols-3 gap-4">
    {/* 卡片网格 */}
  </div>
</div>

Flex 布局

<div className="flex items-center justify-between gap-4">
  <span className="text-sm text-gray-500">标签</span>
  <button className="px-4 py-2 bg-blue-500 text-white rounded-md">
    操作
  </button>
</div>

响应式

<div className="w-full md:w-1/2 lg:w-1/3">
  {/* 响应式宽度 */}
</div>

与 Ant Design 配合

TailwindCSS 主要用于：

• 间距和布局：p-4、m-2、gap-4、flex、grid
• 文字样式：text-sm、font-bold、text-gray-500
• 快速微调：rounded-lg、shadow-sm、overflow-auto

Ant Design 负责：

• 交互组件：Button、Table、Form、Modal 等
• 主题一致性：通过 ConfigProvider 统一风格

{/* 混合使用示例 */}
<Card className="mb-4 shadow-sm">
  <div className="flex items-center gap-3">
    <Avatar size={48} />
    <div>
      <Title level={5} className="!mb-0">用户名</Title>
      <span className="text-sm text-gray-400">管理员</span>
    </div>
  </div>
</Card>