Tailwind CSS - 自定义颜色

Tailwind CSS - 定制颜色

Tailwind CSS 开箱即用地提供了一套全面且精心制作的默认调色板。然而，对于大多数项目，您会希望定制此调色板以匹配您品牌的特定标识。本教程将指导您了解在项目中管理和扩展颜色的现代技术。

默认调色板是一个很好的起点，它包含各种灰色和一套充满活力的颜色，每种颜色都有 11 种深浅变化。您可以在 Tailwind 官方文档中浏览完整的默认调色板。

最佳实践：扩展调色板

与其替换 Tailwind 的整个调色板，不如采用推荐的方法，即使用您的自定义颜色扩展它。这样，您在添加自己的颜色的同时，仍然可以访问有用的默认颜色。您可以在 tailwind.config.js 文件中的 theme.extend.colors 对象内部添加新颜色。

这种方法非常适合添加品牌颜色、语义颜色或为现有颜色添加额外的深浅变化。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#4F46E5',
        'brand-secondary': '#D97706',
        'brown': {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
          950: '#2c1e1a',
        },
      }
    },
  },\n  plugins: [],
}

通过此配置，您现在可以使用 bg-brand-primary 或 text-brown-700 等类。

组织您的颜色

命名约定

虽然您可以随意命名颜色，但最佳实践是使用语义或抽象名称而非字面名称。这使得您的设计系统更加健壮且更易于主题化。

例如，与其使用 'blue'，不如使用 'primary'。这允许您在将来更改 ‘primary’ 的含义，而无需重构所有组件。

const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': colors.indigo['600'],
        'secondary': colors.amber['500'],
        'neutral': colors.slate,
      }
    },
  },
}

嵌套颜色对象

当一种颜色有多种深浅变化时，将它们分组到一个嵌套对象中。键将组合形成诸如 bg-tahiti-400 这样的类名。

使用特殊的 DEFAULT 键来定义不需要深浅后缀的基础颜色。这将创建诸如 bg-tahiti 这样的类。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'tahiti': {
          light: '#67e8f9',
          DEFAULT: '#06b6d4', // 对应 bg-tahiti
          dark: '#0e7490',
        },
      },
    },
  },
}

使用任意值

对于不需要成为主题一部分的一次性颜色，您可以使用 Tailwind 的任意值语法。这非常适合仅使用一次的独特渐变或特定十六进制代码。

<!-- 这会即时为特定的十六进制代码生成一个类 -->
<button class="bg-[#1da1f2] text-white p-2 rounded-lg">
  Share on Twitter
</button>

<!-- 可用于文本、边框等 -->
<p class="text-[#bada55]">A unique color!</p>

高级：将 CSS 变量用于颜色

一种强大的主题化技术（例如，亮/暗模式）是使用 CSS 自定义属性定义颜色，并在 Tailwind 配置中引用它们。这允许您通过简单地更改 CSS 变量来切换主题，通常会结合一些 JavaScript。

关键在于将变量定义为颜色通道（R、G、B 的三个数字），然后使用 Tailwind 特殊的 <alpha-value> 占位符，以确保不透明度修饰符能正常工作。

步骤 1：在您的全局 CSS 文件中定义 CSS 变量。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: 88 80 236; /* 靛蓝色调的 R G B 通道 */
    --color-secondary: 234 179 8; /* 琥珀色调的 R G B 通道 */
  }
  .dark {
    --color-primary: 167 139 250;
    --color-secondary: 250 204 21;
  }
}

步骤 2：在 tailwind.config.js 中引用这些变量。

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // 启用基于类的暗模式
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
        secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
      }
    }
  }
}

现在您可以使用 bg-primary、text-secondary 等类，甚至使用 bg-primary/50 应用不透明度。在 <html> 元素上切换 .dark 类将动态更改您站点的主题。

覆盖默认调色板

如果您需要完全控制并希望禁用所有默认颜色，可以直接在 theme.colors 下定义您的调色板。警告：这是一个破坏性操作，将移除 Tailwind 的所有内置颜色。这通常只在高度受限的设计系统中才需要。

const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // 这将**替换**整个调色板
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#ffffff',
      black: '#000000',
      primary: colors.indigo, // 您仍然可以引入默认颜色
      neutral: colors.slate,
    },
  },
}