Using responsive utility variants to build adaptive user interfaces.

Overview

• Tailwind의 모든 utility class는 서로 다른 breakpoint에 따라 조건부로 적용될 수 있으며, 이를 이용하여 매우 쉽게 HTML만을 사용하여 복잡한 반응형 디자인 인터페이스를 개발할 수 있다.

• 일반적인 기기 해상도를 고려하여 5개의 default breakpoints들이 있다.

  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) { ... }

• 일종의 modifier라고 생각하고, 콜론(:)을 통해 prefix로 붙여서 사용하면 된다.

Example

• 이런식의 반응형 요소를 구현하려면 아래처럼 작성하면 된다.

  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="Modern building architecture">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Company retreats</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Incredible accommodation for your team</a>
        <p class="mt-2 text-slate-500">Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.</p>
      </div>
    </div>
  </div>
  

  • 이 경우에는 breakpoint가 md 하나로, md prefix를 통해 해당 화면 크기 이상일때 조건부로 (큰화면용) 스타일을 추가로 적용하고 있는 모습이다.
  • 아래 바로 나오겠지만, Tailwin는 mobile-first system이기 때문에 prefix가 없는 녀석들은 기본적으로 모바일 화면 크기일때부터 적용이 되고, prefix를 붙이면 해당 prefix 이상의 화면 크기에 적용이 된다.

Working mobile-first

• Tailwind는 default로 mobile-first breakpoint system을 사용한다. Bootstrap과 같은 다른 프레임워크들과 유사하다.
• 이것은 breakpoint prefix를 붙이지 않은 유틸리티 클래스의 경우, 기본적으로 모바일 화면(작은 화면)부터 스타일이 적용된다는 의미이다. 만약 prefix를 붙인다면, 예를들어 ’md:uppercase’ 같은 경우, 해당 md breakpoint부터 더 큰 화면 크기일 경우에만 스타일이 적용되게 된다는 것이다.

Targeting mobile screens

• 앞서 말한것처럼, 모바일 화면을 타겟하려면 그냥 unprefixed version of utility를 사용해야 한다. 즉 sm 같은 breakpoint를 붙이는 것이 아니라, 아예 prefix없이 작성하면 된다는 것이다.
• 따라서, 일반적으로 모바일 레이아웃 디자인을 먼저 구현하고 나서, 더 큰 화면에 맞는 디자인을 하나씩(e.g. ‘sm’, ‘md’) layer를 쌓는 방식으로 스타일을 적용하는 것이 좋다.

Example

• 잘못된 예

  <!-- This will only center text on screens 640px and wider, not on small screens -->
  <div class="sm:text-center"></div>
  

• 올바른 예

  <!-- This will center text on mobile, and left align it on screens 640px and wider -->
  <div class="text-center sm:text-left"></div>
  

Targeting a breakpoint range