[Next.js] Tailwind CSS 수식어, 진짜 쉽게 정리해봄!

서론

Tailwind CSS를 사용하다 보면 hover:bg-blue-500이나 md:flex 같은 클래스명을 자주 볼 수 있다. 이때 hover:나 md:처럼 콜론 앞에 붙는 부분을 바로 수식어(Prefix Modifier) 라고 부른다.

 

수식어는 말 그대로 어떤 조건이 있을 때만 스타일을 적용하겠다는 의미를 가진다. 예를 들어, 마우스를 버튼에 올렸을 때 색이 바뀐다거나, 화면 크기가 클 때만 특정 스타일이 적용되도록 설정할 수 있다.

 

이번 글에서는 이런 수식어들이 어떤 역할을 하는지, 어떤 상황에서 어떻게 쓰는지를 아주 쉽게 설명해보려고 한다. Tailwind를 처음 접하거나 수식어 개념이 헷갈렸다면, 이 글로 확실하게 정리할 수 있을 것이다!

 

 

 

반응형 수식어가 뭐야?

 

웹사이트는 다양한 기기에서 보여질 수 있기 때문에, 화면 크기에 따라 레이아웃이나 스타일을 다르게 설정하는 것이 중요하다. 이걸 "반응형 디자인"이라고 한다. Tailwind에서는 이 반응형을 간단하게 처리할 수 있도록 도와주는 수식어들이 있다.

 

예를 들어 md:bg-red-500이라는 클래스가 있다고 해보자. 이건 화면이 768px 이상일 때 배경색을 빨간색으로 바꿔줘! 라는 의미다. 즉, 작은 화면에서는 기본 스타일을 유지하고, 화면이 어느 정도 이상 커졌을 때만 스타일을 추가로 적용하는 방식이다.

 

 

자주 쓰이는 반응형 수식어들은 아래와 같다:

수식어	의미 (영어)	적용 조건
sm:	small	640px 이상일 때 적용
md:	medium	768px 이상일 때 적용
lg:	large	1024px 이상일 때 적용
xl:	extra large	1280px 이상일 때 적용
2xl:	2x extra large	1536px 이상일 때 적용

 

 

예를 하나 들어보면:

<div className="bg-yellow-300 md:bg-blue-300 lg:bg-green-300">
  화면 크기에 따라 배경색이 바뀜!
</div>

 

이 예제를 보면 화면이 작을 때는 노란색(bg-yellow-300), 화면이 중간 이상이면 파란색(md:bg-blue-300), 더 큰 화면이면 초록색(lg:bg-green-300) 배경으로 바뀐다.

 

즉, 한 줄의 코드만으로도 화면 크기에 따라 완전히 다른 느낌의 스타일을 줄 수 있는 것이다. 미디어 쿼리를 따로 작성하지 않아도 돼서 정말 편하다!

 

 

 

 

 

상태 수식어란?

 

이번엔 사용자의 행동에 따라 스타일이 바뀌는 경우를 보자. 예를 들어, 버튼에 마우스를 올리거나 클릭했을 때, 입력창을 선택했을 때처럼 상호작용에 따라 스타일이 달라지는 상황이 있다. 이런 경우 사용하는 것이 바로 상태 수식어다.

 

Tailwind에서는 이런 상호작용도 hover:나 focus: 같은 수식어를 붙이면 쉽게 처리할 수 있다.

 

대표적인 상태 수식어는 아래와 같다:

hover:	마우스를 올렸을 때	버튼 위에 마우스 올렸을 때 색 바꾸고 싶을 때 써
focus:	클릭했을 때	입력창 클릭했을 때 테두리 강조하는 경우
active:	누르고 있는 중	버튼을 클릭하는 순간 동안만 적용
disabled:	비활성화 상태	클릭 못하게 막힌 버튼일 때
group-hover:	부모에 hover 됐을 때	부모에 마우스를 올리면 자식에 효과 주기
peer-focus:	형제 요소에 포커스 있을 때	다른 요소에 포커스가 갔을 때 같이 반응
dark:	다크 모드일 때	시스템이나 사이트가 어두운 테마일 때만 적용

 

예를 들면:

<button className="bg-pink-500 hover:bg-pink-700 focus:ring-2">
  클릭해보세요!
</button>

 

이 코드는 기본 배경은 밝은 분홍색(bg-pink-500)이다. 하지만 마우스를 올리면 더 진한 분홍색(hover:bg-pink-700)으로 바뀌고, 클릭하면 focus:ring-2로 바깥쪽에 약간의 테두리 효과가 생긴다.

즉, 사용자 행동에 맞춰 버튼의 스타일이 자연스럽게 변하게 해주는 것이다.

 

 

 

 

 

수식어의 조합

 

Tailwind의 강력한 점 중 하나는 수식어를 여러 개 조합할 수 있다는 것이다. 즉, 특정 상황에서 여러 조건을 함께 걸어줄 수 있다.

<input
  className="border px-2 py-1 focus:outline-none md:w-1/2 dark:bg-gray-800"
/>

• 기본적으로는 테두리(border)가 있는 입력창이다.
• 포커스가 되면 focus:outline-none으로 외곽선이 사라진다.
• 화면 크기가 768px 이상이면 입력창 너비가 절반(md:w-1/2)로 설정된다.
• 다크 모드일 때는 배경색이 어두운 회색(dark:bg-gray-800)으로 바뀐다.

이처럼 다양한 상황에 따라 하나의 요소에 여러 스타일을 동시에 적용할 수 있어, 반복적인 CSS 코드 없이도 깔끔하게 UI를 만들 수 있다.

 

 

 

 

 

마무리 한 줄 요약

 

Tailwind CSS에서 수식어는 상황에 따라 스타일을 바꾸는 조건문 같은 역할을 한다.

• 화면 크기 기준: sm:, md:, lg: 등 반응형 스타일 적용
• 사용자 행동 기준: hover:, focus:, dark: 등 인터랙션 스타일 적용

이 개념만 잘 이해하고 나면 Tailwind를 훨씬 더 자유롭고 강력하게 사용할 수 있다. 꼭 필요한 핵심 기능이니, 여러 번 써보면서 익숙해지도록 하자!