你可以通过在配置文件中的 theme.colors 部分直接添加自定义颜色，来将默认颜色更改为你自己的选择。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
    },
  },
}

这些颜色可用于文本、边框、背景等各种方面。你还可以在项目中使用 "transparent" 和 "currentColor" 来处理特定情况。

<div class="bg-midnight text-tahiti">
  <!-- ... -->
</div>

颜色对象语法

当你的调色板包含同一颜色的多个色调时，使用嵌套的颜色对象语法将它们分组在一起会很方便。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      },
      // ...
    },
  },
}

嵌套的键将与父键组合，形成像 bg-tahiti-400 这样的 class 名称。

当你不想为值添加任何额外词语时，使用 "DEFAULT" 键。

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

这将创建像 bg-tahiti、bg-tahiti-light 和 bg-tahiti-dark 这样的 class。

任意值

使用任意值表示法来创建一次性自定义颜色 class，而不是将其添加到你的 theme 中。

<button class="bg-[#1da1f2] text-white ...">
  <svg><!-- ... --></svg>
  Share on Twitter
</button>

生成颜色

Tailwind 的默认颜色是手工挑选的，以获得最佳效果。对于自定义颜色，可以使用像 UI Colors、Palettte 或 ColorBox 这样的工具来帮助创建平衡的调色板。

使用默认颜色

你可以通过导入 "tailwindcss/colors" 并选择所需的颜色来使用 Tailwind 的默认颜色。

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}

为颜色名称创建别名

你也可以将默认颜色重命名为更容易记住的简单名称。

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.slate,
      green: colors.emerald,
      purple: colors.violet,
      yellow: colors.amber,
      pink: colors.fuchsia,
    },
  },
}

因为你通常在任何给定的项目中只使用一套灰色系。这种做法

这对于灰色系尤其常见，因为你通常在任何给定的项目中只使用一套灰色系。能够输入 bg-gray-300 而不是 bg-neutral-300 就很方便了。

添加额外颜色

如果你想向默认调色板添加一个全新的颜色，请在设置文件的 "theme.extend.colors" 部分添加新颜色。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
  },
}

如果你的设计需要，你也可以使用 theme.extend.colors 为现有颜色添加额外的色阶。

禁用默认颜色

如果你想禁用任何默认颜色，最好的方法是覆盖默认颜色调色板，只包含你想要的颜色。

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}

为你的颜色命名

Tailwind 默认使用简单的颜色名称和从浅到深的色阶，但你可以自定义颜色名称以适应项目需求，比如为多个主题使用抽象名称。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

你可以像上面那样显式配置这些颜色，或者从我们的默认颜色调色板中引入颜色并为它们创建别名：

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

使用 CSS 变量

如果你想使用带有 opacity 的自定义颜色，请将它们定义为简单的颜色值（例如 red、blue 等），而不是使用 CSS 变量。

将你的 CSS 变量定义为不带颜色空间函数的通道

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

@layer base {
  :root {
    --color-primary: 255 115 179;
    --color-secondary: 111 114 185;
    /* ... */
  }
}

不要包含颜色空间函数，否则 opacity 修饰符将无法工作。

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

@layer base {
  :root {
    --color-primary: rgb(255 115 179);
    --color-secondary: rgb(111 114 185);
    /* ... */
  }
}

然后在你的配置文件中定义颜色，确保包含你使用的颜色空间以及特殊的 占位符，Tailwind 将在使用了 opacity 修饰符时使用它来注入 alpha 值。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // 使用现代 `rgb`
      primary: 'rgb(var(--color-primary) / <alpha-value>)',
      secondary: 'rgb(var(--color-secondary) / <alpha-value>)',

      // 使用现代 `hsl`
      primary: 'hsl(var(--color-primary) / <alpha-value>)',
      secondary: 'hsl(var(--color-secondary) / <alpha-value>)',

      // 使用传统的 `rgba`
      primary: 'rgba(var(--color-primary), <alpha-value>)',
      secondary: 'rgba(var(--color-secondary), <alpha-value>)',
    }
  }
}

定义自定义颜色时，对于现代语法使用空格，对于传统的 rgba 或 hsla 等函数使用逗号。

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

@layer base {
  :root {
    /* 用于 rgb(255 115 179 / <alpha-value>) */
    --color-primary: 255 115 179;

    /* 用于 hsl(198deg 93% 60% / <alpha-value>) */
    --color-primary: 198deg 93% 60%;

    /* 用于 rgba(255, 115, 179, <alpha-value>) */
    --color-primary: 255, 115, 179;
  }
}