css - Tailwind CSS - コンポーネントとしてのレスポンシブ ブレークポイント

Question

Tailwind でレスポンシブ ブレークポイントをコンポーネントとして扱うにはどうすればよいですか?

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

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

それで：

@include tablet-portrait {
  // whatever
}

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

Tailwind 構成ファイルから Tailwind ブレークポイントを抽出するにはどうすればよいですか?

Answer 1

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

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

と同じくらい簡単

@screen md {
  // whatever
}

Answer 2

tailwind.config.js で

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  
  theme: {
    screens: {
      // adding xs to the rest
      xs: "475px",
      // if you did not add this, you would have only "xs"
      ...defaultTheme.screens,
    },
  },
  
};