9. Tailwind CSS 주요 클래스 내용과 문법(layout)

Layout 관련

Container

container 클래스는 현재 breakpoint 의 최소 너비와 일치하도록 요소의 최대 너비를 설정하는 클래스입니다.

Breakpoint 에 따른 최대 너비

Breakpoint (min-width)	기존 css 속성
None	width: 100%;
sm (640px)	max-width: 640px;
lg (1024px)	max-width: 1024px;

가운데 정렬 컨테이너

Tailwind의 컨테이너는 자동으로 중앙에 위치하지 않습니다.

mx-auto : margin-left: auto; margin-right: auto;

<!-- mx-auto | margin-left: auto; margin-right: auto; -->
<div class="container mx-auto">  <!-- ... -->  </div>

Columns

요소 내의 콘텐츠를 구분 하는 열 수를 설정

tailwind 문법 및 실제 css 예시

tailwind 클래스	기존 css 속성
columns-1	columns: 1;

사용예시

<div class="columns-3 ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

이상적인 열 배치 및 개수 조정

columns-xs 및 columns-sm과 같은 유틸리티를 사용하면 요소 내 콘텐츠에 대한 이상적인 열 너비를 설정하고 열 수(개수)는 해당 값에 맞게 자동으로 조정됩니다

<div class="columns-3xs ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

열 사이 너비 지정

열 사이의 너비를 지정하려면 gap-x 유틸리티를 사용할 수 있습니다.

<div class="gap-8 columns-3 ..."> <!-- ... --> </div>

Break After

break-after-* 유틸리티를 사용하면 요소 다음에 열이나 페이지 나누는 것을 제어할 수 있습니다. 예를 들어, break-after-column 유틸리티를 사용해 요소 뒤에서 열을 강제로 나눌 수 있습니다.

<div class="columns-3">
  <!-- 첫번째 열에 현재 요소만 배치된 이후 나머지 요소는 다른 열에 모두 배치됨 -->
  <p class="break-after-column">Well, let me tell you something, ...</p>
  <p>Sure, go ahead, laugh...</p>
  <p>Maybe we can live without...</p>
  <p>Look. If you think this is...</p>
</div>

Break Before

Break After 와 유사하게 요소 이전에 열이나 페이지 나누는 것을 제어할 수 있습니다

<div class="columns-3">
  <p>Well, let me tell you something, ...</p>
  <!-- 첫번째 열에 현재 요소 이전 요소만 배치된 이후 나머지 요소는 다른 열에 모두 배치됨 -->
  <p class="break-before-column">Sure, go ahead, laugh...</p>
  <p>Maybe we can live without...</p>
  <p>Look. If you think this is...</p>
</div>

Break Inside

Break After 와 유사하게 현재 요소 안에서 열이나 페이지 나누는 것을 제어할 수 있습니다.

<div class="columns-2">
  <p>Well, let me tell you something, ...</p>
  <p class="break-inside-avoid-column">Sure, go ahead, laugh...</p>
  <p>Maybe we can live without...</p>
  <p>Look. If you think this is...</p>
</div>

Box Sizing

box-border

기존 css box-sizing: border-box; 속성과 같이 높이나 너비를 지정할 때 요소의 테두리와 패딩을 포함하는 유틸리티 클래스입니다.

box-content

기존 css box-sizing: content-box; 속성과 같이 높이나 너비를 지정할 때 요소의 테두리와 패딩을 포함하지 않는 유틸리티 클래스 입니다.

Display

기존 css 문법에서 display: 부분만 제외하여 속성만 사용해 클래스로 사용할 수 있습니다.

tailwind 문법 및 실제 css 예시

tailwind 클래스	기존 css 속성
inline-block	display: inline-block
flex	display: flex

예시

<div class="flex ...">
  <div class="flex-1 ...">01</div>
  <div class="contents">
    <div class="flex-1 ...">02</div>
    <div class="flex-1 ...">03</div>
  </div>
  <div class="flex-1 ...">04</div>
</div>

추가적인 내용

Inline Flex : 인라인 레벨로 사용하는 flex 컨테이너

Grid Flex : 인라인 레벨로 사용하는 grid 컨테이너

Contents : 상위 항목의 직계 하위 항목처럼 작동하는 가상컨테이너

Position

기존 css 문법에서 position: 부분만 제외하여 속성만 사용해 클래스로 사용할 수 있습니다.

예시

tailwind 클래스	기존 css 속성
fixed	position: fixed
absolute	position: absolute;

Object Fit

기존 css 문법에서 -fit 부분만 제외하고 속성을 - 로 연결해 클래스로 사용할 수 있습니다

tailwind 문법 및 실제 css 예시

tailwind 클래스	기존 css 속성
object-contain	object-fit: contain;
object-cover	object-fit: cover;

Visibility

기존 css 문법에서 visibility: 부분만 제외하여 속성만 사용해 클래스로 사용할 수 있습니다.

예시

tailwind 클래스	기존 css 속성
visible	visibility: visible
invisible	visibility: hidden

Z-Index

기존 css 문법에서 -index 부분만 제외해 클래스로 사용할 수 있습니다

예시

기존 css 속성	tailwind 클래스
z-index: 0	z-0

---

참고

https://tailwindcss.com/docs