tailwincss 颜色配置 - 食用指南

使用环境

现代前端开发框架：vite、webpack 等，使用 npm 安装
使用 tailwindcss cli，不依赖框架，通过 cli 命令，编译成指定 css 文件

自定义 color token 思路

语义化优先：用brand-500代替blue-500

javascript 复制代码

// ❌ 避免：直接使用颜色名称
colors: {
  'facebook-blue': '#1877f2',
  'twitter-blue': '#1da1f2'
}

// ✅ 推荐：使用语义化名称
colors: {
  brand: {
    primary: '#1877f2',  // 主品牌色
    secondary: '#1da1f2' // 辅助品牌色
  }
}

色阶完整：每个颜色定义50-900的完整色阶

javascript 复制代码

 colors: {
   brand: {
     50: '#f0f9ff',  // 最浅色（用于hover背景）
     100: '#e0f2fe', // 浅色背景
     200: '#bae6fd', // 边框/分割线
     300: '#7dd3fc', // 次要元素
     400: '#38bdf8', // 次要按钮
     500: '#0ea5e9', // 主按钮/主色调
     600: '#0284c7', // hover状态
     700: '#0369a1', // active状态
     800: '#075985', // 标题/重要文本
     900: '#0c4a6e'  // 最深色（特殊强调）
   }
 }

无障碍保障：确保所有文本对比度≥4.5:1
主题友好：使用CSS变量支持多主题
工具驱动：用工具生成色阶而非手动调整
文档先行：建立颜色使用规范文档

完整的颜色配置思路

品牌色：主色（蓝色系）、辅助色（绿色系）
状态色：成功（绿色）、警告（黄色）、危险（红色）、信息（蓝色）
中性色：灰色系（用于文本、边框、背景）

javascript 复制代码

// 1. 定义品牌色主色（蓝色）的色阶：
primary: {
  50: '#f0f9ff',
  100: '#e0f2fe',
  200: '#bae6fd',
  300: '#7dd3fc',
  400: '#38bdf8',
  500: '#0ea5e9', // 主色
  600: '#0284c7',
  700: '#0369a1',
  800: '#075985',
  900: '#0c4a6e',
}

// 2. 定义辅助色（绿色）的色阶：
secondary: {
  50: '#f0fdf4',
  100: '#dcfce7',
  200: '#bbf7d0',
  300: '#86efac',
  400: '#4ade80',
  500: '#22c55e', // 辅助色
  600: '#16a34a',
  700: '#15803d',
  800: '#166534',
  900: '#14532d',
}

// 扩展色（可选）
accent: {
  pink: '#ec4899',
  purple: '#8b5cf6'
}

// 3. 定义状态色（通常只需要几个关键色阶，如500、600、700）：
success: {
  500: '#22c55e',
  600: '#16a34a',
},
warning: {
  500: '#f59e0b',
  600: '#d97706',
},
danger: {
  500: '#ef4444',
  600: '#dc2626',
},
info: {
  500: '#3b82f6',
  600: '#2563eb',
}
// -- or -- 
success: '#10b981',  // 成功/通过
warning: '#f59e0b',  // 警告/注意
danger: '#ef4444',   // 错误/危险
info: '#3b82f6',     // 信息/提示

// 4. 定义中性色（灰色）：
gray: {
  50: '#f9fafb',
  100: '#f3f4f6',
  200: '#e5e7eb',
  300: '#d1d5db',
  400: '#9ca3af',
  500: '#6b7280',
  600: '#4b5563',
  700: '#374151',
  800: '#1f2937',
  900: '#111827',
}
// -- or --
gray: {
  50: '#f9fafb', // 浅背景
  100: '#f3f4f6',// 卡片背景
  200: '#e5e7eb',// 边框
  300: '#d1d5db',// 禁用状态
  500: '#6b7280',// 次要文本
  700: '#374151',// 主要文本
  900: '#111827' // 标题
},

// 5. 在tailwind.config.js中合并：
module.exports = {
  theme: {
    extend: {
     colors: {
       primary: { ... },
       secondary: { ... },
       success: { ... },
       warning: { ... },
       danger: { ... },
       info: { ... },
       gray: { ... },
     }
    }
  }
}

使用 css 变量进行主题化 -- tailwindcss v4

参考链接

Theme variables - Core concepts

penguinui 主题配置

css 复制代码

