[TIL] Tailwind CSS 기초 - 3 (gradient, invalid:, peer: )

오늘 공부한것 & 기억하고 싶은 내용

gradient:

Search .bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); }

.from-cyan-500 {
--tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-yellow-300 {
--tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #fde047 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-purple-400 {
--tw-gradient-to: #c084fc var(--tw-gradient-to-position);
}

#### gradient 간단하게 색상 구현
`bg-gradient-to-tr from-cyan-500 via-yellow-300 to-purple-400`
청록색으로 시작(from)해서 노란색을 거쳐(via) 보라색으로 끝나는(to) 버튼이다.
![](https://velog.velcdn.com/images/wow_da65/post/59388b18-0213-426b-a22d-2978b3b691d8/image.png)


### invalid:
- 브라우저가 유효하지 않다고 판단하는 입력값에 대해 동작함.
- invalid는 Tailwind의 속성이나 기능이 아니다. 이것은 hover, acive처럼 sudo class다.
- input값이 required일때 확인 가능함
- type="email"일 경우엔 @ 형태로 들어가지 않아도 유효하지 않다고 판단함(이건 브라우저의 기능)
- `invalid:focus:ring-red-500`: 입력값이 유효하지 않고, focus된 상태라면 뒤에 스타일을 적용하라.

> modifier는 두 개를 같이 써줘도 상관없다.

- `invalid:md:focus:ring-red-500` :  md화면 사이즈라면, 그리고 focus되어 있다면 뒤에 스타일을 적용하라.

### peer:
- 형제같은 개념

``` html
<input
          className="w-full rounded-full h-12 bg-gray-200 pl-5 outline-none ring ring-orange-300 ring-offset-2 ring-offset-transparent focus:ring-orange-500
          focus:ring-offset-2 transition-shadow placeholder:text-red-600 invalid:bg-red-100 invalid:focus:ring-blue-500
          invalid:md:focus:ring-red-500 peer"
          type="text"
          required
          placeholder="Search here ..."
        />
        <button className="bg-black text-white py-2 rounded-full active:scale-90 focus:scale-90 transition-transform font-medium outline-none md:px-10 peer-invalid:bg-red-100 peer-required:bg-green-500">
          Search
        </button>

//peer-invalid:bg-red-100
.peer:invalid ~ .peer-invalid\:bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)) /* #fee2e2 */;
}

//peer-required:bg-green-500
.peer:required ~ .peer-required\:bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)) /* #22c55e */;
}

• input에 peer를 넣어주고 형제인 button태그에 peer-invalid:bg-red-100를 넣어주면 input 입력값이 유효하지 않을때 버튼이 빨간색이 된다.

• peer-required:bg-green-500: peer가 required일때 콜론 뒤 스타일 추가하라!

• peer-visited, peer-odd, peer-even 등 확장프로그램을 통해서 더 알 수 있음

*:

• 상위 쪽에서 사용하며 모든 자식 객체에 적용시킬때 사용
• div 안에 input, span, button 등 갖고 있는 모든 자식 객체에게 스타일 적용시킴(*:outline-none)

has-[]:

• has-[.peer]:bg-green-100 : 자식 중에 peer라는 클래스이름을 갖고 있는 애가 있다면 나 자신은 초록색 배경으로 바뀔 것이다.
• css의 가상 클래스이다. ( 나도 굉장히 자주 쓰고 있는 기능임 )
• .peer 처럼 클래스명 뿐만 아니라 가상요소에도 적용시킬 수 있다. (:has-[:invalid]:~~)
• 앞에 md 등 화면 크기도 넣을 수 있음(md:has-[.peer]:~~)

배운점 & 느낀점

CSS도 대단하지만 그걸 구현한 테일윈드 칭찬해~
알면 알수록 너무 방대한 클래스들!!!!
has는 내가 참 좋아하는 가상 클래스(?)인데 여기서도 유용하게 쓰이는게 신기하다!
지피티랑 클로드한테 has에 대해 물어보니 이제는 안쓴다고 한다...... has 좋은데...
peer를 더 연구해봐야겠다.