Tailwind CSS ホームページ
  1. カスタマイズ
  2. 画面のカスタマイズ

カスタム画面の設定

プロジェクトのブレークポイントは、tailwind.config.jsファイルのtheme.screensセクションで定義します。キーはレスポンシブ修飾子（md:text-centerなど）になり、値はそのブレークポイントが開始されるmin-widthになります。

デフォルトのブレークポイントは、一般的なデバイスの解像度に基づいて設定されています。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
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) { ... }
    }
  }
}

必要なだけ多くの画面を設定し、プロジェクトに合わせて好きなように名前を付けてください。

デフォルトのオーバーライド

デフォルトのブレークポイントを完全に置き換えるには、カスタムのscreens設定をthemeキーの下に直接追加します。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

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

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

オーバーライドしていないデフォルトの画面（上記の例ではxlなど）は削除され、画面修飾子として使用できなくなります。

単一画面のオーバーライド

単一の画面サイズ（lgなど）をオーバーライドするには、カスタムのscreens値をtheme.extendキーの下に追加します。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}

これにより、ブレークポイントの順序を変更せずに、同じ名前のデフォルトのscreens値が置き換えられます。

より大きなブレークポイントの追加

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

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  plugins: [],
}

これにより、カスタム画面がデフォルトのブレークポイントリストの最後に追加されます。

より小さなブレークポイントの追加

追加の小さなブレークポイントを追加する場合、extendを使用することはできません。小さなブレークポイントがブレークポイントリストの最後に追加され、ブレークポイントは最小幅ブレークポイントシステムで期待どおりに機能するために、小さい順から大きい順にソートされている必要があるためです。

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

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

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

デフォルトテーマはtailwindcss/defaultThemeで公開されており、デフォルトのブレークポイントのリストを自分で管理する必要はありません。

カスタム画面名の使用

カスタム画面には好きな名前を付けることができ、Tailwindがデフォルトで使用するsm/md/lg/xl/2xlの規則に従う必要はありません。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

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

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

レスポンシブ修飾子はこれらのカスタム画面名を反映するため、HTMLで使用すると次のようになります。

<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>

詳細設定

デフォルトでは、ブレークポイントはモバイルファーストのワークフローを推奨するために、最小幅になっています。メディアクエリをより詳細に制御する必要がある場合は、明示的な最小幅と最大幅の値を指定できるオブジェクト構文を使用して定義することもできます。

最大幅ブレークポイント

最小幅ブレークポイントではなく、最大幅ブレークポイントを使用したい場合は、maxキーを持つオブジェクトとして画面を指定できます。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
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とmax-widthの両方を指定したい場合は、minキーとmaxキーを一緒に使用します。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

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

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

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

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

通常の最小幅または最大幅ブレークポイントとは異なり、この方法で定義されたブレークポイントは、ビューポートのサイズが定義された範囲内にある場合にのみ有効になります。

<div class="md:text-center">
  This text will be centered on medium screens, but revert back
  to the default (left-aligned) at all other screen sizes.
</div>

複数範囲ブレークポイント

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

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

tailwind.config.js
/** @type {import('tailwindcss').Config} */
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
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}

rawキーを使用して定義されたメディアクエリはそのまま出力され、minキーとmaxキーは無視されます。