@theme {
    /* Fonts */
    --font-title: 'Poppins', sans-serif;
    --font-paragraph: 'Inter', sans-serif;

   /* Light Themes */
    --color-surface: var(--color-white);
    --color-surface-alt: var(--color-neutral-50);
    --color-on-surface: var(--color-neutral-600);
    --color-on-surface-strong: var(--color-neutral-900);
    --color-primary: var(--color-black);
    --color-on-primary: var(--color-neutral-100);
    --color-secondary: var(--color-neutral-800);
    --color-on-secondary: var(--color-white);
    --color-outline: var(--color-neutral-300);
    --color-outline-strong: var(--color-neutral-800);

    /* Dark Theme */
    --color-surface-dark: var(--color-neutral-950);
    --color-surface-dark-alt: var(--color-neutral-900);
    --color-on-surface-dark: var(--color-neutral-300);
    --color-on-surface-dark-strong: var(--color-white);
    --color-primary-dark: var(--color-white);
    --color-on-primary-dark: var(--color-black);
    --color-secondary-dark: var(--color-neutral-300);
    --color-on-secondary-dark: var(--color-black);
    --color-outline-dark: var(--color-neutral-700);
    --color-outline-dark-strong: var(--color-neutral-300);

    /* Shared Colors */
    --color-info: var(--color-sky-500);
    --color-on-info: var(--color-white);
    --color-success: var(--color-green-500);
    --color-on-success: var(--color-white);
    --color-warning: var(--color-amber-500);
    --color-on-warning: var(--color-white);
    --color-danger: var(--color-red-500);
    --color-on-danger: var(--color-white);

    /* Border Radius */
    --radius-radius: var(--radius-sm);
}

@layer base {
    [data-theme=arctic] {
        /* Fonts */
        --font-body: 'Inter', sans-serif;
        --font-title: 'Inter', sans-serif;

        /* Light Theme */
        --color-surface: var(--color-white);
        --color-surface-alt: var(--color-slate-100);
        --color-on-surface: var(--color-slate-700);
        --color-on-surface-strong: var(--color-black);
        --color-primary: var(--color-blue-700);
        --color-on-primary: var(--color-slate-100);
        --color-secondary: var(--color-indigo-700);
        --color-on-secondary: var(--color-slate-100);
        --color-outline: var(--color-slate-300);
        --color-outline-strong: var(--color-slate-800);

        /* Dark Theme */
        --color-surface-dark: var(--color-slate-900);
        --color-surface-dark-alt: var(--color-slate-800);
        --color-on-surface-dark: var(--color-slate-300);
        --color-on-surface-dark-strong: var(--color-white);
        --color-primary-dark: var(--color-blue-600);
        --color-on-primary-dark: var(--color-slate-100);
        --color-secondary-dark: var(--color-indigo-600);
        --color-on-secondary-dark: var(--color-slate-100);
        --color-outline-dark: var(--color-slate-700);
        --color-outline-dark-strong: var(--color-slate-300);

        /* Shared Colors */
        --color-info: var(--color-sky-600);
        --color-on-info: var(--color-white);
        --color-success: var(--color-green-600);
        --color-on-success: var(--color-white);
        --color-warning: var(--color-amber-500);
        --color-on-warning: var(--color-white);
        --color-danger: var(--color-red-600);
        --color-on-danger: var(--color-white);

        /* Border Radius */
        --radius-radius: var(--radius-lg);
    }

    [data-theme=modern] {
        /* Fonts */
        --font-body: 'Lato', sans-serif;
        --font-title: 'Lato', sans-serif;

        /* Light Theme */
        --color-surface: var(--color-white);
        --color-surface-alt: var(--color-neutral-50);
        --color-on-surface: var(--color-neutral-600);
        --color-on-surface-strong: var(--color-neutral-900);
        --color-primary: var(--color-black);
        --color-on-primary: var(--color-neutral-100);
        --color-secondary: var(--color-neutral-800);
        --color-on-secondary: var(--color-white);
        --color-outline: var(--color-neutral-300);
        --color-outline-strong: var(--color-neutral-800);

        /* Dark Theme */
        --color-surface-dark: var(--color-neutral-950);
        --color-surface-dark-alt: var(--color-neutral-900);
        --color-on-surface-dark: var(--color-neutral-300);
        --color-on-surface-dark-strong: var(--color-white);
        --color-primary-dark: var(--color-white);
        --color-on-primary-dark: var(--color-black);
        --color-secondary-dark: var(--color-neutral-300);
        --color-on-secondary-dark: var(--color-black);
        --color-outline-dark: var(--color-neutral-700);
        --color-outline-dark-strong: var(--color-neutral-300);

        /* Shared Colors */
        --color-info: var(--color-sky-500);
        --color-on-info: var(--color-white);
        --color-success: var(--color-green-500);
        --color-on-success: var(--color-white);
        --color-warning: var(--color-amber-500);
        --color-on-warning: var(--color-white);
        --color-danger: var(--color-red-500);
        --color-on-danger: var(--color-white);

        /* Border Radius */
        --radius-radius: var(--radius-sm);
    }

}