tailwind css modifier

 

 

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를 활용하여 조건부 스타일링을 쉽게 적용할 수 있게 해줍니다. 필요에 따라 다양한 상태와 조건에 맞춰 유연하게 스타일을 지정할 수 있습니다.