[TailwindCSS] TailwindCSS 유용한 속성

놀라운 점은 tailwind에만 있는 속성이 아니고 기존 css에도 있는 속성도 많다.

space-x-3

자식 컴포넌트의 좌우 margin을 알아서 계산해줘서 margin을 따로 생각할 필요가 없다.

css로 보면 이러한 구성이다.

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

---

ring

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

---

list (array.map) : 배열을 map으로 돌릴 때 사용할 수 있는 속성들이다.

1. first, last

first:bg-blue-50 last:bg-blue-50

 

2. only : onlychild일 때만 사용되는 only modifier

only:bg-red-500

기존 css에도 있는 속성이다.

 

3. odd, even : 홀수요소와 짝수요소

odd:bg-blue-50 even:bg-yellow-500

기존 css에도 있는 속성이다.

---

4. empty : 비어있는 element에 색상을 넣을 수 있다.

empty:bg-blue-500

기존 css에도 있는 속성이다.

display:none이랑 똑같기 때문에 대부분 hidden으로 숨겨준다.

---

group modifier

상위(부모) 상태를 기반으로 한 스타일 지정이다.

일부 부모 요소의 상태를 기반으로 요소의 스타일을 지정해야 하는 경우, 부모를 group 클래스로 표시하고 group-hover와 같은 group-* 수정자를 사용하여 대상 요소의 스타일을 지정한다.

이 패턴은 group-focus, group-active 또는 group-odd와 같은 모든 유사 클래스 수정자와 함께 작동한다.

마우스를 이 그룹 아무곳이라도 올리면 Tony Molloy 글씨 색상이 바뀌거나 avartar가 바뀌는 그런 효과이다.
예를들어 group위에 마우스가 올라가면, avartar의 스타일이 바뀐다.

 

무엇을 target하려는 group인지 말해주고 ->  그 element에 group 클라스네임 추가한다. 

<div className="group">
   <span>1</span>
   <span className="group-hover:text-bold">2</span>
   <span>3</span>
</div>

 

group으로 할 수 있는 것은 엄청 다양하다!

---

feer modifier

형제 상태를 기반으로 한 스타일 지정이다.

형제 요소의 상태를 기반으로 요소의 스타일을 지정해야 하는 경우 형제를 peer 클래스로 표시하고 peer-invalid와 같은 peer-* 수정자를 사용하여 대상 요소의 스타일을 지정한다.

이 패턴은 모든 유사 클래스 수정자(예: peer-focus, peer-required 및 peer-disabled)와 함께 작동한다.

 

예를 들어, input의 상태에 따라서 span의 스타일을 변화시킬 수 있다. react state가 필요없다! 

즉, input의 state에 따라서 css를 modify한다.

const Home: NextPage = () => {
  return (
     <form className="flex flex-col space-y-2  p-5 ">
      <input
        type="text"
        required
        placeholder="Username"
        className="border p-1 peer border-gray-400 rounded-md "
      />
      <span className="hidden peer-invalid:block peer-invalid:text-red-500">
        This input is invalid
      </span>
      <span className="hidden peer-valid:block peer-valid:text-teal-500">
        Awesome username
      </span>
      <span className="hidden peer-hover:block peer-hover:text-amber-500">
        Hello
      </span>
      <input type="submit" value="Login" className="bg-white" />
    </form>
  );
};