Tailwind 반응형 디자인 커스터 마이징의 필요성

Tailwind 쓰면서 느낀것 중 하나가 문법이 익숙해지면 너무 깔끔하고 쉽게 스타일링이 가능다는 점과 사용자의 viewport 넓이에 따라 세세하게 경우의 수를 나눠서 디자인이 가능하다는 점이다. 즉 같은 기종(모바일, 태블릿, 데탑)이더라도 모니터 크기에 따라 보여지는 화면의 느낌이 다르다. 

 

즉 내 m1 화면(innerwidth 1600px? 1700px?) 과 듀얼모니터로 사용하고 있는 2200px? 정도 되는 모니터에서 보는 디자인은 다를 수 있다. 이렇게 본인 작업 환경이나 범용적인 태블릿과 모니터 사이의 크기 컨트롤, 혹은 모바일과 태블릿 사이의 세밀한 길이 컨트롤을 하려면 기본적으로 제공해주는 ls md sm xs 등으로 부족할 수도 있다. 

 

 

나는 ls와 md 사이의 값이 필요해서 lm이라는 값을 추가해주었다.

 

// tailwind.config.ts

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    screens: {
      sm: '576px',

      md: { min: '770px', max: '1100px' },

      lm: { min:'1001px', max:'1700px' },

      lg: { min: '1701px' },
    },
  },
  plugins: [],
};

 

물론 커스터마이징이기 때문에 키값도 마음대로 변경해줄 수 있지만 상단처럼 쓰는게 간편하고 짧으니 그대로 사용하도록 하자.

 

// tailwind.config.ts

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    screens: {
      cuty: '576px',

      pretty: { min: '770px', max: '1100px' },

      big: { min:'1001px', max:'1700px' },

      reallybig: { min: '1701px' },
    },
  },
  plugins: [],
};

 

* 물론 lg 와 md 정도의 값 간격으로도 충분하다고 생각하는 사람들이 많고 본인도 그렇게 생각하지만 시간적 여유갸 있거나 화면 디자인이 다른 어느 사항보다 중요한 서비스라면 다른 요소들의 디자인이 깨지거나 밀리지 않게 이렇게 설정하는 것도 필요하다고 생각한다. *