Tailwind CSS 속성 강좌

 

이 글에서는 Tailwind CSS에서 자주 사용하는 클래스들을 소개하고, 각 클래스에 대한 사용법과 예제를 제공합니다.

 

코딩 샘플은 Tailwind Play에서 실험할 수 있으며, 공식 문서 링크도 함께 제공하니 참고하시기 바랍니다.

1. 사이즈 관련 클래스

1.1 가로 폭

• 클래스: w-{number}
• 예: w-full (가로 폭 100%)

w-{number}는 기본적으로 number에 4를 곱한 픽셀 수로 설정됩니다. 예를 들어, w-8은 32px입니다.

<div class="w-8 bg-white">32px</div>
<div class="w-full bg-white">100%</div>

 

div 태그는 기본적으로 가로 폭이 100%이므로 따로 지정하지 않아도 같은 결과를 얻을 수 있습니다.

 

자세한 내용은 공식 문서에서 확인하세요.

Width - Tailwind CSS

 

1.2 가로 폭의 최대값

• 클래스: max-w-{size}

{size} 부분에는 기본적으로 sm, lg 등의 값이 제공됩니다.

 

실무에서는 max-w-[60px]와 같이 원하는 값을 직접 작성하기도 합니다.

<div class="max-w-xs bg-white">Text</div>

자세한 내용은 공식 문서에서 확인하세요.

 

Max-Width - Tailwind CSS

 

1.3 세로 폭

• 클래스: h-screen (화면 높이 전체)

기본적으로 가로 폭의 세로 버전이라고 생각하시면 되지만, 개인적으로는 세로 폭을 지정하는 경우는 거의 없습니다.

 

대부분 요소의 세로 폭은 그 안의 콘텐츠 양에 따라 가변적으로 설정하고 싶기 때문입니다.

 

다만, h-screen은 예외적으로 사용합니다. 예를 들어, 사이트의 첫 화면에서 전체 화면에 무언가를 표시할 때 사용합니다.

<div class="h-screen">Text</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Height - Tailwind CSS

 

---

2. 레이아웃 관련 클래스

2.1 포지션

• 클래스: absolute (절대 위치)

absolute로 지정된 요소의 위치는 top-{size}(상단의 위치)나 left-{size}(좌측의 위치) 등으로 지정합니다.

<div class="absolute bottom-4 right-4">Text</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Position - Tailwind CSS

 

2.2 Flexbox (가로 배열 등)

• 클래스: flex
• 정렬: justify-center (가로 방향 중앙 정렬), items-center (세로 방향 중앙 정렬)
• 간격: gap-{size} (요소 간격)

요소를 가로로 나란히 배치하고 싶을 때는 대부분 flex를 사용합니다.

 

flex, justify-{xxx}, items-{xxx}, gap-{size}는 자주 함께 사용됩니다.

<div class="flex justify-center items-center gap-4">
  <div class="bg-white">Left</div>
  <div class="bg-white">Right</div>
</div>

 

flex-col 클래스를 추가하면 가로 배열이 아닌 세로 배열이 되며, 이때 justify-{xxx}는 세로 방향, items-{xxx}는 가로 방향 정렬을 지정하게 됩니다.

 

자세한 내용은 공식 문서에서 확인하세요.

Flex Direction - Tailwind CSS

 

2.3 그리드 레이아웃

• 클래스: grid
• 열 수: grid-cols-{n}
• 간격: gap-{size} (요소 간격)

그리드 레이아웃은 인스타그램 이미지 목록과 같이 요소가 그리드(격자) 형식으로 배치되는 레이아웃을 나타냅니다.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-white">1</div>
  <div class="bg-white">2</div>
  <div class="bg-white">3</div>
  <div class="bg-white">4</div>
  <div class="bg-white">5</div>
</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Grid Template Columns - Tailwind CSS

 

2.4 세로 가로비(비율) 고정

• 클래스: aspect-square (정사각형), aspect-video (16:9)

이러한 클래스를 사용하면 요소의 가로 세로 비율을 유지할 수 있습니다.

