Zenn
🎉

TailwindCSS　ブレイクポイントの追加

2023/05/15に公開
CSS
Tailwind CSS
tech

ブレイクポイントの追加

公式ドキュメントより参照。
tailwind cssは簡単にブレイクポイントを設定することができます。

tailwind.config.js
sm	640ピクセル	@media (min-width: 640px) { ... }
md	768ピクセル	@media (min-width: 768px) { ... }
lg	1024ピクセル	@media (min-width: 1024px) { ... }
xl	1280ピクセル	@media (min-width: 1280px) { ... }
2xl	1536ピクセル	@media (min-width: 1536px) { ... }

では、smよりも小さなブレイクポイントを設定したい時はどの様にすればいいのか?

tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
ここが重要
module.exports = {
  theme: {
    screens: {
      'xs': '375px',
      ...defaultTheme.screens,
    },
  },
  variants: {},
  plugins: [],
}

この様にするとsmよりも小さな、xsと言うブレイクポイントを設定することができます。

https://tailwindcss.com/

Discussion