tailwind 학습해보기

프로젝트에서 tailwind를 사용하기 위하여 학습을 미리 해보자!!
구현하며 사용하며 학습도 되겟지만 미리 학습하여 쉽게가보장

tailwind 사용이유

• 클래스명을 사용하지 않고 선택자에 대한 결정 없이 사용 가능하며 HTML과 CSS 파일을 전환하는 데 시간을 들이지 않아도 되어서 디자인이 매우 빠르게 완성이 가능하다.
• 요소에 유틸리티 클래스를 추가하거나 제거해도 해당 요소에만 영향을 미치므로 동일한 CSS를 사용하는 다른 페이지에서 실수로 요소를 손상시키는 것에 대해 걱정할 필요가 없어 변경 사항을 적용하는 것이 더 안전하다.
• HTML 코드만 보면 CSS 동작을 알 수 있어 오래된 프로젝트를 유지 관리하는 것이 더 쉽다.
• 구조와 스타일이 같은 장소에 있으므로 전체 UI 청크를 쉽게 복사하여 붙여넣을 수 있으며 서로 다른 프로젝트 간에도 가능하다.
• 이러한 혜택은 소규모 프로젝트에서는 큰 차이를 만들어내지만, 대규모 장기 프로젝트를 진행하는 팀에게는 훨씬 더 가치가 있다.

hover,focus,active 사용

hover:bg-dark-100
focus:bg-dark-300
active:bg-dark-300

이런식으로 사용함.

invalid

HTML의 required, pattern, type 등이 충족되지 않을 때 (유효성 검사 실패 시) 스타일이 적용된다.

invalid:border-pink-500
invalid:text-pink-600

has

상태나 내용을 기반으로 요소의 스타일을 지정할 수 있다.

has-checked:bg-indigo-50 has-checked:text-indigo-900

그룹의 후손을 기반으로 한 스타일링

<div class="group ...">
  <img src="..." />
  <h4>Spencer Sharp</h4>
  <svg class="hidden group-has-[a]:block ..."><!-- ... --></svg>
  <p>Product Designer at <a href="...">planeteria.tech</a></p>
</div>

부모요소 안에 a태그가 있으면 svg파일을 보여줘라 라는 코드이다. 조건부 렌더링 없이 CSS로만 상태를 표현하고 싶을 때 사용된다.

형제 요소의 자손을 기준으로 스타일링

<div>
  <label class="peer ...">
    <input type="checkbox" name="todo[1]" checked />
    Create a to do list
  </label>
  <svg class="peer-has-checked:hidden ..."><!-- ... --></svg>
</div>

형제 요소의 자손을 기준으로 요소의 스타일을 지정해야 하는 경우, 형제 요소를 peer클래스로 표시하고 변형을 사용하여 peer-has-*대상 요소의 스타일을 지정할 수 있다. 여기서는 형제 요소인 input의 checked일 경우svg파일을 숨기도록함.

부모 상태를 기반으로 한 스타일링

<a href="#" class="group ...">
  <div>
    <svg class="stroke-sky-500 group-hover:stroke-white ..." fill="none" viewBox="0 0 24 24">
      <!-- ... -->
    </svg>
    <h3 class="text-gray-900 group-hover:text-white ...">New project</h3>
  </div>
  <p class="text-gray-500 group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
</a>

부모 요소인 a가 hover되면 group-hover를 가진 요소의 상태를 hover시 변경하게함.