<div class="aspect-square w-12 bg-white">Text</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Aspect Ratio - Tailwind CSS

 

---

3. 여백 관련 클래스

3.1 마진

• 클래스: m-{size}

마진은 요소의 바깥쪽 여백을 의미합니다. 한 방향에만 여백을 줄 경우는 mt-{size} (Margin Top: 위쪽만) 등을 사용합니다.

 

가로 방향만 여백을 줄 경우는 mx-{size}, 세로 방향만 줄 경우는 my-{size}로 작성할 수 있습니다.

<div class="mt-8">Text</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Margin - Tailwind CSS

 

3.2 패딩

• 클래스: p-{size}

패딩은 요소의 안쪽 여백을 의미합니다.

 

마진과 마찬가지로 pt-{size}, px-{size}, py-{size}와 같은 형식으로 사용할 수 있습니다.

<div class="bg-white px-8 py-4">Text</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Padding - Tailwind CSS

 

3.3 자식 요소 간 간격

• 클래스: space-y-{amount} (세로 방향)

자식 요소 간의 간격을 지정할 때 사용합니다.

<div class="space-y-4">
  <div class="bg-white">1</div>
  <div class="bg-white">2</div>
  <div class="bg-white">3</div>
</div>

 

자식 요소에 직접 마진을 주는 것도 가능하지만, 요소가 늘어날 때마다 마진을 주는 것은 코드 양이 증가하고 실수를 유발할 수 있으므로 space-y-{amount}를 사용하는 것이 좋습니다.

 

자세한 내용은 공식 문서에서 확인하세요.

Space Between - Tailwind CSS

 

---

4. 텍스트 관련 클래스

4.1 글자 크기

• 클래스: text-sm (14px), text-base (16px), text-lg (18px)

이외에도 text-xs, text-xl 등 다양한 클래스가 제공됩니다.

<div class="text-xs">작은 글자</div>
<div class="text-lg">큰 글자</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Font Size - Tailwind CSS

 

4.2 글자 색상

• 클래스: text-white (흰색), text-black (검은색), text-{color} (예: text-red-500)

색상은 기본적으로 제공되며, 각 색상에 대해 농도가 정의되어 있습니다.

<div class="text-blue-300">Blue 300</div>
<div class="text-blue-700">Blue 700</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Text Color - Tailwind CSS

 

4.3 글자 정렬

• 클래스: text-left (왼쪽 정렬), text-center (가운데 정렬), text-right (오른쪽 정렬)

<div class="text-right">오른쪽 정렬</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Text Align - Tailwind CSS

 

4.4 글자 두께

• 클래스: font-bold (굵은 글자, 웨이트 700)

<div class="font-bold">Text</div>

 

text-bold가 아니라 font-bold로 작성해야 하므로 주의가 필요합니다.

 

자세한 내용은 공식 문서에서 확인하세요.

Font Weight - Tailwind CSS

 

---

5. 선 및 모서리 관련 클래스

5.1 테두리

• 클래스: border
• 선의 위치: border-{side} (위치 지정)
• 선의 색상: border-{color}

border (또는 border-{side})와 border-{color}는 함께 사용됩니다.

 

한쪽 면에만 테두리를 추가하고 싶을 경우, border 대신 border-{side}를 사용합니다.

• border-t (위쪽만, t = top)
• border-b (아래쪽만, b = bottom)
• border-l (왼쪽만, l = left)
• border-r (오른쪽만, r = right)

<div class="border border-blue-400">Text</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Border Color - Tailwind CSS

 

5.2 모서리 둥글기

• 클래스: rounded, rounded-full

rounded-full을 사용하면 양쪽 끝을 반원으로 만들 수 있습니다.

 

정사각형 요소에 rounded-full을 적용하면 원을 만들 수 있어 사용자 아이콘 등을 표시할 때 자주 사용됩니다.

<div class="rounded-full bg-white">Text</div>
<div class="rounded-full bg-white w-10 h-10">Text</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Border Radius - Tailwind CSS

 

5.3 요소 간 선

• 클래스: divide-x (가로 방향), divide-y (세로 방향), divide-{color} (선의 색상)

