Tailwind CSS - 颜色自定义

Tailwind CSS 颜色允许您指定项目的默认调色板。

如果您没有自己的特定品牌，Tailwind 提供预制的调色板来帮助您入门。

使用自定义颜色 (Shǐyòng zìdìngyì yánsè)

您可以通过在配置文件的“theme.colors”部分下直接添加自定义颜色来更改默认颜色。 (Nín kěyǐ tōngguò zài pèizhì wénjiàn de “theme.colors” bùfèn xià zhíjiē tiānjiā zìdìngyì yánsè lái gǎibiàn mòrèn yánsè.)

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

这些颜色可用于文本、边框、背景等各个方面。您也可以在项目中针对特定情况使用“transparent”和“currentColor”。 (Zhèxiē yánsè kě yòng yú wénběn, biānkùang, bèijǐng děng gège fāngmiàn. Nín yě kěyǐ zài xiàngmù zhōng zhēnduì tèdìng qíngkuàng shǐyòng “transparent” hé “currentColor”.)

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

颜色对象语法 (Yánsè duìxiàng yǔfǎ)

当您的调色板包含相同颜色的多种色调时，使用嵌套颜色对象语法将它们组合在一起会很方便。(Dāng nín de tiáosèbǎn bāohán xiāngtóng yánsè de duō zhǒng sèdiào shí, shǐyòng qiàn tàoyánsè duìxiàng yǔfǎ jiāng tāmen zǔhé zài yīqǐ huì hěn fāngbiàn.)

/** @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**。(Qiàntào jiàn jiāng yǔ fù jiàn zǔhé yǐ xíngchéng lèimíng, lìrú **bg-tahiti-400**.)

如果不想为值添加任何额外的词语，请使用“DEFAULT”键。

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

这将创建诸如 bg-tahiti、bg-tahiti-light 和 bg-tahiti-dark 之类的类。

任意值

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

<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 变量

如果您想使用具有不透明度的自定义颜色，请将它们定义为简单的颜色值（如红色、蓝色等），而不是使用 CSS 变量。

将您的 CSS 变量定义为没有颜色空间函数的通道。

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

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

不要包含颜色空间函数，否则不透明度修饰符将不起作用。

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

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

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

      // Using modern `hsl`
      primary: 'hsl(var(--color-primary) / <alpha-value>)',
      secondary: 'hsl(var(--color-secondary) / <alpha-value>)',

      // Using legacy `rgba`
      primary: 'rgba(var(--color-primary), <alpha-value>)',
      secondary: 'rgba(var(--color-secondary), <alpha-value>)',
    }
  }
}

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

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

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

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