【Tailwind和訳】CUSTOMIZATION/Colors
この記事について
この記事は、CUSTOMIZATION/Colorsの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Customizing Colors
プロジェクトに合わせてデフォルトのカラーパレットをカスタマイズすることができます。
概要
Tailwind には、専門家が作成したデフォルトのカラーパレットがすぐに用意されており、自分のブランディングが決まっていない場合の出発点として最適です。
しかし、パレットをカスタマイズする必要がある場合は、tailwind.config.jsファイルのthemeセクションにあるcolorsキーで色を設定することができます。
module.exports = {
theme: {
colors: {
// カラーパレットの設定はこちら
}
}
}
カスタムカラーパレットの構築に関しては、豊富な付属カラーパレットから色を選択するか、特定のカラー値を直接追加して独自のカスタムカラーを設定することができます。
色の選択
完全にカスタムされた色をお持ちでない場合は、設定ファイルにtailwindcss/colorsをインポートし、お好みの色を選択することで、完全なカラーパレットから色を選択することができます。
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,
}
}
}
プロジェクトで使用したい場合は、transparentとcurrentも忘れずに入れてください。
それぞれの色には固有の名前がついていますが、自分のプロジェクトでは好きなように別名をつけることができます。デフォルトの設定では、coolGrayをgray、violetをpurple、amberをyellow、emeraldをgreenにエイリアスしています。
デフォルトで選択可能な色については、カラーパレットのリファレンスをご覧ください。
カスタムカラー
独自のカラーバリューを一から追加することで、完全なカスタムパレットを構築することができます。
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',
}
}
}
}
デフォルトでは、これらの色は、textColor、backgroundColor、borderColorなど、すべての色を扱うユーティリティーで自動的に共有されます。
カラーオブジェクトの構文
上の図では、入れ子になったオブジェクト表記を使って色を定義していますが、これは入れ子になったキーを修飾子としてベースの色名に追加するものです。
module.exports = {
theme: {
colors: {
indigo: {
light: '#b3bcf5',
DEFAULT: '#5c6ac4',
dark: '#202e78',
}
}
}
}
カラー名の異なるセグメントが結合され、bg-indigo-lightのようなクラス名が生成されます。
Tailwind の他の多くの場所と同様に、DEFAULTキーは特別なもので、「修飾なし」を意味します。したがって、この設定ではtext-indigoやbg-indigoのようなクラスが生成されますが、text-indigo-DEFAULTやbg-indigo-DEFAULTは生成されません。
また、色をオブジェクトではなく単純な文字列として定義することもできます。
module.exports = {
theme: {
colors: {
'indigo-lighter': '#b3bcf5',
'indigo': '#5c6ac4',
'indigo-dark': '#202e78',
}
}
}
なお、theme()関数で色にアクセスする際には、色を定義したときと同じ記法を使う必要があります。
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セクションを使用して行うことができます。
module.exports = {
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
}
}
}
}
これにより、Tailwind のすべてのデフォルトカラーに加えて、bg-regal-blueのようなクラスが生成されます。
これらの拡張機能は深くマージされているので、Tailwind のデフォルトカラーの 1 つに追加のシェードを追加したい場合は、このようにすることができます。
module.exports = {
theme: {
extend: {
colors: {
blue: {
450: '#5F99F7'
},
}
}
}
}
これにより、bg-blue-400やbg-blue-500のような既存のクラスを失うことなく、bg-blue-450のようなクラスが追加されます。
デフォルトカラーの無効化
プロジェクトで使用していないためにデフォルトカラーを無効にしたい場合、最も簡単な方法は、無効にしたいカラーを含まない新しいカラーパレットを作ることです。
例えば、この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
}
}
}
あるいは、カラーパレットをそのままにして、使用しない色をツリーシェイクの未使用スタイルに頼って削除する方法もあります。
色の名称について
Tailwind では、デフォルトでリテラルな色名（赤、緑など）と、数値によるスケール（50 が明るい、900 が暗い）を使用しています。これはほとんどのプロジェクトで実用的ですが、他の命名規則を使用する正当な理由もあります。
例えば、複数のテーマに対応する必要があるプロジェクトでは、primaryやsecondaryといった抽象的な名前を使用することが有効です。
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 のカスタムプロパティ（変数）で定義しておけば、クライアント側で簡単にテーマを切り替えることができます。
module.exports = {
theme: {
colors: {
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
// ...
}
}
}
:root {
--color-primary: #5c6ac4;
--color-secondary: #ecc94b;
/* ... */
}
@tailwind base;
@tailwind components;
@tailwind utilities;
カスタムプロパティで定義された色は、bg-opacity-50のようなカラーオパシティユーティリティーでは、追加設定なしでは動作しないことに注意してください。これを動作させる方法の詳細については、このサンプルリポジトリを参照してください。
色の生成する
よくある質問に、「自分のカスタムカラーの 50〜900 色のシェードを生成するにはどうしたらいいですか」というものがあります。
しかし、色というのは複雑なもので、様々なツールを試してみましたが、このような種類のカラーパレットを上手に生成できるツールはまだ見つかっていません。私たちは、Tailwind のデフォルトカラーをすべて手作業で選び、目で見て慎重にバランスを取り、実際のデザインでテストして、満足のいくものにしました。
カラーパレットリファレンス
tailwind.config.jsファイルにtailwindcss/colorsをインポートしたときに利用できるすべての色のリストです。
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,
}
}
}
それぞれの色には固有の名前がついていますが、自分のプロジェクトでは好きなように別名をつけることができます。
Discussion