tailwind에서 pseudo 머시기 쓰기2023. 6. 18.
| css | tailwind(modifier) |
|---|---|
:first-child | first: |
:first-of-type | first-of-type: |
:only-child | only: |
:nth-child(odd) | odd: |
:after | after: |
group, peer
추가로 지원하고 있는 기능이 있는데,
group
parent의 상태를 child가 쓸 수 있도록 함.
예)
<a href="#" class="group">
<!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
<div class="flex items-center space-x-3">
<svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
</div>
</a><a href="#" class="group">
<!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
<div class="flex items-center space-x-3">
<svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
</div>
</a>peer
자신의 상태를 sibling이 쓸 수 있도록 함.
<form>
<label class="block">
<input type="email" class="peer ..."/>
<!-- ^^^^ 여기서 선언하면 -->
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
<!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
Please provide a valid email address.
</p>
</label>
</form><form>
<label class="block">
<input type="email" class="peer ..."/>
<!-- ^^^^ 여기서 선언하면 -->
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
<!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
Please provide a valid email address.
</p>
</label>
</form>주의) peer-{modifier}는 peer의 prev 가 아니라 next sibling이 쓸 수 있음