Tailwind CSS - 自定义颜色

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

如果您还没有确定自己的特定品牌，Tailwind 附带一个预制调色板来帮助您入门。

使用自定义颜色

您可以直接在配置文件的"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。

如果您不想在值中添加任何额外的单词，请使用"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;
  }
}