[tailwind] max-width로 반응형 CSS 적용하기

max-width로 반응형 CSS

//tailwind.config.ts

module.exports = {
  theme: {
    screens: {
      'sm-max': { 'max': '639px' },  // 모바일 (최대 639px)
      'md-max': { 'max': '767px' },  // 작은 태블릿 (최대 767px)
      'lg-max': { 'max': '1023px' }, // 큰 태블릿 (최대 1023px)
      'xl-max': { 'max': '1279px' }, // 데스크탑 (최대 1279px)
      '2xl-max': { 'max': '1535px' } // 큰 데스크탑 (최대 1535px)
    },
  },

데스크탑 first로 개발했기 때문에, tailwind의 기본 반응형속성인 min-width보단 max-width로 작업해야하기에, 

이와 같이 속성을 정의해준다.

 

 

 

• sm (small): 640px 이상. 일반적으로 큰 스마트폰 또는 작은 태블릿 화면을 위한 스타일링에 사용됩니다.
• md (medium): 768px 이상. 태블릿과 같은 중간 크기의 디스플레이를 대상으로 합니다.
• lg (large): 1024px 이상. 작은 데스크톱 또는 큰 태블릿 화면을 위한 스타일링에 사용됩니다.
• xl (extra large): 1280px 이상. 데스크톱 디스플레이를 위한 스타일링에 주로 사용됩니다.
• 2xl (2x large): 1536px 이상. 큰 데스크톱 디스플레이를 위해 디자인된 스타일이 적용됩니다.

 

 

 

 

 

 

 

모바일, 태블릿 Test 

http://www.responsinator.com/

Responsinator