TIL
tailwind css modifier
너구리개발자
2024. 6. 26. 02:05
Tailwind CSS는 유틸리티 클래스들을 제공하여 빠르고 쉽게 스타일을 적용할 수 있게 해줍니다. 이 유틸리티 클래스들 중에서 Modifier 클래스들은 특정 조건이나 상태에 따라 스타일을 적용하는 데 사용됩니다. 다음은 Tailwind CSS의 대표적인 Modifier 클래스들과 그 기능들입니다
Tailwind CSS는 유틸리티 클래스들을 제공하여 빠르고 쉽게 스타일을 적용할 수 있게 해줍니다. 이 유틸리티 클래스들 중에서 Modifier 클래스들은 특정 조건이나 상태에 따라 스타일을 적용하는 데 사용됩니다. 다음은 Tailwind CSS의 대표적인 Modifier 클래스들과 그 기능들입니다:
1. Pseudo-Class Modifiers
이 클래스들은 특정 상태일 때 스타일을 적용합니다.
- hover: 요소에 마우스를 올렸을 때 스타일을 적용합니다.
<button class="bg-blue-500 hover:bg-blue-700">Hover me</button>
- focus: 요소가 포커스되었을 때 스타일을 적용합니다.
<input class="focus:outline-none focus:ring-2 focus:ring-blue-600">
- active: 요소가 활성화(클릭 등)되었을 때 스타일을 적용합니다.
<button class="bg-blue-500 active:bg-blue-800">Click me</button>
- visited: 방문한 링크에 스타일을 적용합니다.
<a href="..." class="visited:text-purple-600">Visit me</a>
- disabled: 비활성화된 요소에 스타일을 적용합니다.
<button class="bg-gray-500 disabled:opacity-50" disabled>Disabled</button>2. Group Modifiers
이 클래스들은 자식 요소가 특정 상태일 때 스타일을 적용합니다.
- group-hover: 부모 요소에 마우스를 올렸을 때 자식 요소에 스타일을 적용합니다.
<div class="group"> <button class="group-hover:bg-blue-500">Hover parent</button> </div>
- group-focus: 부모 요소가 포커스되었을 때 자식 요소에 스타일을 적용합니다.
<div class="group"> <input class="group-focus:ring-2 group-focus:ring-blue-600"> </div>
3. Responsive Modifiers
이 클래스들은 반응형 디자인을 위해 특정 화면 크기일 때 스타일을 적용합니다.
- sm: 작은 화면에서 스타일을 적용합니다.
<div class="bg-blue-500 sm:bg-red-500">Resize the window</div>- md: 중간 크기 화면에서 스타일을 적용합니다.
- lg: 큰 화면에서 스타일을 적용합니다.
- xl: 매우 큰 화면에서 스타일을 적용합니다.
4. Dark Mode Modifiers
이 클래스들은 다크 모드일 때 스타일을 적용합니다.
- dark: 다크 모드에서 스타일을 적용합니다.
<div class="bg-white dark:bg-black">Dark mode</div>5. State Modifiers
이 클래스들은 요소의 상태에 따라 스타일을 적용합니다.
- first: 첫 번째 자식 요소에 스타일을 적용합니다.
<div> <p class="first:text-red-500">First item</p> <p>Second item</p> </div>- last: 마지막 자식 요소에 스타일을 적용합니다.
- odd: 홀수 번째 자식 요소에 스타일을 적용합니다.
- even: 짝수 번째 자식 요소에 스타일을 적용합니다.
이러한 Modifier 클래스들은 Tailwind CSS를 활용하여 조건부 스타일링을 쉽게 적용할 수 있게 해줍니다. 필요에 따라 다양한 상태와 조건에 맞춰 유연하게 스타일을 지정할 수 있습니다.