07. 自定义主题

xiaotao131

271人浏览 · 2026-03-23 07:00:00

xiaotao131 · 2026-03-23 07:00:00 发布

07. 自定义主题

1. 什么是自定义主题

Tailwind 提供了一套默认主题（颜色、字体、间距、断点等），你可以根据自己的设计系统修改这些值。

默认主题              自定义主题
├── 颜色              ├── 品牌色 #3b82f6 → #6366f1
├── 字体              ├── 系统字体 → 'Inter', 'Noto Sans'
├── 间距              ├── 4px 基数 → 8px 基数
├── 断点              ├── 新增 3xl: 1920px
└── ...               └── ...

2. 配置文件

2.1 创建配置文件

Tailwind v4 使用 CSS 文件配置，而不是 tailwind.config.js。

/* src/index.css */
@import "tailwindcss";

@theme {
  /* 自定义主题放在这里 */
}

2.2 配置文件结构

@theme {
  /* 自定义颜色 */
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  
  /* 自定义字体 */
  --font-sans: 'Inter', system-ui, sans-serif;
  
  /* 自定义断点 */
  --breakpoint-3xl: 1920px;
  
  /* 自定义间距 */
  --spacing: 0.25rem;  /* 基础单位，p-1 = 0.25rem = 4px */
}

3. 自定义颜色

3.1 添加品牌色

@theme {
  --color-brand: #6366f1;
  --color-brand-light: #818cf8;
  --color-brand-dark: #4f46e5;
}

<!-- 使用自定义颜色 -->
<button class="bg-brand hover:bg-brand-dark text-white px-4 py-2 rounded">
  品牌按钮
</button>

3.2 添加完整色板

@theme {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
}

<div class="bg-primary-500 text-white">品牌色</div>
<div class="bg-primary-100 text-primary-800">浅色背景</div>

3.3 添加暗色模式颜色

@theme {
  --color-dark-bg: #0f0f0f;
  --color-dark-surface: #1a1a1a;
  --color-dark-border: #2a2a2a;
}

<div class="bg-white dark:bg-dark-bg">
  支持暗色模式
</div>

4. 自定义字体

4.1 添加自定义字体

@import "tailwindcss";

/* 引入 Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@theme {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;
}

<body class="font-sans">
  <h1 class="font-serif">标题用衬线字体</h1>
  <code class="font-mono">代码用等宽字体</code>
</body>

4.2 自定义字体大小

@theme {
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  
  --text-2xs: 0.625rem;
  --text-2xs--line-height: 0.875rem;
  
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
}

5. 自定义间距

5.1 修改间距基数

Tailwind 的间距基于 --spacing 变量，p-1 = calc(var(--spacing) * 1)。

@theme {
  /* 默认 0.25rem (4px)，改成 0.5rem (8px) */
  --spacing: 0.5rem;
}

5.2 添加自定义间距

@theme {
  --spacing-18: 4.5rem;   /* 72px */
  --spacing-22: 5.5rem;   /* 88px */
  --spacing-30: 7.5rem;   /* 120px */
}

<div class="p-18">内边距 72px</div>
<div class="mt-22">上边距 88px</div>

6. 自定义断点

6.1 修改默认断点

@theme {
  --breakpoint-sm: 480px;   /* 原来 640px */
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

6.2 添加新断点

@theme {
  --breakpoint-xs: 375px;   /* 小手机 */
  --breakpoint-3xl: 1920px; /* 大屏幕 */
  --breakpoint-4xl: 2560px; /* 2K 屏幕 */
}

<div class="grid grid-cols-1 xs:grid-cols-2 3xl:grid-cols-4">
  响应式网格
</div>

7. 自定义圆角

@theme {
  --radius-xs: 0.125rem;   /* 2px */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-3xl: 1.5rem;    /* 24px */
}

<div class="rounded-2xl">圆角 16px</div>

8. 自定义阴影

@theme {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  
  /* 自定义阴影 */
  --shadow-glow: 0 0 15px rgba(99, 102, 241, 0.5);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.12);
}

