「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

客製化色彩 (Customizing Colors)

為你的專案自訂預設的調色盤。

Overview

Tailwind 包含一個開箱即用的專業設計預設調色盤,如果你不考慮自己的特定品牌,這是一個很好的起點。

Gray
colors.coolGray
50
#F9FAFB
100
#F3F4F6
200
#E5E7EB
300
#D1D5DB
400
#9CA3AF
500
#6B7280
600
#4B5563
700
#374151
800
#1F2937
900
#111827
Red
colors.red
50
#FEF2F2
100
#FEE2E2
200
#FECACA
300
#FCA5A5
400
#F87171
500
#EF4444
600
#DC2626
700
#B91C1C
800
#991B1B
900
#7F1D1D
Yellow
colors.amber
50
#FFFBEB
100
#FEF3C7
200
#FDE68A
300
#FCD34D
400
#FBBF24
500
#F59E0B
600
#D97706
700
#B45309
800
#92400E
900
#78350F
Green
colors.emerald
50
#ECFDF5
100
#D1FAE5
200
#A7F3D0
300
#6EE7B7
400
#34D399
500
#10B981
600
#059669
700
#047857
800
#065F46
900
#064E3B
Blue
colors.blue
50
#EFF6FF
100
#DBEAFE
200
#BFDBFE
300
#93C5FD
400
#60A5FA
500
#3B82F6
600
#2563EB
700
#1D4ED8
800
#1E40AF
900
#1E3A8A
Indigo
colors.indigo
50
#EEF2FF
100
#E0E7FF
200
#C7D2FE
300
#A5B4FC
400
#818CF8
500
#6366F1
600
#4F46E5
700
#4338CA
800
#3730A3
900
#312E81
Purple
colors.violet
50
#F5F3FF
100
#EDE9FE
200
#DDD6FE
300
#C4B5FD
400
#A78BFA
500
#8B5CF6
600
#7C3AED
700
#6D28D9
800
#5B21B6
900
#4C1D95
Pink
colors.pink
50
#FDF2F8
100
#FCE7F3
200
#FBCFE8
300
#F9A8D4
400
#F472B6
500
#EC4899
600
#DB2777
700
#BE185D
800
#9D174D
900
#831843

但是當你需要客製化你的調色盤時,你可以在 tailwind.config.js 檔案的 theme 中的 colors 配置你的色彩:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // 在這裡配置你的調色盤
    }
  }
}

當涉及到建立客製化調色盤時,你可以從我們豐富的調色盤中 策劃你的色彩 或是透過新增特定的色彩來 配置你的客製化色彩


策劃色彩

如果你的專案沒有一套完整客製化的色彩,你可以透過引入 'tailwindcss/colors' 至你的 config 檔案並挑選你喜歡的色彩,從我們完整的調色盤中策劃你的色彩。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    }
  }
}

別忘了引入 transparentcurrent,如果你想在專案中可以使用的話。

雖然每個色彩都有一個特定的名稱,但我們鼓勵你在自己的專案中按照自己的喜好命名。我們甚至在預設配置也是這樣做的,將 coolGray 命名為 grayviolet 命名為 purpleamber 命名為 yellowemerald 命名為 green

請參閱我們 完整調色盤參考,查看預設可供選擇的色彩


客製色彩

你可以從頭開始透過新增自己的色彩來建立一個完整客製的調色盤:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    }
  }
}

預設情況下,這些色彩會被所有色彩驅動的功能自動共享,如 textColorbackgroundColorborderColor 等。


色彩物件語法

你可以看到,上面我們使用巢狀物件符號來定義我們的色彩,其中巢狀的鍵值作為修飾符新增到基本色彩名稱中:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        light: '#b3bcf5',
        DEFAULT: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

色彩名稱的不同部分組合成 class 名稱,如 bg-indigo-light。

像 Tailwind 中的許多地方一樣,DEFAULT 鍵值是特殊的,意思是「無修飾符」,所以此配置會產生如 text-indigobg-indigo 的 class,而不是 text-indigo-DEFAULTbg-indigo-DEFAULT

你也可以將色彩定義為簡單的字串而不是物件:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      'indigo-lighter': '#b3bcf5',
      'indigo': '#5c6ac4',
      'indigo-dark': '#202e78',
    }
  }
}

