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;
  }
}