tailwindcss

이제 깔았으니
사용법을 알아보자
기본은 클래스네임에 축약어를 적어주면 된다.
축약어에 무엇이 있는지 알아보도록하자.

컨테이너
없음 width: 100%; container mx-auto 가운데 정렬이됨
sm (640px)= max-width: 640px;
md (768px)= max-width: 768px;
lg (1024px)= max-width: 1024px;
xl (1280px)= max-width: 1280px;
2xl (1536px)= max-width: 1536px;

hover:columns-3
호버의 경우는 이렇게쓴다.

gap-8 columns-3
열의 갯수를 정하고 그사이의 간격을 정해준다.

box-border
2px 테두리와 4px 패딩 이 있는 100px × 100px 요소 는 내부 콘텐츠 영역이 88px × 88px인 100px × 100px로 렌더링됩니다 .

flex블록 수준 플렉스 컨테이너를 만드는 데 사용 합니다.
inline-flex텍스트와 함께 흐르는 인라인 플렉스 컨테이너를 만드는 데 사용 합니다

테이블 만들기

<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Song</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Year</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
      <div class="table-cell ...">Malcolm Lockyer</div>
      <div class="table-cell ...">1961</div>
    </div>
    <div class="table-row">
          <div class="table-cell ...">Witchy Woman</div>
          <div class="table-cell ...">The Eagles</div>
          <div class="table-cell ...">1972</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Shining Star</div>
      <div class="table-cell ...">Earth, Wind, and Fire</div>
      <div class="table-cell ...">1975</div>
    </div>
  </div>
</div>

visible hover:invisible
hidden = 요소의 display: none

오버플로우
overflow-auto
overflow-x-auto
overflow-y-auto

static - position: static; 모든 오프셋 무시
fixed - position: fixed; 고정하기
absolute -position: absolute;
relative -position: relative;
sticky -position: sticky; =지정된 임계값을 넘을 때까지 요소의 위치를 relative​​지정한 다음 상위 요소가 화면을 벗어날 때까지 고정된 것으로 처리하는 데 사용합니다 .

Z-색인 설정
z-{index}

flex

flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

flex-wrap플렉스 항목이 래핑되도록 허용하는 데 사용
flex-nowrap필요한 경우 유연하지 않은 항목이 컨테이너를 오버플로하도록 하여 플렉스 항목이 래핑되는 것을 방지하는 데 사용 합니다.
grid

p-0 padding: 0px;
m-0 margin: 0px; mx my mt mr mb ml

space-x-0 > + margin-left: 0px;
space-y-0 > + margin-top: 0px;

w-px width: 1px;
flex
w-1/2 w-1/2, w-full

min-w-0 min-width: 0px;
min-w-max min-width: max-content;
max-w-0 max-width: 0rem; / 0px

max-w-sm max-width: 24rem; / 384px /
max-w-md max-width: 28rem; / 448px /

h-px height: 1px;
h-4 height: 1rem; / 16px /

min-h-screen min-height: 100vh;
min-h-full min-height: 100%;
min-h-0 min-height: 0px

max-h-px max-height: 1px;
max-h-full max-height: 100%;
max-h-screen max-height: 100vh;

font-bold font-weight: 700
text-center text-align: center
text-justify

text-blue-600/100 마지막 불투명도 조절
line-through

uppercase text-transform: uppercase;
lowercase text-transform: lowercase;
capitalize text-transform: capitalize;
normal-case text-transform: none

bg-fixed background-attachment: fixed; 이거 좋다
bg-local background-attachment: local;
bg-scroll background-attachment: scroll;

bg-auto background-size: auto;
bg-cover background-size: cover; 자주 쓰일듯
bg-contain background-size: contain;

outline-4 outline-width: 4px; 기본 3px이다

transition duration-300 ease-in-out