請注意,當使用 theme() 存取顏色時,你需要使用與定義顏色相同的符號。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        // theme('colors.indigo.light')
        light: '#b3bcf5',

        // theme('colors.indigo.DEFAULT')
        DEFAULT: '#5c6ac4',
      },

      // theme('colors.indigo-dark')
      'indigo-dark': '#202e78',
    }
  }
}

延伸預設值

正如 主題文件 中所述,如果你想延伸預設調色盤而不是覆蓋它,你可以使用 tailwind.config.js 檔案中的 theme.extend.colors 來實現:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      }
    }
  }
}

除了所有 Tailwind 預設的色彩,這將產生像 bg-regal-blue 這樣的 class。

這些延伸是深度合併的,所以如果你想在 Tailwind 的預設色彩中新增一個額外的陰影,你可以這樣做:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          450: '#5F99F7'
        },
      }
    }
  }
}

這將新增像 bg-blue-450 這樣的 class,而不會失去像 bg-blue-400bg-blue-500 這樣現有的 class。


停用一個預設色彩

如果你想要停用專案中沒有使用到的預設色彩,最簡單的方法是建立一個新的調色盤,並且不要包含你不打算使用的色彩。

例如,這個 tailwind.config.js 檔案不包括 teal、orange 和 pink,但包括其餘的預設色彩。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.blue
    }
  }
}

此外,你也可以不調整調色盤,依靠 tree-shaking 未使用的樣式 來移除你不使用的色彩。


為你的色彩命名

Tailwind 使用字面的色彩名稱 (像是紅色、綠色等) 和一個預設的數字比例 (其中 50 為淺色、900 為深色)。這對大多數專案來說是相當實用的,但也有充分的理由使用其他命名規範。

例如,如果你正在做一個需要支援多種主題的專案,那麼使用像 primarysecondary 這樣更抽象的名稱可能是有道理的。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

你可以像我們上面那樣明確地配置這些顏色,也可以從我們完整的調色盤中新增顏色並為它們取個別名。

// tailwind.config.js
const colors = require('tailwindcss/colors')

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

你甚至可以用 CSS 客製化屬性 (變數) 來定義這些顏色,以便在用戶端輕易地切換主題。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      // ...
    }
  }
}
/* In your CSS */
:root {
  --color-primary: #5c6ac4;
  --color-secondary: #ecc94b;
  /* ... */
}

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

請注意,如果沒有其他的配置,使用客製化屬性的色彩將無法與色彩不透明功能一起使用,像是 bg-opacity-50。更多有關如何進行此工作的資訊,請參考 此範例 repository


產生顏色

我們常見的一個問題是「如何產生自己客製色彩的 50-900 陰影?」

壞消息是,色彩是複雜的,儘管嘗試了幾十種不同的工具,我們還沒有找到一個能很好產生這種調色盤的工具。我們手工挑選了所有 Tailwind 的預設色彩,透過肉眼仔細地平衡它們,並在實際設計中對其進行測試,以確保我們對它們感到滿意。


調色盤參考

當你把 tailwindcss/colors 引入到 tailwind.config.js 檔案中時,這是所有可以使用的色彩列表。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      // 在這裡建立你的調色盤
      transparent: 'transparent',
      current: 'currentColor',
      gray: colors.trueGray,
      red: colors.red,
      blue: colors.sky,
      yellow: colors.amber,
    }
  }
}

雖然每種色彩都有一個特定的名稱,但我們鼓勵你在自己的專案中按照自己的喜好命名。

