tailwind에서 자식에 css 적용하기

상위 div를 감싸서 해결하는 법도 있겠지만

결국 div가 많아지다보면 react의 reconcillation 과정에서 느려질 수 밖에 없음

컴포넌트의 수와 복잡성은 이전 가상 DOM과 새로운 가상 DOM을 비교하는 과정에서 당연히 연관이 있을 수 밖에.

tailwind는 아래처럼 @layer components에서 자식 태그에 스타일을 적용할 수 있다.


// global.css | scss

@layer components {
  .text-field > p {
    @apply absolute;
  }
}

1. `[&_p]`: 현재 요소의 모든 자손 요소에 적용

[&_p]는 선택한 부모 요소 내에서 모든 자손의 <p> 태그에 스타일을 적용합니다. 즉, 중첩된 요소들까지도 해당 스타일이 모두 적용됩니다.

💡

클래스나 아이디가 들어가도 상관없음. &: 현재 선택된 부모 요소를 나타냄


<div class="[&_p]:mt-4">
  <p>Lorem ipsum...</p> <!-- 이 요소에 mt-4 적용 -->
  <ul>
    <li>
      <p>Lorem ipsum...</p> <!-- 이 중첩된 요소에도 mt-4 적용 -->
    </li>
    <!-- ... -->
  </ul>
</div>

2. `[&>li]`: 현재 요소의 바로 아래 자식 요소에만 적용

[&>li]는 선택한 부모 요소의 바로 아래 자식 요소인 <li> 태그에만 스타일을 적용합니다. 중첩된 자손 요소에는 적용되지 않습니다.

예제:


<ul role="list" class="[&>li]:p-4">
  <li>Item 1</li> <!-- 이 요소에만 p-4 적용 -->
  <li>Item 2</li> <!-- 이 요소에만 p-4 적용 -->
  <li>
    <ul>
      <li>Nested item</li> <!-- 이 중첩된 요소에는 p-4가 적용되지 않음 -->
    </ul>
  </li>
</ul>

3. `&>*`: 현재 요소의 모든 바로 아래 자식 요소에 적용

[&>*]는 선택한 부모 요소의 모든 바로 아래 자식 요소에 스타일을 적용합니다. 즉, 특정 태그에 한정되지 않고, 부모 요소의 모든 자식 요소에 동일한 스타일을 적용할 때 사용합니다.

예제:



<ul role="list" class="[&>*]:p-4">
  <li>Item 1</li> <!-- 모든 자식 요소에 p-4 적용 -->
  <li>Item 2</li>
  <li>
    <ul>
      <li>Nested item</li> <!-- 이 중첩된 요소에는 p-4가 적용되지 않음 -->
    </ul>
  </li>
</ul>

정리:

[&_p]: 모든 자손 요소 중 <p> 태그에 스타일 적용 (중첩된 요소까지 포함)

[&>li]: 바로 아래 자식 <li> 요소에만 스타일 적용 (중첩된 요소는 제외)

[&>*]: 모든 바로 아래 자식 요소에 스타일 적용 (태그에 상관없이 적용)

형제, 부모 선택자

형제 선택자 (peer)

선택하고픈 형제에 peer 추가후

효과를 적용하고 싶은 요소에 peer-hover:visible ⇒ peer-(이벤트):tialwind class 형식으로 지정해주면된다.


<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/> // 형제 요소에 peer 지정
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm"> // class 적용
      Please provide a valid email address.
    </p>
  </label>
</form>

Handling Hover, Focus, and Other States - Tailwind CSS

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

https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

Handling Hover, Focus, and Other States - Tailwind CSS

부모 선택자 (group)

마찬가지로 부모요소에 group 지정후

group-... 형식으로 지정해주면됨.

중첩된 그룹 구분

그룹을 중첩할 때 클래스 를 사용하여 부모 그룹에 고유한 그룹 이름을 지정하고 , 다음과 같은 클래스를 사용하여 수정자에 해당 이름을 포함함으로써 특정 부모 그룹 의 상태에 따라 스타일을 지정할 수 있습니다 .group/{name}group-hover/{name}


<a href="#" class="group"> 
  <p class="group-hover:text-white">Create a new project.</p>
</a>

Handling Hover, Focus, and Other States - Tailwind CSS

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

https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

수정자 (has-{modifier})

has-* 수정자를 사용하여 하위 요소의 상태 또는 콘텐츠에 따라 요소의 스타일을 지정합니다. has-*유사 클래스와 함께 사용하면 has-[:focus]하위 요소의 상태에 따라 요소를 스타일링할 수 있습니다. has-[img] has-[a]하위 요소의 내용에 따라 요소를 스타일링할 수도 있습니다.


<label class="has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 ..">
  <svg fill="currentColor">
    <!-- ... -->
  </svg>
  Google Pay
  <input type="radio" class="checked:border-indigo-500 ..." />
</label>

tailwind에서 자식에 css 적용하기

1. [&_p]: 현재 요소의 모든 자손 요소에 적용

2. [&>li]: 현재 요소의 바로 아래 자식 요소에만 적용

예제:

3. &>*: 현재 요소의 모든 바로 아래 자식 요소에 적용

예제:

정리: