[tailwind CSS] 4. 반응/상태 선택자 추가 방법(hover, focus, checked, disabled, etc.)

tailwind에서 제공하는 반응/상태 선택자는 다음과 같다.

 

• Hover
• Focus
• Active
• Group-hover : 부모요소에 group 클래스 추가 후, 자식 요소에 선언
• Group-focus : 부모요소에 group 클래스 추가 후, 자식 요소에 선언
• Focus-within
• Focus-visible
• Motion-safe
• Motion-reduce
• Disabled
• Visited
• Checked
• First-child
• Last-child
• Odd-child
• Even-child

원하는 선택자가 없을 경우:

[tailwind CSS] 3. 커스텀 선택자(클래스) 추가 방법, Adding variants

각 선택자마다 제공하는 속성들이 정해져 있는데 원하는 속성이 없을 경우 역시 tailwind.config.js에서 추가 설정 가능하다.

예로, hover: 의 경우 다음의 속성들을 제공한다.

 

• backgroundColor
• backgroundOpacity
• borderColor
• borderOpacity
• boxShadow
• gradientColorStops
• opacity
• rotate
• scale
• skew
• textColor
• textDecoration
• textOpacity
• translate

만약, display 속성이 필요하다면, 아래와 같이 추가설정하면 된다.

module.exports = {
  variants: {
    extend: {
      display: ['hover'],
    }
  },
}

Hover, Focus, & Other States - Tailwind CSS