Tailwind CSS のカラーパレットを拡張する方法

 2021/06/07
Tailwind CSS のカラーパレットを拡張する方法

はじめに

どーも、入田 / ぐるたか @guru_taka です!
Tailwind CSS には、デフォルトで濃薄含む様々な色が登録されていますが、実際にはデフォルトに存在しない色を使用したいケースも多々あるはずです
そこで、今回は Tailwind CSS のカラーパレットを拡張する方法を紹介します。
参考:Customizing Colors - Tailwind CSS

バージョン情報

  • tailwindcss:2.1.1
  • postcss:8.2.8
  • autoprefixer:10.2.5

カラーパレットを拡張するための設定ファイル

Tailwind CSS にカラーパレットを拡張する時は、Tailwind CSS の設定ファイル tailwind.config.js に記述します。
具体的なコードは以下の通りです。
// tailwind.config.js module.exports = { // 追加 theme: { extend: { colors: { // 'カラー名': 'カラーコード' 'dark-green': '#06bbbc', }, }, }, };
上記のように theme > extend > colors に、'カラー名': 'カラーコード' を記述しましょう。

拡張したカラーパレットを使用する方法

拡張したカラーパレットは、text-カラー名(例:text-dark-green)や bg-カラー名(例:bg-dark-green)のように記述することで、使用できます。

ネストしてカラー名をカスタマイズすることも可能

ここまで、カラー名とカラーコードが 1 対 1 で登録されていましたが、ネストしてカラー名を拡張することも可能です。
コードは以下のようになります。
// tailwind.config.js module.exports = { theme: { extend: { colors: { // 例 primary: { light: '#59d3d4', DEFAULT: '#06bbbc', dark: '#008c8d', }, }, }, }, };
使用例は以下の通りです。
  • text-primary
  • text-primary-light
  • text-primary-dark
このように DEFAULTprimary 単体でのカラーを意味します。

【注意】カラーパレットを上書きすることも可能

カラーパレットを拡張するのではなく、上書きすることも可能です。以下のように theme > colors に、'カラー名': 'カラーコード' を記述しましょう。
// tailwind.config.js module.exports = { // 追加 theme: { colors: { // 'カラー名': 'カラーコード' 'primary-green': '#06bbbc', }, }, };
この場合、デフォルトのカラーパレットが上書きされてしまい、text-white などのデフォルト色が使えなくなります。ご注意ください。

最後に

以上になります。カラーパレットを拡張することで、Tailwind CSS による開発効率が上がります。参考になれば幸いです!
ここまでご覧いただき、ありがとうございました!

株式会社キカガク コンテンツマーケティング責任者
入田 / ぐるたか
twitter: @guru_taka

参考文献

\ 次期受講生募集中 /

経営から技術まですべての力を手に入れたいあなたへ

【次期受講生募集】経営から技術まで仲間と一緒にすべての力を手に入れたいあなたへ

『起業家精神 × 学び方改革』が起こす行動の劇的な変化!
キカガク創業者の吉崎が考える新しい起業家育成の環境。
スキルばかり磨いて変わらない現実を変えていきましょう!