Tailwind CSSで色やブレークポイント、クラスを追加する

Tailwind CSSで、レスポンシブ用のブレイクポイントの追加や、色などのクラス名を追加する方法を調べたのでメモ。

環境

Tailwind CSS v3.2.4。

ブレイクポイントの追加

以下のリンクにデフォルトのブレイクポイントが記載されているが、最小で幅640pxになっているので、もっと小さい幅を指定したい。

tailwindcss.com

カスタマイズの方法はこちらに記載あり。

tailwindcss.com

tailwind.config.js を変更すればいいが、既存のブレイクポイントより大きいものを追加する場合と、小さいものを追加する場合で、設定方法が異なる。

大きいものを追加する場合、 theme.extends.screens を設定すればいい。

module.exports = {
  theme: {
    extends: {
      // デフォルトのブレイクポイントに、3xlが追加される
      screens: { '3xl': '1600px' },
    },
  },
}

小さいものを追加する場合、 theme.extends.screens に追加しても、追加したブレイクポイントがCSSとして出力されたときの宣言順が末尾になるのか、有効にならない。

theme.screens を設定するとデフォルトの上書きになるため、追加するブレイクポイントの後にデフォルトの値を展開するという、ややトリッキーな設定を行うことで、小さいブレイクポイントを追加できる。

module.exports = {
  theme: {
    // extends 不要
    screens: {
      xs: '420px',
      // デフォルトのブレイクポイントを展開
      ...require('tailwindcss/defaultTheme').screens,
    },
  },
}

色の追加

tailwindcss.com

CSSファイルでの設定方法などもあるが割愛。 tailwind.config.js の theme.colors で上書き、 theme.extends.colors で追加ができるので、今回は後者を使う。

色名: 'カラーコード' で単一の値、 色名: { キー: 'カラーコード'... } でネストしたオブジェクトのキーごとに値を設定できる。

ドキュメントに記載はないが、多重ネストも可能。ただ、v3.1.4あたりでは動かなかった気がするので、使わないほうが無難か。

設定した色名は、 bg-<色名> 、 text-<色名> のように使う。オブジェクトをネストした場合、 bg-<色名>-<ネストしたオブジェクトのキー> のように使用できる。また、オブジェクトのキーを DEFAULT にした場合、色名のみで使用可能となる。

module.exports = {
  theme: {
    extends: {
      colors: {
        disabled: '#ccc',
        primary: {
          DEFAULT: '#2563eb', // primary
          light: '#3b82f6', // primary-light
          dark: '#1d4ed8', // primary-dark

          // 多重ネストも一応動くが、
          // キーを 'primary-sub' にしても同じなので、
          // そっちを使ったほうが無難だと思う
          sub: {
            DEFAULT: '#bfdbfe', // primary-sub
            light: '#dbeafe', // primary-sub-light
            dark: '#93c5fd', // primary-sub-dark
          }
        },
      },
    },  
  },
}

<div className="bg-primary">...</div>
<div className="bg-disabled text-primary-light">...</div>

色指定時の注意点

デフォルトで宣言されている色名や、プリセット機能などで既存の色を拡張する場合、オブジェクトをネストした形式であれば元の設定とマージされるが、文字列形式だと上書きされる模様。

module.exports = {
  theme: {
    extends: {
      colors: {
        gray: '#ccc', // bg-gray-100 などが使えなくなる
        red: { DEFAULT: '#f00' }, // bg-red-100 なども有効
      },
    },  
  },
}

設定時にはオブジェクト形式を使っておくのが無難か。

その他のクラスの追加

色と同じ要領で、 theme.extends の下にオブジェクトで指定できる。

module.exports = {
  theme: {
    extends: {
      fontSize: { '2xs': '0.75rem' },
      width: { 15: '3.75rem' },
      height: { 15: '3.75rem' },
      boxShadow: {
        top: '0 -4px 2px rgba(0, 0, 0, 0.1)',
      },
    },  
  },
}

振り返り

実際の運用では、ベースとなる tailwind.config.js を複数プロジェクトからプリセットで使いまわしているので、色として primary や secondary を宣言しておくと、各プロジェクトでのカスタマイズがしやすいので便利。

また、デフォルトだと色が多いので、実際の運用ではUsing the default colorsやAliasing color namesの方法で、色名を絞ると使いやすい。

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: colors.transparent,
      current: colors.current,
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      red: colors.red,
      green: colors.green,
      blue: colors.blue,
    },
  },
}