728x90
728x90

※ <head> 내에 viewport 메타 태그가 포함되어 있는지 확인

<meta name="viewport" content="width=device-width, initial-scale=1.0">

미디어 쿼리 적용하기

<!-- {중단점}:{대상클래스} -->
<img class="w-16 md:w-32 lg:w-48" src="...">
중단점 접두사 최소 너비 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) { ... }

 

# 특정 범위를 설정해서 적용하기

<!-- md부터 xl까지의 너비일 때만 적용 -->
<div class="md:max-xl:flex">
  ...
</div>
Modifier CSS
max-sm @media not all and (min-width: 640px) { ... }
max-md @media not all and (min-width: 768px) { ... }
max-lg @media not all and (min-width: 1024px) { ... }
max-xl @media not all and (min-width: 1280px) { ... }
max-2xl @media not all and (min-width: 1536px) { ... }

 

 

# 중단점 정의하기

  - 기존 중단점을 재정의하거나, 새로운 중단점을 생성해서 사용할 수 있음

  - tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

# 임의의 값으로 일회성 중단점 사용하기

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  ...
</div>
320x100
반응형
저작자표시 비영리 변경금지 (새창열림)

'Tailwind CSS' 카테고리의 다른 글

[TailwindCSS] 자주 쓰이는 유틸리티 클래스 모음  (2) 2024.11.04
[TailwindCSS] 사용자 정의 스타일  (0) 2024.11.02
[TailwindCSS] 가상 클래스와 가상 요소를 활용하여 스타일 적용하기  (9) 2024.11.01

티스토리툴바