【Tailwind和訳】CUSTOMIZATION/Breakpoints

この記事について

この記事は、CUSTOMIZATION/Breakpointsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Breakpoints

プロジェクトのデフォルトブレークポイントをカスタマイズする。

基本的なカスタマイズ

プロジェクトのブレイクポイントは、tailwind.config.jsファイルのtheme.screensセクションで定義します。キーはスクリーン名（md:text-centerのように、Tailwind が生成するレスポンシブ・ユーティリティー・バリエーションのプレフィックスとして使用されます）で、値はブレークポイントが開始されるべきmin-widthです。

デフォルトのブレイクポイントは、一般的なデバイスの解像度からヒントを得ています。

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

スクリーンの数は自由に設定でき、名前もプロジェクトに合わせて好きなように付けられます。

例えば、サイズの代わりにデバイス名を使うこともできます。

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

これらのスクリーンネームはユーティリティーに反映されますので、text-centerのユーティリティーは以下のようになります。

.text-center {
  text-align: center;
}

@media (min-width: 640px) {
  .tablet\:text-center {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .laptop\:text-center {
    text-align: center;
  }
}

@media (min-width: 1280px) {
  .desktop\:text-center {
    text-align: center;
  }
}

デフォルトのブレイクポイントを拡張する

より大きなブレイクポイントを追加する最も簡単な方法は、extendキーを使うことです。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  variants: {},
  plugins: [],
}

小さなブレークポイントを追加したい場合、extendを使用することはできません。なぜなら、小さなブレークポイントはブレークポイントリストの最後に追加されるからです。

代わりに、screensキー全体をオーバーライドして、デフォルトのブレイクポイントを再指定します。

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  variants: {},
  plugins: [],
}

Max-width breakpoints

min-widthではなくmax-widthのブレイクポイントで作業したい場合は、maxキーを持つオブジェクトとして画面を指定することができます。

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

      'xl': {'max': '1279px'},
      // => @media (max-width: 1279px) { ... }

      'lg': {'max': '1023px'},
      // => @media (max-width: 1023px) { ... }

      'md': {'max': '767px'},
      // => @media (max-width: 767px) { ... }

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
    }
  }
}

必ずmin-widthのブレイクポイントとは逆の順序でリストアップし、期待通りにお互いをオーバーライドするようにしてください。

例えば、必要に応じてmin-widthとmax-widthの両方を定義したブレイクポイントを作成することもできます。

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px', 'max': '1535px'},
      '2xl': {'min': '1536px'},
    },
  }
}

マルチレンジのブレークポイント

1 つのブレークポイント定義を複数の範囲に適用できると便利な場合があります。

例えば、サイドバーがあり、ブレイクポイントをビューポート全体ではなく、コンテンツエリアの幅に基づいて設定したいとします。サイドバーが表示されてコンテンツエリアが縮小したときに、ブレークポイントの 1 つが小さいブレークポイントにフォールバックすることで、これをシミュレートできます。

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

カスタムメディアクエリ

ブレークポイントに対して完全にカスタムなメディアクエリを提供する必要がある場合は、rawキーを持つオブジェクトを使って行うことができます。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      screens: {
        'portrait': {'raw': '(orientation: portrait)'},
        // => @media (orientation: portrait) { ... }
      }
    }
  }
}

プリント用のスタイリング

rawオプションは、印刷用に特別に異なるスタイルを適用する必要がある場合に特に便利です。

必要なのは、theme.extend.screensの下にprintスクリーンを追加することだけです。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media print { ... }
      }
    }
  }
}

そして、print:text-blackのようなクラスを使って、作業中のページを誰かが印刷しようとしたときにだけ適用されるスタイルを指定することができます。

<div class="text-gray-700 print:text-black">
  <!-- ... -->
</div>