Tailwind CSS 반응형

Responsive Design (@media)

https://tailwindcss.com/docs/responsive-design

클래스명에 아래의 표에 있는 Breakpoint prefix를 붙이고 콜론(:) 후 적용할 클래스명을 작성하면 됩니다.

<!-- 기본은 width를 w-16으로 설정하고, 최소 넓이가 768px일 경우 w-32, 최소 넓이가 1024px일 경우엔 w-48 -->
<img class="w-16 md:w-32 lg:w-48" src="...">

 

Breakpoint prefix	Minimum width	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) { ... }

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <!-- 최소 넓이가 768px일 경우 display: flex; -->
  <div class="md:flex">
    <!-- 최소 넓이가 768px일 경우 flex-shrink: 0; -->
    <div class="md:shrink-0">
      <!-- 최소 넓이가 768px일 경우 height: 100%; width: 12rem; -->
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://tailwindcss.com/examples/responsive-design-demo" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-slate-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

 

Dark Mode

https://tailwindcss.com/docs/dark-mode

 

운영 체제와 어플리케이션(ex: 크롬, 웨일 등)에서 다크모드를 지원하므로 다크 버전을 디자인 하는 것이 보편화가 되고 있다.

이를 쉽게 하기 위해서 `dark`를 사용하여 다크모드가 활성화되어 있을 경우 스타일을 다르게 지정할 수 있습니다.

 

위와 마찬가지로 클래스를 작성할 때  dark:클래스명 과 같은 형태로 작성하면 됩니다.

Light mode

Writes Upside-Down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Dark mode

Writes Upside-Down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

<!-- 다크모드일 시 bg-slate-900 적용 -->
<div class="bg-white dark:bg-slate-900 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <!-- 다크모드일 시 text-white 적용 -->
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <!-- 다크모드일 시 text-slate-400 적용 -->
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>