- カスタマイズ
- 色のカスタマイズ
カスタマイズ
色のカスタマイズ
プロジェクトのデフォルトカラーパレットをカスタマイズします。
デフォルトカラーパレット
Tailwindには、独自のブランドイメージがない場合に最適な出発点となる、専門的に作成されたデフォルトカラーパレットがすぐに使用できるように含まれています。
ただし、パレットをカスタマイズする必要がある場合は、tailwind.config.jsファイルのthemeセクションのcolorsキーの下で色を設定できます。
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// Configure your color palette here
}
}
}カスタムカラーパレットを構築する場合、正確に目的が決まっている場合は、最初から独自のカスタムカラーを設定することも、少しでも早く開始したい場合は、豊富な付属カラーパレットからカラーをキュレーションすることもできます。
デフォルトでは、これらの色は、テキストカラーユーティリティ、ボーダーカラーユーティリティ、背景色ユーティリティなど、フレームワーク内で色を使用するすべての場所で利用できるようになります。
<div class="bg-midnight text-tahiti">
<!-- ... -->
</div>プロジェクトで使用したい場合は、transparentやcurrentColorなどの値を含めることを忘れないでください。
カラーオブジェクトの構文
パレットに同じ色の複数のシェードが含まれている場合、ネストされたカラーオブジェクト構文を使用してそれらをグループ化すると便利です。
/** @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のようなクラス名が形成されます。
Tailwindの他の多くの場所と同様に、サフィックスなしで値を定義したい場合は、特別なDEFAULTキーを使用できます。
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// ...
'tahiti': {
light: '#67e8f9',
DEFAULT: '#06b6d4',
dark: '#0e7490',
},
// ...
},
},
}これにより、bg-tahiti、bg-tahiti-light、bg-tahiti-darkのようなクラスが作成されます。
任意の値
プロジェクトで1回限りのカスタムカラーが必要な場合は、Tailwindの任意の値表記を使用して、テーマに追加するのではなく、その色のクラスをオンデマンドで生成することを検討してください。
<button class="bg-[#1da1f2] text-white ...">
<svg><!-- ... --></svg>
Share on Twitter
</button>詳細については、任意の値の使用に関するドキュメントを参照してください。
色の生成
各色の50〜950のシェードをどのように自動的に生成したか疑問に思われるかもしれませんが、残念なお知らせです。色というのは複雑で、最高の結果を得るために、私たちはTailwindのデフォルトカラーをすべて手作業で選択し、目を細かく調整し、実際のデザインでテストして、満足できることを確認しました。
独自のカスタムカラーパレットを作成していて、手作業で行うことに自信がない場合は、UI Colorsが、カスタムカラーに基づいて優れた出発点を提供できる優れたツールです。
独自のパレットを構築するために推奨する他の2つの便利なツールは、PalettteとColorBoxです。これらは作業を肩代わりしてくれるわけではありませんが、インターフェイスはこのような作業を行うのに適した設計になっています。
デフォルトカラーの使用
プロジェクト用に完全にカスタムの色を考えていない場合は、設定ファイルでtailwindcss/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,
},
},
}これは、カラーパレットを意図的に制限し、IntelliSenseで提案されるクラス名の数を減らしたい場合に役立ちます。
色名のエイリアス
また、デフォルトパレットの色にエイリアスを設定して、名前をよりシンプルで覚えやすくすることもできます。
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,
},
},
}
これは特にグレーで一般的です。通常、任意のプロジェクトで使用するのは1セットのみで、たとえばbg-neutral-300の代わりにbg-gray-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を使用して既存の色にシェードを追加することもできます。
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
blue: {
950: '#17275c',
},
}
},
},
}デフォルトカラーの無効化
デフォルトカラーを無効にしたい場合、最適な方法は、デフォルトのカラーパレットをオーバーライドして、必要な色のみを含めることです。
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は、デフォルトで、リテラルカラー名（赤、緑など）と数値スケール（50が明るく、900が暗い）を使用します。これはほとんどのプロジェクトに最適な選択肢であり、primaryやdangerなどの抽象的な名前を使用するよりも保守が容易であることがわかりました。
とはいえ、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);
/* ... */
}
}
次に、設定ファイルで色を定義し、使用している色空間と、Tailwindが不透明度修飾子を使用するときにアルファ値を挿入するために使用する特別な<alpha-value>プレースホルダーを必ず含めてください。
/** @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>)',
}
}
}この方法で色を定義する場合は、使用している色関数に対してCSS変数の形式が正しいことを確認してください。最新のスペース区切り構文を使用する場合はスペースを、rgbaやhslaなどのレガシー関数を使用する場合はコンマを使用します。
@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;
}
}