Open5日前にコメント追加3

スタイル組むのに困ったものを書いていくところ

CSS

Tailwind CSS

style

かいと

 レスポンシブにスタイルするtailwindcssに用意されているbreakpointは以下の５つです


Breakpoint prefix
Minimum width
CSS


sm
640px
@media (min-width: 640px) { ... }

md
768px
@media (min-width: 768px) { ... }

lg
1024px
@media (min-width: 1024px) { ... }

xl
1280px
@media (min-width: 1280px) { ... }

2xl
1536px
@media (min-width: 1536px) { ... }

参照：https://tailwindcss.com/docs/responsive-design
間違えがちですが、指定したときは、 「〇〇以上」のときのスタイルを指定する形です。
<p className="text-xl sm:text-3xl">
  これはサンプルテキストです
</p>
たとえば上記の場合、sm(640px)以下のとき、text-xlが適応され、

sm(640px)以上のとき、text-3xlが適応されます

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

かいと

メディアクエリのbreakpointを増やしたい

もっと細かく設定したいときはtailwind.config.tsに書き加えましょう
以下のように、`theme.screens.hogehogeの部分に追加すると指定できる項目が増えます


const config: Omit<Config, 'content'> = {
  theme: {
    screens: {
      'xs': '250px',
      ...defaultTheme.screens,
    },
  },
  ...
}

export default config

かいと

 メディアクエリを使ったサイドナビとメインコンテンツgridを使ってメインコンテンツとサイドナビを作っている。

ただし、レスポンシブで実装したいので、スマホのときはサイドナビがあると邪魔で仕方がない。
wip