[FE] tailwind 에서 mediaquery 사용하기 (feat. 내마음에 쏘옥 드는 navigation bar 만들기)

navbar (navigation bar)을 만들면서, 약간의 난관에 봉착했다.

내가 원하는 네비게이션 바의 조건 (은근 간단하지만 구현하는데 하루종일 걸렸다.)

💡

1. 화면 크기가 줄어들면 hamburger icon이 나오고, menu들은 세로형으로 나온다. 2. menu를 누르면 다시 햄버거 아이콘으로 돌아간다. 3. 스크롤을 내리면 네비게이션 바가 사라진다. 4. 살짝만 스크롤을 올리면 네비게이션바가 상단에 다시 나온다.

tailwind는 mobile-first 를 지향해서 min-width만 제공하고 max-width는 따로 제공하지 않는다.

즉, md:w-2 같은 코드는 클래스에 바로 넣으면 돼서 편하지만, 나처럼 큰화면에서 반대로 작아질 때 media query를 default로 제공하지 않는다. max:sm같은 속성도 있는데, 이건 @media not all and (min-width: 640px) { ... } 에 해당해서 내가 원하던 것과는 조금 달랐다.

이 문제를 해결하기 위해서 tailwind.config.cjs 를 다음과 같이 수정한다.

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    screens: {
      ml: { max: "720px" },
      ...defaultTheme.screens,
    },
    extend: {
...

screens 부분에 내가 사용할 이름과 max 속성을 적으면 @media (max-width: 720px) { ... }

과 똑같이 사용할 수 있다.

responsive design 공식문서

customize screen 공식문서

Uploaded by N2T