Tailwind 사용하기

Posted 10 months Updated 10 months

By 베짱이가 되고싶은 개미。

Tailwind는 유틸리티 퍼스트(Utility-first) CSS 프레임워크입니다. 이는 기본적으로 미리 정의된 클래스를 활용해 빠르게 스타일링할 수 있도록 도와주는 프레임워크를 의미합니다. 기존의 CSS 방식과는 다르게 Tailwind는 별도의 스타일 시트를 작성하는 대신, HTML 클래스에 직접 스타일링 관련 유틸리티 클래스들을 추가하는 방식으로 작업합니다.

유틸리티 클래스

Tailwind는 각 스타일을 단일 클래스에 캡슐화합니다.
예를 들어, text-center, bg-blue-500, p-4와 같은 클래스를 조합해 텍스트 정렬, 배경색 설정, 패딩 등을 간단하게 적용할 수 있습니다.

반응형 디자인

Tailwind는 기본적으로 반응형 디자인을 쉽게 처리할 수 있도록 도와줍니다.
예를 들어, md:text-center와 같이 특정 화면 크기에서만 적용될 스타일을 정의할 수 있습니다.

미리 정의된 테마

Tailwind는 색상, 글꼴 크기, 여백 등을 미리 정의된 값으로 제공하며, 이를 쉽게 커스터마이징할 수 있습니다.

유연성

Tailwind는 매우 유연하여 프로젝트의 스타일 가이드를 따르면서도 세부적으로 다양한 스타일을 적용할 수 있습니다.

JIT(Just-In-Time)

필요할 때마다 스타일을 생성해 주는 JIT 모드를 지원하여, 사용하지 않는 CSS 클래스가 빌드에 포함되지 않도록 합니다. 이로 인해 빌드 크기를 크게 줄일 수 있습니다.

tailwond 텍스트 크기 클래스(font-size)

테일윈드 CSS(Tailwind CSS)에서 폰트 크기는 text- 접두사를 사용하여 설정하며, 기본적으로 다양한 크기 클래스를 제공합니다. 아래는 테일윈드의 폰트 크기 클래스의 예시와 그에 해당하는 실제 크기입니다. (Tailwind CSS v3.4 기준)

<p class="text-xs">text-xs: 0.75rem (12px)</p>
<p class="text-sm">text-sm: 0.875rem (14px)</p>
<p class="text-base">text-base: 1rem (16px)</p>
<p class="text-lg">text-lg: 1.125rem (18px)</p>
<p class="text-xl">text-xl: 1.25rem (20px)</p>
<p class="text-2xl">text-2xl: 1.5rem (24px)</p>
<p class="text-3xl">text-3xl: 1.875rem (30px)</p>
<p class="text-4xl">text-4xl: 2.25rem (36px)</p>
<p class="text-5xl">text-5xl: 3rem (48px)</p>
<p class="text-6xl">text-6xl: 3.75rem (60px)</p>
<p class="text-7xl">text-7xl: 4.5rem (72px)</p>
<p class="text-8xl">text-8xl: 6rem (96px)</p>
<p class="text-9xl">text-9xl: 8rem (128px)</p>

클래스	rem 크기	px 크기
text-xs	0.75rem	12px
text-sm	0.875rem	14px
text-base	1rem	16px
text-lg	1.125rem	18px
text-xl	1.25rem	20px
text-xs	0.75rem	12px
text-2xl	1.5rem	24px
text-3xl	1.875rem	30px
text-4xl	2.25rem	36px
text-5xl	3rem	48px
text-6xl	3.75rem	60px
text-7xl	4.5rem	72px
text-8xl	6rem	96px
text-9xl	8rem	128px

tailwond 폰트 두께 (font-weight)

<p class="font-thin">font-thin: font-weight: 100</p>
<p class="font-extralight">font-extralight: font-weight: 200</p>
<p class="font-light">font-light: font-weight: 300</p>
<p class="font-normal">font-normal: font-weight: 400</p>
<p class="font-medium">font-medium: font-weight: 500</p>
<p class="font-semibold">font-semibold: font-weight: 600</p>
<p class="font-bold">font-bold: font-weight: 700</p>
<p class="font-extrabold">font-extrabold: font-weight: 800</p>
<p class="font-black">font-black: font-weight: 900</p>

클래스	font-weight
font-thin	100
font-extralight	200
font-light	300
font-normal	400
font-medium	500
font-semibold	600
font-bold	700
font-extrabold	800
font-black	900

tailwond 라인 높이 (line-height)

<p class="leading-none">leading-none: line-height: 1</p>
<p class="leading-tight">leading-tight: line-height: 1.25</p>
<p class="leading-snug">leading-snug: line-height: 1.375</p>
<p class="leading-normal">leading-normal: line-height: 1.5</p>
<p class="leading-relaxed">leading-relaxed: line-height: 1.625</p>
<p class="leading-loose">leading-loose: line-height: 2</p>
<p class="leading-3">leading-3: line-height: 0.75rem (12px)</p>
<p class="leading-4">leading-4: line-height: 1rem (16px)</p>
<p class="leading-5">leading-5: line-height: 1.25rem (20px)</p>
<!-- leading-6 ~ leading-10까지 지원 -->

