背景

項(xiàng)目里多個(gè)Tab標(biāo)簽都需要設(shè)置同樣的背景顏色#F1F5FF，在集成tailwindcss之前就是重復(fù)該樣式，如下圖：

.body {background-color: #f1f5ff;
}

集成tailwindcss時(shí)，我們希望在class中直接設(shè)置該背景色，但是默認(rèn)的tailwindcss的背景色色板里不包含該顏色，我們想到要定義一個(gè)顏色變量保存，再引用該顏色

Tailwindcss 定制

自定義調(diào)色板

默認(rèn)情況下，Tailwind 將整個(gè)默認(rèn)調(diào)色板用作背景顏色。

您可以通過(guò)編輯文件中的變量來(lái)自定義調(diào)色板，或者使用Tailwind 配置部分僅自定義背景顏色。theme.colors tailwind.config.js theme.backgroundColor

當(dāng)您確實(shí)需要自定義調(diào)色板時(shí)，您可以在文件部分colors中的鍵下配置顏色：theme tailwind.config.js

// tailwind.config.js
module.exports = {theme: {colors: {// Configure your color palette here}}
}

在構(gòu)建自定義調(diào)色板時(shí)，有兩種方式，第一，您可以從我們廣泛的調(diào)色板中選擇您的顏色。第二。您也可以通過(guò)直接添加特定的顏色值來(lái)配置您自己的自定義顏色。

1. 使用Tailwind 配置部分僅自定義背景顏色

如果您沒(méi)有為項(xiàng)目考慮一套完全自定義的顏色，您可以通過(guò)導(dǎo)入'tailwindcss/colors'配置文件并選擇您喜歡的顏色來(lái)從我們的完整調(diào)色板中挑選您的顏色。

// 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,}}
}

請(qǐng)參考 完整的調(diào)色板參考

2. 自定義調(diào)色板

您可以通過(guò)從頭開(kāi)始添加自己的顏色值來(lái)構(gòu)建完全自定義的調(diào)色板：

// 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',}}}
}

默認(rèn)情況下，這些顏色會(huì)被所有顏色驅(qū)動(dòng)的實(shí)用程序自動(dòng)共享，例如、、textColor等等。backgroundColorborderColor

擴(kuò)展默認(rèn)設(shè)置

如主題文檔中所述，如果您想要擴(kuò)展默認(rèn)調(diào)色板而不是覆蓋它，則可以使用文件theme.extend.colors 的部分來(lái)實(shí)現(xiàn)tailwind.config.js：

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

bg-regal-blue除 Tailwind 的所有默認(rèn)顏色外，這還將生成類(lèi)似的類(lèi)別。

這些擴(kuò)展已深度合并，因此如果您想在 Tailwind 的默認(rèn)顏色之一中添加其他色調(diào)，可以這樣做：

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

這將添加類(lèi)似的類(lèi) bg-blue-450，而不會(huì)丟失現(xiàn)有的類(lèi)，如 bg-blue-400 或 bg-blue-500

解決

在項(xiàng)目中，我們只需新增一個(gè)自定義的背景色，所以最有效的辦法是擴(kuò)展默認(rèn)配置，因此我們?cè)?code>tailwind.config.js加入如下配置：

// tailwind.config.js
module.exports = {theme: {extend: {colors: {tab_background: '#F1F5FF',}}}
}

再在組件中用class name申明背景色樣式：

<div class="bg-tab_background"></div>