Using utilities to style elements on hover, focus, and more.

• Tailwind의 모든 utility class는 class name의 첫부분에 modifier를 추가함으로써 조건부로conditionally 스타일을 적용할 수 있다. modifier는 우리가 타겟하고 싶은 해당 조건condition을 묘사describe한다고 보면 된다.

  • 예를들어 ‘bg-sky-700’ 클래스를 hover시에 적용하고 싶다면, ‘hover:bg-sky-700’이라는 클래스를 사용하면 된다는 것이다. (예시에서 hover가 modifier이고, 콜론(:)과 함께 사용하면 된다)

• Tailwind는 우리가 필요한 모든 modifier를 포함하고 있다. 예를들면:

  • Pseudo-classes, like :hover, :focus, :first-child, and :required
  • Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection
  • Media and feature queries, like responsive breakpoints, dark mode, and prefers-reduced-motion
  • Attribute selectors, like [dir="rtl"] and [open]

• 이런 modifers들은 더 구체적인 상황을 특정하기 위해서 “stacked”될 수 있다. 예를들어서 다크 모드에서, medium breakpoint에서, 호버일때 background color에 대한 스타일을 적용하려면 다음과 같이 작성할 수 있다:

  <button class="**dark:md:hover:bg-fuchsia-600** ...">
    Save changes
  </button>
  

  • 여러 modifiers들을 콜론을 사용하여 계속 “쌓아서stack” 사용하는 모습이다.

• 이 가이드에서는 프레임워크에서 사용 가능한 모든 modifier에 대해 다룰 것이고, 우리의 custom class와 함께 사용하는 방법, 심지어는 우리만의 custom modifier를 만드는 방법까지 배워볼 것이다.

Pseudo-classes

주로 기존 CSS에서 ‘:hover’, ‘:focus’, ‘:first-child’, ‘required’ 같은 녀석들. 이런 애들은 하나하나 일일이 정리하기 보다는 한번 예시를 훑어보고, 나중에 필요할때 다시 문서 찾아보는 식으로 활용하면 될것 같다. 기존 CSS를 알고 있다면 크게 새로운 개념은 없고, 사용 방법도 어렵지 않아 보인다. 목록은 다음과 같다:

• Hover, focus, and active
• First, last, odd, and even
• Form states
  • ‘required’, ‘invalid’, ‘disabled’, ‘:read-only’ 등 포함

Styling based on parent state (group-{modifier})

Pseudo-elements