Tailwindcssのレスポンシブで「min-width」から「max-width」へと変える方法

最近僕が一押ししているTailwindcss

これ本当に素晴らしいです。

圧倒的にCSSの記述量が減りました。

Tailwindcssをご存じでない方は僕が書いた記事で良ければご覧ください。

・もう生のCSSを書くのはやめようぜ。。。TailwindcssでCSS記述時間を圧倒的に減らす方法

いつも通りTailwindcssでCSSを記述していたところ思わぬ壁にぶち当たりました。

// 省略
module.exports = {
  theme: {
    screens: {
      sm: '560px',
      md: '768px',
      tb: '960px'
    },
  },
}
// 省略

このようにscreensプロパティを定義し、いざレスポンシブ対応させようとすると、Tailwindcssは標準では@media and (min-width: ***) {}となり、min-widthの設定になっています。

僕は最初にデスクトップ画面用のレイアウトを行い、その後かタブレット、スマホ画面へのレスポンシブ対応を行うのでmax-widthの方がやりやすいんですよね。

とまぁ安定のネットサーフィンを行っていると、公式ドキュメントに書いてありました。

結論から言うと、下記のように設定してあげればmax-widthでのブレイクポイントに設定される。

// 省略
module.exports = {
  theme: {
    screens: {
      sm: {'max': '560px'},
      md: {'max': '768px'},
      tb: {'max': '960px'}
    },
  },
}
// 省略

後はクラス指定でレスポンシブ対応を行えば完璧。

<!-- 480px未満でflex-wrapが適用される -->
<div class="sm:flex-wrap"></div>

以上、「Tailwindcssのレスポンシブで「min-width」から「max-width」へと変える方法」でした！

Thank you for reading