自定義顏色

為您的項(xiàng)目定制默認(rèn)調(diào)色盤(pán)。

Tailwind 包含一個(gè)專業(yè)制作的開(kāi)箱即用的默認(rèn)調(diào)色板，如果您沒(méi)有自己的特定品牌，這是一個(gè)很好的起點(diǎn)。

但是當(dāng)您需要定制您的調(diào)色板時(shí)，您可以在您的 ?tailwind.config.js? 文件的 ?theme ?部分的 ?colors ?鍵下配置您的顏色。

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

當(dāng)涉及到建立一個(gè)自定義調(diào)色板時(shí)，您可以從我們豐富的調(diào)色板中 策劃您的顏色，或者通過(guò)直接添加您的特定顏色值 [配置您自己的自定義顏色] (#custom-colors)。

策劃顏色

如果您沒(méi)有一套完全自定義的顏色，您可以從我們完整的調(diào)色板中策劃您的顏色，只需要將 ?'tailwindcss/colors'? 導(dǎ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,
    }
  }
}

如果您希望讓這些在項(xiàng)目中可用，請(qǐng)不要忘記包含 ?transparent ?和 ?current ?。(Don’t forget to include transparent and current if you’d like those available in your project.)

盡管每種顏色都有一個(gè)特定的名稱，但我們鼓勵(lì)您在自己的項(xiàng)目中隨意給它們起別名。我們甚至在默認(rèn)配置中執(zhí)行此操作，將 ?coolGray ?別名為 ?gray?，將 ?violet ?別名為 ?purple?，將 ?amber ?別名為 ?yellow?，將 ?emerald ?別名為 ?green?。

自定義顏色

您可以添加自己的顏色值來(lái)建立一個(gè)完全自定義的調(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)的功能類自動(dòng)共享，如 ?textColor?、?backgroundColor?、?borderColor ?等。

顏色對(duì)象語(yǔ)法

您可以看到，上面我們使用嵌套對(duì)象符號(hào)來(lái)定義我們的顏色，其中嵌套鍵作為修飾符添加到基礎(chǔ)顏色名稱中：

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

顏色名稱的不同分段組合成類名，如 ?bg-indigo-light?。

和 Tailwind 的很多地方一樣，?DEFAULT ?鍵很特殊，意思是”沒(méi)有修飾符”，所以這個(gè)配置會(huì)生成 ?text-indigo? 和 ?bg-indigo? 這樣的類，而不是 ?text-indigo-DEFAULT? 或 ?bg-indigo-DEFAULT?。

您也可以將顏色定義為簡(jiǎn)單的字符串而不是對(duì)象。

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

請(qǐng)注意，當(dāng)使用 ?theme()? 函數(shù)訪問(wèn)顏色時(shí)，您需要使用與定義顏色相同的符號(hào)。

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

擴(kuò)展默認(rèn)顏色

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

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

這將生成像 ?bg-regal-blue? 這樣的類，除了所有 Tailwind 的默認(rèn)顏色。

這些擴(kuò)展是深度合并的，所以如果您想在 Tailwind 的默認(rèn)顏色中增加一個(gè)額外的陰影，您可以這樣做：

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

這將增加像 ?bg-blue-450? 這樣的類，而不會(huì)失去像 ?bg-blue-400? 或 ?bg-blue-500? 這樣的現(xiàn)有的類。

禁用一個(gè)默認(rèn)顏色

如果您想禁用一個(gè)默認(rèn)顏色，因?yàn)槟鷽](méi)有在項(xiàng)目中使用它，最簡(jiǎn)單的方法是建立一個(gè)新的調(diào)色板，不包括您想禁用的顏色。

例如：這個(gè) ?tailwind.config.js? 文件不包括 teal, orange 和 pink，但包括其余的默認(rèn)顏色。

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

另外，您也可以不動(dòng)調(diào)色板，依靠 tree-shaking 未使用的樣式 來(lái)刪除您不使用的顏色。

為您的顏色命名

Tailwind 使用字面的顏色名稱(如紅色，綠色等)和一個(gè)默認(rèn)的數(shù)字比例(其中50為淺色，900為深色)。這對(duì)大多數(shù)項(xiàng)目來(lái)說(shuō)是相當(dāng)實(shí)用的，但也有充分的理由使用其他的命名慣例。

例如，如果您正在做一個(gè)需要支持多個(gè)主題的項(xiàng)目，那么使用 ?primary ?和 ?secondary ?這樣更抽象的名稱可能是有意義的。

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

您可以像我們上面那樣明確地配置這些顏色，也可以從我們完整的調(diào)色板中調(diào)入顏色，并對(duì)給他們起個(gè)別名。

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

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

您甚至可以使用 CSS 自定義屬性（變量）來(lái)定義這些顏色，以便于在客戶端切換主題。

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

請(qǐng)注意，如果沒(méi)有額外的配置，使用自定義屬性定義的顏色將無(wú)法與 ?bg-opacity-50? 等顏色不透明度實(shí)用程序一起使用。有關(guān)如何使其工作的更多信息，請(qǐng)參閱此示例存儲(chǔ)庫(kù)。

生成顏色

我們常見(jiàn)的一個(gè)問(wèn)題是”如何生成自己自定義顏色的 50-900 種色調(diào)？“。

壞消息是，顏色是復(fù)雜的，盡管嘗試了幾十個(gè)不同的工具，我們還沒(méi)有找到一個(gè)能很好地生成這種調(diào)色板的工具。我們手工挑選了所有 Tailwind 的默認(rèn)顏色，用眼睛仔細(xì)地平衡它們，并在實(shí)際設(shè)計(jì)中測(cè)試它們，以確保我們對(duì)它們感到滿意。

調(diào)色板參考

當(dāng)您把 ?tailwindcss/colors? 導(dǎo)入到您的 ?tailwind.config.js? 文件中時(shí)，這是所有可用顏色的列表。

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

module.exports = {
  theme: {
    colors: {
      // Build your palette here
      transparent: 'transparent',
      current: 'currentColor',
      gray: colors.trueGray,
      red: colors.red,
      blue: colors.sky,
      yellow: colors.amber,
    }
  }
}

雖然每種顏色都有一個(gè)特定的名稱，但我們鼓勵(lì)您在自己的項(xiàng)目中按照自己的喜好給它們起別名。