第二章：基础概念精讲 - 第二节 - Tailwind CSS 颜色系统和主题定制

颜色系统基础

1. 默认调色板

Tailwind CSS 提供了一套精心设计的默认颜色系统：

// tailwind.config.js 默认颜色示例
module.exports = {
    theme: {
        colors: {
            // 灰度
            gray: {
                50: '#f9fafb',
                100: '#f3f4f6',
                200: '#e5e7eb',
                // ... 更多色阶
                900: '#111827',
            },
            // 主题色
            blue: {
                50: '#eff6ff',
                100: '#dbeafe',
                500: '#3b82f6',
                // ... 更多色阶
                900: '#1e3a8a',
            },
            // 其他颜色...
        }
    }
}

2. 颜色命名规范

• 基础色名：gray、red、blue 等
• 色阶值：50-900，数值越大越深
• 特殊颜色：white、black、transparent、current

3. 颜色使用方式

<!-- 基础颜色使用 -->
<div class="bg-blue-500 text-white">
    背景蓝色，文字白色
</div>

<!-- 透明度使用 -->
<div class="bg-blue-500/75">
    带透明度的蓝色背景
</div>

<!-- 悬停状态 -->
<button class="bg-blue-500 hover:bg-blue-600">
    悬停变色按钮
</button>

主题定制

1. 扩展默认主题

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            colors: {
                'brand': {
                    light: '#60A5FA',
                    DEFAULT: '#3B82F6',
                    dark: '#1D4ED8',
                },
                'accent': '#F59E0B',
            }
        }
    }
}

2. 完全自定义主题

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
            // 完全自定义的颜色系统
            primary: {
                light: '#85d7ff',
                DEFAULT: '#1fb6ff',
                dark: '#009eeb',
            },
            secondary: {
                light: '#ff7ce5',
                DEFAULT: '#ff49db',
                dark: '#ff16d1',
            }
        }
    }
}

深色模式实现

1. 基础配置

// tailwind.config.js
module.exports = {
    darkMode: 'class', // 或 'media'
}

2. 深色模式使用

<!-- 深色模式适配 -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
    <h1 class="text-2xl font-bold">
        自适应深色模式的标题
    </h1>
    <p class="text-gray-600 dark:text-gray-300">
        自适应深色模式的段落
    </p>
</div>

3. 切换实现

// 切换深色模式
function toggleDarkMode() {
    document.documentElement.classList.toggle('dark');
}

主题切换系统

1. 动态主题配置

// themes.js
export const themes = {
    light: {
        primary: '#3B82F6',
        secondary: '#10B981',
        background: '#FFFFFF',
        text: '#111827',
    },
    dark: {
        primary: '#60A5FA',
        secondary: '#34D399',
        background: '#111827',
        text: '#F9FAFB',
    },
}

2. CSS 变量实现

/* 根变量定义 */
:root {
    --color-primary: theme('colors.blue.500');
    --color-secondary: theme('colors.green.500');
}

.dark {
    --color-primary: theme('colors.blue.400');
    --color-secondary: theme('colors.green.400');
}

3. 组件应用

<!-- 使用 CSS 变量的组件 -->
<button class="bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-dark)]">
    动态主题按钮
</button>

颜色系统最佳实践

1. 语义化颜色使用

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            colors: {
                // 语义化命名
                'success': '#10B981',
                'warning': '#F59E0B',
                'error': '#EF4444',
                'info': '#3B82F6',
            }
        }
    }
}

2. 渐变色使用

<!-- 渐变色示例 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
    渐变背景
</div>

<div class="bg-gradient-to-tr from-pink-500 via-red-500 to-yellow-500">
    三色渐变
</div>

3. 色彩无障碍

<!-- 无障碍色彩对比 -->
<button class="bg-blue-600 text-white">
    <!-- WCAG 2.0 AA 标准合规的按钮 -->
    高对比度按钮
</button>

实战应用示例

1. 品牌色系统

<!-- 品牌色应用 -->
<div class="space-y-4">
    <!-- 主要按钮 -->
    <button class="bg-brand-DEFAULT hover:bg-brand-dark text-white px-4 py-2 rounded">
        主要按钮
    </button>

    <!-- 次要按钮 -->
    <button class="bg-brand-light hover:bg-brand-DEFAULT text-brand-dark px-4 py-2 rounded">
        次要按钮
    </button>
</div>

2. 状态颜色

<!-- 状态颜色应用 -->
<div class="space-y-2">
    <div class="bg-success/10 text-success p-2 rounded">
        成功提示消息
    </div>

    <div class="bg-warning/10 text-warning p-2 rounded">
        警告提示消息
    </div>

    <div class="bg-error/10 text-error p-2 rounded">
        错误提示消息
    </div>
</div>

进阶技巧

1. 动态颜色生成

// 使用 CSS 变量生成动态颜色
function generateColors(hue) {
    return {
        light: `hsl(${hue}, 70%, 80%)`,
        DEFAULT: `hsl(${hue}, 70%, 50%)`,
        dark: `hsl(${hue}, 70%, 30%)`,
    }
}

2. 主题预设

// presets.js
const brandPreset = {
    theme: {
        colors: {
            brand: {
                // 品牌色预设
            }
        }
    }
}

总结

Tailwind CSS 的颜色系统和主题定制提供了：

1. 完整的默认调色板
2. 灵活的自定义能力
3. 深色模式支持
4. 主题切换机制

通过合理运用这些特性，我们可以：

1. 建立统一的品牌形象
2. 提供良好的用户体验
3. 实现灵活的主题切换
4. 确保无障碍访问

在实际开发中，应该根据项目需求合理规划颜色系统，并建立清晰的使用规范。