클래스	line-height
leading-none	1
leading-tight	1.25
leading-snug	1.375
leading-normal	1.5
leading-relaxed	1.625
leading-loose	2
leading-3	0.75rem (12px)
leading-4	1rem (16px)
leading-5	1.25rem (20px)
leading-6	1.5rem (24px)
leading-7	1.75rem (28px)
leading-8	2rem (32px)
leading-9	2.25rem (36px)
leading-10	2.5rem (40px)

tailwond 레터 스페이싱 (letter-spacing)

<p class="tracking-tighter">tracking-tighter: letter-spacing: -0.05em</p>
<p class="tracking-tight">tracking-tight: letter-spacing: -0.025em</p>
<p class="tracking-normal">tracking-normal: letter-spacing: 0</p>
<p class="tracking-wide">tracking-wide: letter-spacing: 0.025em</p>
<p class="tracking-wider">tracking-wider: letter-spacing: 0.05em</p>
<p class="tracking-widest">tracking-widest: letter-spacing: 0.1em</p>

클래스	letter-spacing
tracking-tighter	-0.05em
tracking-tight	-0.025em
tracking-normal	0
tracking-wide	0.025em
tracking-wider	0.05em
tracking-widest	0.1em

tailwond 테일윈드 스페이싱 스케일

테일윈드의 마진(m-)과 패딩(p-)은 동일한 스페이싱 스케일을 공유합니다.

1 단위 = 0.25rem = 4px (브라우저 기본 루트 폰트 크기 1rem = 16px 기준)
n 값에 따라 n * 0.25rem으로 계산
테일윈드의 스페이싱 시스템은 top, right, bottom, left 방향에 대해 동일한 값을 사용합니다.
마진: mt-n, mr-n, mb-n, ml-n은 모두 동일한 n * 0.25rem 값을 가짐.
패딩: pt-n, pr-n, pb-n, pl-n도 동일한 n * 0.25rem 값을 가짐.

<div class="mt-0">mt-0: margin-top: 0px</div> <!-- mr-0, mb-0, ml-0 동일 -->
<div class="mt-1">mt-1: margin-top: 0.25rem (4px)</div> <!-- mr-1, mb-1, ml-1 동일 -->
<div class="mt-2">mt-2: margin-top: 0.5rem (8px)</div> <!-- mr-2, mb-2, ml-2 동일 -->
<div class="mt-3">mt-3: margin-top: 0.75rem (12px)</div> <!-- mr-3, mb-3, ml-3 동일 -->
<div class="mt-4">mt-4: margin-top: 1rem (16px)</div> <!-- mr-4, mb-4, ml-4 동일 -->
<div class="mt-5">mt-5: margin-top: 1.25rem (20px)</div> <!-- mr-5, mb-5, ml-5 동일 -->
<div class="mt-6">mt-6: margin-top: 1.5rem (24px)</div> <!-- mr-6, mb-6, ml-6 동일 -->
<div class="mt-7">mt-7: margin-top: 1.75rem (28px)</div> <!-- mr-7, mb-7, ml-7 동일 -->
<div class="mt-8">mt-8: margin-top: 2rem (32px)</div> <!-- mr-8, mb-8, ml-8 동일 -->
<div class="mt-9">mt-9: margin-top: 2.25rem (36px)</div> <!-- mr-9, mb-9, ml-9 동일 -->
<div class="mt-10">mt-10: margin-top: 2.5rem (40px)</div> <!-- mr-10, mb-10, ml-10 동일 -->

mt-n, mr-n, mb-n, ml-n, pt-n, pr-n, pb-n, pl-n	스케일
n=0	0px
n=1	0.25rem (4px)
n=2	0.5rem (8px)
n=3	0.75rem (12px)
n=4	1rem (16px)
n=5	1.25rem (20px)
n=6	1.5rem (24px)
n=7	1.75rem (28px))
n=8	2rem (32px)
n=9	2.25rem (36px)
n=10	2.5rem (40px)

tailwond 커스텀 설정 (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // 커스텀 패딩
      padding: {
        '10': '2.5rem', // 40px
        '12': '3rem',   // 48px
      },
      // 커스텀 마진
      margin: {
        '10': '2.5rem', // 40px
        '12': '3rem',   // 48px
      },
      // 커스텀 폰트 두께
      fontWeight: {
        'extra-thin': 50,
      },
      // 커스텀 라인 높이
      lineHeight: {
        11: '2.75rem', // 44px
        12: '3rem',    // 48px
      },
      // 커스텀 레터 스페이싱
      letterSpacing: {
        'extra-wide': '0.15em',
      },
    },
  },
};