カスタマイジングカラー

プロジェクトのデフォルトのカラーパレットをカスタマイズします


Overview

tailwind.config.jsファイルのtheme.colorsセクションでは、Tailwindのdefault color paletteをオーバーライドできます。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: '#5c6ac4',
      blue: '#007ace',
      red: '#de3618',
    }
  }
}

デフォルトでは、これらの色はtextColor,borderColorおよびbackgroundColorユーティリティによって自動的に共有されます。 したがって、上記の構成では、.text-indigo,.border-blueおよび.bg-redのようなクラスが生成されます。

Nested object syntax

上記で行ったように、キーと値のペアの単純なリストとして色を定義するか、ネストされたキーが修飾子としてベースカラー名に追加されるネストされたオブジェクト表記を使用できます。

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

Tailwindの他の多くの場所と同様に、defaultキーは特別で「修飾子なし」を意味します。 したがって、この構成では.text-indigo-lighter, .text-indigoおよび .text-indigo-darkのようなクラスが生成されます。

theme()関数を使用する場合は、ネストされた色にアクセスするためにドット表記を使用する必要があることに注意してください。 色は実際のCSSクラス名のダッシュケースにのみ変換されます。 theme()関数:theme('colors.indigo.default')を介してアクセスする場合は、defaultキーも指定する必要があります。

theme()でネストされた色の値にアクセスするためにダッシュ構文を使用しないでください

.btn-blue {
  background-color: theme('colors.blue-500');
}

ドット表記を使用して、theme()でネストされた色の値にアクセスします

.btn-blue {
  background-color: theme('colors.blue.500');
}

Overriding the default color palette

theme documentationで説明されているように、デフォルトのカラーパレットを上書きしたい場合は、tailwind.config.jsファイルのtheme.colorsセクションを使用して上書きできます。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: '#5c6ac4',
      blue: '#007ace',
      red: '#de3618',
    }
  }
}

これにより、Tailwindのデフォルトのカラーパレットが無効になり、代わりにbg-indigo,text-blue,border-redなどのクラスが生成されます。


Extending the default palette

theme documentationで説明されているように、デフォルトのカラーパレットを拡張したい場合は、tailwind.config.jsファイルのtheme.extend.colorsセクションを使用して拡張できます。

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

これにより、Tailwindのすべてのデフォルトの色に加えて、bg-regal-blueのようなクラスが生成されます。


Overriding a default color

Tailwindのデフォルト色の1つを上書きして残りを保持したい場合は、tailwind.config.jsファイルのtheme.extend.colorsセクションに新しい値を指定するだけです。

たとえば、ここでは、デフォルトのクールグレーをニュートラルグレーパレットに置き換えました。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          '100': '#f5f5f5',
          '200': '#eeeeee',
          '300': '#e0e0e0',
          '400': '#bdbdbd',
          '500': '#9e9e9e',
          '600': '#757575',
          '700': '#616161',
          '800': '#424242',
          '900': '#212121',
        }
      }
    }
  }
}

Overriding or adding a single shade

設定ファイルのtheme.extendセクションの値は浅くマージされるだけなので、単一のシェードをオーバーライドまたは追加することは少し複雑です。

最も簡単なオプションは、デフォルトのテーマをインポートし、新しいシェード値とともにカスタマイズする色で広げることです。

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

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          ...colors.blue,
          '900': '#1e3656',
        }
      }
    }
  }
}

Disabling a default color

プロジェクトで使用していないためにデフォルトの色を無効にしたい場合、最も簡単な方法は、デフォルトのテーマを参照する新しいカラーパレットを作成することです。

たとえば、このtailwind.config.jsファイルはティール、オレンジ、ピンクを除外しますが、残りのデフォルトの色を含みます。

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

module.exports = {
  theme: {
    colors: {
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      red: colors.red,
      yellow: colors.yellow,
      green: colors.green,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.purple,
    }
  }
}

destructuringに慣れている場合はこれを使用して、上記の例を単純化することもできます。

// tailwind.config.js
const { colors: { teal, orange, pink, ...colors } } = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    colors: colors
  }
}

Naming your colors

Tailwindは、デフォルトで、文字通りの色名(red, greenなど)と数値スケール(100は明るい、900は暗い)を使用します。

これはほとんどのプロジェクトでかなり実用的ですが、他の命名規則を使用するのには十分な理由があります。

たとえば、複数のテーマをサポートする必要があるプロジェクトで作業している場合は、primarysecondaryなどのより抽象的な名前を使用するのが理にかなっている場合があります。

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

上記のようにこれらの色を明示的に構成することも、Tailwindのデフォルトの色を取得して、必要な色にエイリアスを設定することもできます。

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

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;

Generating custom color palettes

よくある質問は、「自分のカスタムカラーの100〜900の色合いを生成するにはどうすればよいですか?」です。

残念ながら、色は複雑で、この種のカラーパレットを生成するのに適したツールはまだ見つかっていません。 ですので、Tailwindのデフォルトの色をすべて手作業で選び、目でバランスを取りました。


Default color palette

Tailwindには、プロトタイピングや新しいプロジェクトの開始に最適な、見栄えがよくバランスの取れた色の豊富なパレットが含まれています。

Black & White

Black
#000000
White
#FFFFFF

Gray

100
#F7FAFC
200
#EDF2F7
300
#E2E8F0
400
#CBD5E0
500
#A0AEC0
600
#718096
700
#4A5568
800
#2D3748
900
#1A202C

Red

100
#FFF5F5
200
#FED7D7
300
#FEB2B2
400
#FC8181
500
#F56565
600
#E53E3E
700
#C53030
800
#9B2C2C
900
#742A2A

Orange

100
#FFFAF0
200
#FEEBC8
300
#FBD38D
400
#F6AD55
500
#ED8936
600
#DD6B20
700
#C05621
800
#9C4221
900
#7B341E

Yellow

100
#FFFFF0
200
#FEFCBF
300
#FAF089
400
#F6E05E
500
#ECC94B
600
#D69E2E
700
#B7791F
800
#975A16
900
#744210

Green

100
#F0FFF4
200
#C6F6D5
300
#9AE6B4
400
#68D391
500
#48BB78
600
#38A169
700
#2F855A
800
#276749
900
#22543D

Teal

100
#E6FFFA
200
#B2F5EA
300
#81E6D9
400
#4FD1C5
500
#38B2AC
600
#319795
700
#2C7A7B
800
#285E61
900
#234E52

Blue

100
#EBF8FF
200
#BEE3F8
300
#90CDF4
400
#63B3ED
500
#4299E1
600
#3182CE
700
#2B6CB0
800
#2C5282
900
#2A4365

Indigo

100
#EBF4FF
200
#C3DAFE
300
#A3BFFA
400
#7F9CF5
500
#667EEA
600
#5A67D8
700
#4C51BF
800
#434190
900
#3C366B

Purple

100
#FAF5FF
200
#E9D8FD
300
#D6BCFA
400
#B794F4
500
#9F7AEA
600
#805AD5
700
#6B46C1
800
#553C9A
900
#44337A

Pink

100
#FFF5F7
200
#FED7E2
300
#FBB6CE
400
#F687B3
500
#ED64A6
600
#D53F8C
700
#B83280
800
#97266D
900
#702459

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!