tailwindcssの独自ユーティリティで、レスポンシブ対応する方法

tailwindcssでは、既存のユーティリティに独自のユーティリティを追加可能である。
しかし、ただ追加しただけだとtailwindcssのレスポンシブに対応できない。
このため、本記事ではレスポンシブ対応を行う方法を記載する。

独自ユーティリティを追加する方法

tailwindcssを使うには、以下の通り、インポートする必要があります。

@tailwind base;
@tailwind components;
@tailwind utilities;

これでtailwindcssを使用する準備ができました。
この状態で独自ユーティリティを使用するためには以下のようにします。

今回は、column-countを設定するユーティリティを書きます。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .column-1 {
    column-count: 1;
  }
  .column-2 {
    column-count: 2;
  }
}

これで、column-1,column2を使用することが出来ます。
しかし、tailwindcssではレスポンシブ対応をmd,sm等を用いて、簡単に出来ますが、このままでは追加した独自ユーティリティにはレスポンシブ対応できません。

これを可能にするために以下の通り記述します。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @responsive {
    .column-1 {
      column-count: 1;
    }

    .column-2 {
      column-count: 2;
    }
    .column-3 {
      column-count: 3;
    }
  }
}

ポイントは@responsiveで囲むことです。
これを行うことで、md,sm等のレスポンシブが可能となります。