divide-x (또는 divide-y)와 divide-{color}는 함께 사용됩니다.

<div class="divide-y divide-blue-400">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Divide Color - Tailwind CSS

 

---

6. 효과 및 필터 관련 클래스

6.1 투명도

• 클래스: opacity-{amount} (0부터 100까지)

opacity-0는 완전 투명, opacity-100은 완전 불투명입니다.

 

기본적으로 10 단위로 클래스가 제공됩니다. 예를 들어, disabled 버튼에 사용할 수 있습니다.

<div class="opacity-40">Text</div>
<div>Text</div>

 

자세한 내용은 공식 문서에서 확인하세요.

Opacity - Tailwind CSS

 

6.2 블러

• 클래스: blur

blur-sm, blur-lg 등으로 블러의 크기를 조정할 수 있는 클래스도 제공됩니다.

<div class="blur-sm">Text</div>

 

! 클래스가 적용된 요소의 모든 내용이 블러 처리되므로 주의가 필요합니다.

 

자세한 내용은 공식 문서에서 확인하세요.

Blur - Tailwind CSS

 

---

7. 애니메이션 관련 클래스

7.1 점멸

• 클래스: animate-pulse

로딩 중 UI(스켈레톤이라고도 함)에 자주 사용됩니다.

<div class="animate-pulse bg-white h-8"></div>

 

자세한 내용은 공식 문서에서 확인하세요.

Animation - Tailwind CSS

 

7.2 회전

• 클래스: animate-spin

로딩 마크에 자주 사용됩니다.

<div class="animate-spin bg-white w-8 h-8"></div>

 

자세한 내용은 공식 문서에서 확인하세요.

Animation - Tailwind CSS

 

7.3 전화(transition) 설정

• 클래스: transition

전환은 다른 스타일로 바뀔 때의 애니메이션을 의미합니다.

 

예를 들어, "호버 시 천천히 투명도를 변화시키는" 경우에 사용합니다.

 

시간(duration)은 기본적으로 150ms로 설정되어 있지만, duration-{amount} 클래스를 사용하여 덮어쓸 수 있습니다.

<button class="transition hover:opacity-40">Text</button>

 

자세한 내용은 공식 문서에서 확인하세요.

Transition Property - Tailwind CSS

 

---

8. Tailwind CSS 커스터마이징

Tailwind CSS는 기본적으로 다양한 클래스를 제공하지만, 이러한 클래스를 커스터마이징하는 것도 가능합니다.

 

사용자 정의 스타일을 추가하여 프로젝트에 맞게 Tailwind를 조정할 수 있습니다.

8.1 설정 파일 수정

테마를 커스터마이징하려면 tailwind.config.js라는 설정 파일을 수정해야 합니다.

 

Tailwind Play를 열고 있는 경우, 왼쪽 상단의 Config 탭을 클릭하면 이 설정 파일을 수정할 수 있습니다.

8.2 색상 커스터마이징

색상은 tailwind.config.js 파일 내의 theme > colors에 정의합니다.

 

예를 들어, tahiti라는 색상을 사용하고 싶다면 아래와 같이 작성합니다.

module.exports = {
  theme: {
    colors: {
      'tahiti': '#3ab7bf',
    },
  },
}

 

이렇게 하면 text-tahiti나 bg-tahiti와 같은 클래스를 사용할 수 있습니다.

 

! 하지만 이 경우 tahiti 외의 색상은 사용할 수 없다는 점에 유의해야 합니다.

 

theme > colors에 색상을 정의하면 정의한 색상만 사용할 수 있게 되기 때문입니다.

 

8.3 기본 색상 유지하면서 커스텀 색상 추가

Tailwind CSS의 기본 색상은 그대로 사용하면서 커스텀 색상을 추가하고 싶다면, theme > extend > colors에 정의하면 됩니다.

module.exports = {
  theme: {
    extend: {
      colors: {
        'tahiti': '#3ab7bf',
      }
    },
  },
}

 

이와 같이 extend > colors에 정의함으로써 기본 색상 세트를 확장할 수 있습니다.

 

끝.