Next.js tailwind css での備忘録 (レスポンシブ)

Next.js tailwind css での備忘録をメモしていきたいと思います。

今まで、見様見真似でtailwind cssを使っていましたが、あらあためてレスポンシブの設定や、display flex の使い方を確認したので、自分の復習のためにもこちらにメモしていきたいと思います。
開発未経験者のため、訂正箇所などありましたら、ご指摘いただけますと幸いです!

/* display: flex; */
className="flex"

/* flex-direction: column; */
className="flex-col"

/* align-items: center; */
className="items-center"

/* justify-content: center; */
className="justify-center"

/* かんたんにレスポンシブを設定してくれる */
className="container"

/* containerの中身 */
.container {
    width: 100%;
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

また、上記の container を活用するためには

className="md:flex-row"

/* width 50% などを設定する際には */
className="md:w-1/2"

などとして設定するだけでかんたんにレスポンシブの変更を記述することができる。
最初はとっつきづらかったですが改めて tailwind の便利さを実感しました。

参考