【Tailwind和訳】FLEXBOX AND GRID/Order

この記事について

この記事は、FLEXBOX AND GRID/Orderの記事を和訳したものです。

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

Order

フレックスアイテムとグリッドアイテムの順序を制御するためのユーティリティ。

Class	Properties
order-1	order: 1;
order-2	order: 2;
order-3	order: 3;
order-4	order: 4;
order-5	order: 5;
order-6	order: 6;
order-7	order: 7;
order-8	order: 8;
order-9	order: 9;
order-10	order: 10;
order-11	order: 11;
order-12	order: 12;
order-first	order: -9999;
order-last	order: 9999;
order-none	order: 0;

使い方

フレックスやグリッドのアイテムを、DOM に表示される順序とは異なる順序でレンダリングするには、order-{order} を使用します。

<div class="flex justify-between ...">
  <div class="order-last">1</div>
  <div>2</div>
  <div>3</div>
</div>

レスポンシブ

特定のブレイクポイントでのみ roder ユーティリティーを適用するには、既存のクラス名に {screen}: というプレフィックスを追加します。例えば、md:order-last というクラスを要素に追加すると、medium スクリーンサイズ以上で order-last ユーティリティが適用されます。

<div class="flex">
  <div>1</div>
  <div class="order-first md:order-last">2</div>
  <div>3</div>
</div>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

デフォルトでは、Tailwind は order-first、order-last、order-none、そして 1 から 12 までの数字のための order-{number} ユーティリティーを提供します。これらを変更、追加、または削除するには、tailwind.config.js ファイルの theme.order セクションを編集します。

tailwind.config.js

  module.exports = {
    theme: {
      order: {
        first: '-9999',
        last: '9999',
-       none: '0',
+       normal: '0',
        '1': '1',
        '2': '2',
        '3': '3',
        '4': '4',
        '5': '5',
        '6': '6',
-       '7': '7',
-       '8': '8',
-       '9': '9',
-       '10': '10',
-       '11': '11',
-       '12': '12',
      }
    }
  }

バリアント

デフォルトでは、レスポンシブバリアントのみがオーダーユーティリティ用に生成されます。

tailwind.config.js ファイルの variants セクションにある order プロパティを変更することで、オーダーユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定では hover と focus のバリアントも生成されます。

無効化

プロジェクトでオーダーユーティリティーを使用しない場合は、設定ファイルの corePlugins セクションで order プロパティを false に設定することで、完全に無効にすることができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     order: false,
    }
  }