[TIL]Tailwind 가벼운 사용법

Tailwind CSS

• css를 직접 작성하지않고, 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만드는 것이 Tailwind의 목표

장점

• 오직 HTML 문서만 보면 된다. 공식문서도 그렇게 만들어져 있다!
• 클래스 이름을 고민할 필요가 없고, 협업에 있어서도 문제가 없다!
• 유지보수에 용이하다!

사용법

• 사용법은 Tailwind CSS에서 미리 선언된 클래스들을 가져와 추가해준다.
• 주로 사용되는 클래스 이름들을 외워야하는 불편함은 있지만 익숙해지면 높은 생산성을 기대할 수 있다.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

• 클래스들의 종류는 워낙 많아서 전부 다룰 수는 없고 간단히만 알아보자
• 좀더 자세히 알아보고 싶다면 공식 사이트를 참고하자
  https://tailwindcss.com/docs/installation

<div class="space-y-8">  // space-y-8:자식요소들을 Y축으로 8*0.25em 씩 간격을 설정
  <div class="w-96 h-10"> // w-96 : 너비 96*0.25em 만큼, h-10 : 높이 10*0.25em 만큼 설정
    content
  </div>
</div>

<div class="bg-white shadow rounded"> // bg-white : 배경색을 white로 변경 
    content							  // shadow   : Tailwind 기본 box-shadow적용
</div>								  // rounded  : 0.25em 만큼 모서리 둥글게

• flex / grid

// flex: display flex로 지정, m-3 : 마진 상하좌우 3*0.25em
<div class="flex border-4 border-red-300 m-3"> 
  <div class="p-2 border-4 border-blue-500">1 hello</div> // p-2 : padding 2*0.25em 지정
  <div class="p-2 border-4 border-blue-500">1 hello</div> // border-4 : 4px만큼 테두리 굵기 지정
  <div class="p-2 border-4 border-blue-500">1 hello</div> // border-blue:테두리색 지정
  <div class="p-2 border-4 border-blue-500">1 hello</div>
</div>

• class="flex-col" : flex-direction을 column 방향으로 지정

• class="flex-wrap" : flex item 들이 container의 넓이를 초과할 시 줄바꿈

• class="gap-숫자" : 자식요소에 gap부여 단위는 0.25em

• class="w-3/4" : 현재 아이템 요소의 넓이를 부모요소의 3/4로 지정

• class="justify-center" : justify-content: center 를 축약해서 적용

• class="items-center" : items-items : center 를 축약해서 적용

• 주어진 값 이외에 사용하고싶으면 arbitrary value[]를 사용해야한다. 단위 사용해야함

	<div class="w-[30px]" ></div> // 넓이를 30px로 지정

접근성과 모바일 고려

• class="md:" : 해상도에 따라 sm: ,md: ,lg: ,xl: ,2xl: 옵션을 제공함

<img class="w-16 md:w-32 lg:w-48" src="..."> // 768픽셀 보다 작으면 w-32 적용

사소한 TIP

• 마이너스 값 을 주려면 클래스명 앞에 - 를 붙인다. 예) -m-3
• 대부분의 속성 값의 단위 1은 0.25em을 뜻한다. 물론 예외도 있다. border의 넓이는 픽셀이다.
• Tailwind에서 지원하는 값을 지정해도 없는 값이 존재한다. 예)h-14는 있지만 h-15는 없다.
  중간 중간에 지정할 수 있는 값들이 비워져 있다.