<div class="shadow-glow">发光阴影</div>
<div class="shadow-card">卡片阴影</div>

9. 自定义动画

9.1 添加自定义动画

@theme {
  --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce-slow: bounce 2s infinite;
  --animate-fade-in: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="animate-fade-in">淡入动画</div>
<div class="animate-pulse-slow">慢速脉冲</div>

10. 完整自定义主题示例

10.1 完整配置文件

/* src/index.css */
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@theme {
  /* 颜色系统 */
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;
  
  /* 字体 */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* 断点 */
  --breakpoint-xs: 480px;
  --breakpoint-3xl: 1920px;
  
  /* 圆角 */
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  
  /* 阴影 */
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
  
  /* 动画 */
  --animate-float: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

10.2 使用自定义主题

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
  <title>自定义主题示例</title>
</head>
<body class="bg-gray-50 font-sans">

<div class="container mx-auto px-4 py-12">
  <!-- 使用品牌色 -->
  <div class="bg-primary-500 text-white rounded-2xl p-8 shadow-glow animate-float">
    <h1 class="text-3xl font-bold mb-4">自定义主题</h1>
    <p class="text-primary-100">Tailwind 主题可以完全自定义，匹配你的品牌设计系统。</p>
  </div>
  
  <!-- 响应式网格（使用自定义断点） -->
  <div class="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 mt-12">
    <div class="bg-white rounded-xl shadow p-6">
      <div class="w-12 h-12 bg-primary-100 text-primary-600 rounded-lg flex items-center justify-center mb-4">
        📦
      </div>
      <h3 class="font-semibold text-lg mb-2">功能1</h3>
      <p class="text-gray-600">描述信息</p>
    </div>
    <!-- 重复卡片 -->
  </div>
</div>

</body>
</html>

11. 自定义插件

11.1 添加自定义工具类

/* 使用 @utility 添加自定义工具类 */
@utility text-gradient {
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@utility shadow-soft {
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.02);
}

<h1 class="text-gradient">渐变文字</h1>
<div class="shadow-soft">柔和阴影</div>

12. 自定义变体

12.1 添加自定义变体

@custom-variant children (& > *);

@custom-variant group-hover (&:is(:hover) .group);

@custom-variant focus-visible (&:focus-visible);

<div class="group">
  <div class="group-hover:bg-blue-500">悬停时变蓝</div>
</div>

<div class="children:mb-2">
  <div>每个子元素都有下边距</div>
  <div>每个子元素都有下边距</div>
</div>

13. 练习

练习 1：品牌主题

创建一套品牌主题：

主色：紫色 #8b5cf6
辅助色：粉色 #ec489a
字体：‘Poppins’
圆角：较大（16px）

参考答案：

@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

@theme {
  --color-brand: #8b5cf6;
  --color-brand-light: #a78bfa;
  --color-brand-dark: #7c3aed;
  --color-accent: #ec489a;
  
  --font-sans: 'Poppins', sans-serif;
  
  --radius-2xl: 1rem;
}

练习 2：自定义动画

创建一个弹跳动画，应用到按钮上

参考答案：

@theme {
  --animate-bounce-custom: bounceCustom 0.5s ease-out;
}

@keyframes bounceCustom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

<button class="animate-bounce-custom">弹跳按钮</button>

14. 总结

配置项	说明	示例
颜色	`--color-*`	`--color-brand: #6366f1`
字体	`--font-*`	`--font-sans: 'Inter'`
间距	`--spacing-*`	`--spacing-18: 4.5rem`
断点	`--breakpoint-*`	`--breakpoint-3xl: 1920px`
圆角	`--radius-*`	`--radius-2xl: 1rem`
阴影	`--shadow-*`	`--shadow-glow: 0 0 15px...`
动画	`--animate-*`	`--animate-float: float 3s`
工具类	`@utility`	`@utility text-gradient { ... }`
变体	`@custom-variant`	`@custom-variant children (& > *)`