ブレイクポイント

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


Basic customization

プロジェクトのブレークポイントは、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) { ... }
    }
  }
}

画面の数は好きなだけ作成でき、またプロジェクトには好きな名前を付けてください。 たとえば、サイズの代わりにデバイス名を使用できます。

// 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 }
}

Max-width breakpoints

min-widthではなくmax-widthブレークポイントを使用する場合は、maxキーを使用して画面をオブジェクトとして指定できます。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      '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-widthmax-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'},
    },
  }
}

Multi-range breakpoints

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

たとえば、サイドバーがあり、ブレークポイントをビューポート全体ではなくコンテンツ領域の幅に基づいて設定するとします。 サイドバーが表示されてコンテンツ領域が縮小されたときに、ブレークポイントの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',
    }
  }
}

Custom media queries

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

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

Styling for print

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>

Dark mode

rawオプションは、ダークモード画面を実装するためにも使用できます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'dark': {'raw': '(prefers-color-scheme: dark)'},
        // => @media (prefers-color-scheme: dark) { ... }
      }
    }
  }
}

次に、dark:プレフィックスを使用してダークモードで要素のスタイルを変えることができます。

<div class="text-gray-700 dark:text-gray-200">
  <!-- ... -->
</div>

これらの画面バリアントがTailwindでどのように実装されているかにより、このアプローチを使用してブレークポイントをダークモードと組み合わせることができないことに注意してください。 たとえば、md:dark:text-gray-300は機能しません。これは、将来のリリースで公式のダークモードサポートで対処したいと考えています。


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

Tailwind UI is now in early access!