Blue Gray
colors.blueGray
50
#F8FAFC
100
#F1F5F9
200
#E2E8F0
300
#CBD5E1
400
#94A3B8
500
#64748B
600
#475569
700
#334155
800
#1E293B
900
#0F172A
Cool Gray
colors.coolGray
50
#F9FAFB
100
#F3F4F6
200
#E5E7EB
300
#D1D5DB
400
#9CA3AF
500
#6B7280
600
#4B5563
700
#374151
800
#1F2937
900
#111827
Gray
colors.gray
50
#FAFAFA
100
#F4F4F5
200
#E4E4E7
300
#D4D4D8
400
#A1A1AA
500
#71717A
600
#52525B
700
#3F3F46
800
#27272A
900
#18181B
True Gray
colors.trueGray
50
#FAFAFA
100
#F5F5F5
200
#E5E5E5
300
#D4D4D4
400
#A3A3A3
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717
Warm Gray
colors.warmGray
50
#FAFAF9
100
#F5F5F4
200
#E7E5E4
300
#D6D3D1
400
#A8A29E
500
#78716C
600
#57534E
700
#44403C
800
#292524
900
#1C1917
Red
colors.red
50
#FEF2F2
100
#FEE2E2
200
#FECACA
300
#FCA5A5
400
#F87171
500
#EF4444
600
#DC2626
700
#B91C1C
800
#991B1B
900
#7F1D1D
Orange
colors.orange
50
#FFF7ED
100
#FFEDD5
200
#FED7AA
300
#FDBA74
400
#FB923C
500
#F97316
600
#EA580C
700
#C2410C
800
#9A3412
900
#7C2D12
Amber
colors.amber
50
#FFFBEB
100
#FEF3C7
200
#FDE68A
300
#FCD34D
400
#FBBF24
500
#F59E0B
600
#D97706
700
#B45309
800
#92400E
900
#78350F
Yellow
colors.yellow
50
#FEFCE8
100
#FEF9C3
200
#FEF08A
300
#FDE047
400
#FACC15
500
#EAB308
600
#CA8A04
700
#A16207
800
#854D0E
900
#713F12
Lime
colors.lime
50
#F7FEE7
100
#ECFCCB
200
#D9F99D
300
#BEF264
400
#A3E635
500
#84CC16
600
#65A30D
700
#4D7C0F
800
#3F6212
900
#365314
Green
colors.green
50
#F0FDF4
100
#DCFCE7
200
#BBF7D0
300
#86EFAC
400
#4ADE80
500
#22C55E
600
#16A34A
700
#15803D
800
#166534
900
#14532D
Emerald
colors.emerald
50
#ECFDF5
100
#D1FAE5
200
#A7F3D0
300
#6EE7B7
400
#34D399
500
#10B981
600
#059669
700
#047857
800
#065F46
900
#064E3B
Teal
colors.teal
50
#F0FDFA
100
#CCFBF1
200
#99F6E4
300
#5EEAD4
400
#2DD4BF
500
#14B8A6
600
#0D9488
700
#0F766E
800
#115E59
900
#134E4A
Cyan
colors.cyan
50
#ECFEFF
100
#CFFAFE
200
#A5F3FC
300
#67E8F9
400
#22D3EE
500
#06B6D4
600
#0891B2
700
#0E7490
800
#155E75
900
#164E63
Sky
colors.sky
50
#F0F9FF
100
#E0F2FE
200
#BAE6FD
300
#7DD3FC
400
#38BDF8
500
#0EA5E9
600
#0284C7
700
#0369A1
800
#075985
900
#0C4A6E
Blue
colors.blue
50
#EFF6FF
100
#DBEAFE
200
#BFDBFE
300
#93C5FD
400
#60A5FA
500
#3B82F6
600
#2563EB
700
#1D4ED8
800
#1E40AF
900
#1E3A8A
Indigo
colors.indigo
50
#EEF2FF
100
#E0E7FF
200
#C7D2FE
300
#A5B4FC
400
#818CF8
500
#6366F1
600
#4F46E5
700
#4338CA
800
#3730A3
900
#312E81
Violet
colors.violet
50
#F5F3FF
100
#EDE9FE
200
#DDD6FE
300
#C4B5FD
400
#A78BFA
500
#8B5CF6
600
#7C3AED
700
#6D28D9
800
#5B21B6
900
#4C1D95
Purple
colors.purple
50
#FAF5FF
100
#F3E8FF
200
#E9D5FF
300
#D8B4FE
400
#C084FC
500
#A855F7
600
#9333EA
700
#7E22CE
800
#6B21A8
900
#581C87
Fuchsia
colors.fuchsia
50
#FDF4FF
100
#FAE8FF
200
#F5D0FE
300
#F0ABFC
400
#E879F9
500
#D946EF
600
#C026D3
700
#A21CAF
800
#86198F
900
#701A75
Pink
colors.pink
50
#FDF2F8
100
#FCE7F3
200
#FBCFE8
300
#F9A8D4
400
#F472B6
500
#EC4899
600
#DB2777
700
#BE185D
800
#9D174D
900
#831843
Rose
colors.rose
50
#FFF1F2
100
#FFE4E6
200
#FECDD3
300
#FDA4AF
400
#FB7185
500
#F43F5E
600
#E11D48
700
#BE123C
800
#9F1239
900
#881337