[解決済み] Tailwind CSS - コンポーネントとしてのレスポンシブブレークポイント

質問

Tailwindのコンポーネントとして、レスポンシブブレークポイントをどのように扱えばよいですか？

Tailwindがなければ、私はブレークポイントをscss mixinsとして宣言していました。

@mixin tablet-portrait {
  @media (min-width: 700px) {
    @content;
  }
}

次に

@include tablet-portrait {
  // whatever
}

Tailwindにはレスポンシブ・ユーティリティ・クラスがあり、インラインで使用することができるのは知っていますが md:color-red しかし、私は上記の例のように、このブレイクポインをコンポーネントとして抽象化する必要があります。

Tailwindの設定ファイルからTailwindのブレークポイントをどのように抽出すればよいですか？

どのように解決するのですか？

この問題を解決する@screenディレクティブを見つけました。

https://tailwindcss.com/docs/functions-and-directives/#screen

と同じくらい簡単です。

@screen md {
  // whatever
}