TIL 230418 tailwind 잡다한 거

🎆 오늘 한 것

• 노마드 캐럿마켓 tailwind 학습

✨ tailwind

🎇 ring

<button className="w-5 h-5 rounded-full bg-yellow-500 focus:ring-2 ring-offset-2 ring-yellow-500 transition" />

박스쉐도우를 이용해서 링을 만들어주는 기능이다. 매우 편리!

🎇 Styling based on parent state (group-{modifier})

부모 요소에 hover했을 때 자식 요소에 효과를 주고 싶을 때의 해결 방법

부모 요소에 group 태그를 넣고 자식 요소에 group-hover:stroke-white 이런 식으로 작성해주면 됨

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

🚀 그룹 내부에 또 다른 그룹으로 어쩌고 하고 싶다면?

<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <img src="{person.imageUrl}" alt="" />
      <div>
        <a href="{person.url}">{person.name}</a>
        <p>{person.title}</p>
      </div>
      <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ...">
          <!-- ... -->
        </svg>
      </a>
    </li>
  {/each}
</ul>

위 코드처럼 group/item group-hover/item:visible / group/edit group-hover/edit:translate-x-0.5 이런 식으로 슬래시 뒤에 이름을 붙여주면 됨

🎇 Styling based on sibling state (peer-{modifier})

요소에 효과를 주면 다른 형제 요소에 효과를 주고 싶을 때는

요소에 peer 클래스를 넣고 타겟 요소에 peer-invalid 같은 modifier를 넣어주면 됨

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