Tailwind border flex 사용법: 레이아웃 기본 클래스 기준

• border는 선을 켜는 기본 스위치에 가깝다
• 두께, 방향, 색상, 라운딩을 나눠서 보기
• flex는 자식 요소의 배치 흐름을 바꾼다
• justify와 items는 축을 기준으로 이해한다
• 정리
• FAQ

border는 선을 켜는 기본 스위치에 가깝다

Tailwind CSS에서 보더를 처음 정리할 때는 border 하나부터 보는 편이 좋습니다. 일반 CSS라면 border-width, border-style, border-color를 따로 떠올리기 쉽지만, Tailwind에서는 자주 쓰는 조합을 짧은 유틸리티 클래스로 붙입니다.

border를 작성하면 기본적으로 1px 두께의 보더가 적용됩니다. 카드, 입력창, 버튼, 리스트 항목처럼 영역의 경계를 보여줘야 하는 곳에서 가장 먼저 붙여볼 수 있는 클래스입니다. 효과가 바로 눈에 보이기 때문에 Tailwind CSS의 유틸리티 규칙을 익히기에도 좋은 출발점입니다.

다만 border를 “보더 스타일을 전부 해결하는 클래스”로 보면 금방 헷갈립니다. 이 클래스는 기본 선을 켜는 출발점에 가깝고, 두께를 바꾸거나 색상을 바꾸거나 특정 방향에만 선을 넣고 싶을 때는 다른 보더 유틸리티를 조합합니다.

기본 카드에 보더 붙이기

<article class="border rounded-lg p-5">
    <h3 class="text-lg font-semibold">Tailwind CSS 카드</h3>
    <p class="mt-2 text-sm text-gray-600">
        border와 rounded를 함께 쓰면 카드의 경계와 모서리 형태가 바로 드러납니다.
    </p>
</article>

이 예시에서 border는 외곽선을 만들고, rounded-lg는 모서리를 둥글게 만듭니다. p-5는 안쪽 여백입니다. 같은 줄에 여러 클래스를 붙이지만 역할은 나뉘어 있습니다. 선은 border, 모서리는 rounded-*, 여백은 p-*처럼 읽으면 클래스가 한꺼번에 몰려 있어도 구조가 덜 복잡해 보입니다.

두께, 방향, 색상, 라운딩을 나눠서 보기

보더 관련 클래스는 한 번에 외우려고 하면 종류가 많아 보입니다. 하지만 두께, 방향, 색상, 라운딩으로 나누면 규칙이 비교적 단순합니다. 먼저 두께는 border, border-2, border-4, border-8처럼 봅니다.

p-4나 m-4처럼 spacing scale을 쓰는 클래스에 익숙하면 border-4도 같은 방식으로 계산된다고 생각하기 쉽습니다. 하지만 보더 두께에서 border-2는 2px, border-4는 4px처럼 훨씬 직접적인 두께 값으로 받아들이는 편이 안전합니다.

보더 두께와 방향 지정

<div class="border p-4">기본 1px 보더</div>
<div class="border-2 p-4">2px 보더</div>
<div class="border-l-4 p-4">왼쪽만 두꺼운 보더</div>
<div class="border-x p-4">좌우에만 보더</div>
<div class="border-y-2 p-4">상하에만 2px 보더</div>

방향 클래스는 이름이 직관적인 편입니다. border-l은 왼쪽, border-r은 오른쪽, border-t는 위쪽, border-b는 아래쪽입니다. border-x는 좌우를 함께 잡고, border-y는 상하를 함께 잡습니다.

실제 화면에서는 전체 외곽선보다 한쪽 선만 필요한 경우가 꽤 많습니다. 예를 들어 탭 메뉴의 활성 항목 아래에만 선을 주거나, 사이드바 항목의 왼쪽에 강조선을 넣거나, 리스트를 위아래 선으로 구분하는 식입니다. 이때 매번 CSS 파일로 가서 border-left를 작성하지 않고, 마크업에서 border-l이나 border-b로 바로 표현할 수 있습니다.

색상과 라운딩 조합

<button class="border border-blue-300 rounded-md px-4 py-2 text-blue-700">
    자세히 보기
</button>

<div class="border-2 border-red-500 rounded-xl p-4">
    확인이 필요한 영역
</div>

보더 색상은 border-red-500, border-blue-300, border-gray-200처럼 작성합니다. 배경색의 bg-blue-500, 글자색의 text-blue-500과 비슷한 방식이라 색상 계열을 이미 알고 있다면 크게 낯설지 않습니다.

라운딩은 rounded-xs, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl처럼 모서리 둥글기를 단계별로 조절합니다. 작은 버튼에는 rounded-md 정도가 자연스럽고, 카드나 배너처럼 면적이 큰 요소에는 rounded-xl이나 rounded-2xl이 더 부드럽게 보일 수 있습니다.

라운딩 값은 정답이 정해진 값이라기보다 UI 크기와 브랜드 톤에 맞춰 고르는 값입니다. 같은 rounded-xl이라도 작은 버튼에 쓰면 과하게 둥글어 보일 수 있고, 큰 카드에 쓰면 자연스러워 보일 수 있습니다. 그래서 숫자나 이름만 외우기보다 실제 요소 크기와 함께 보는 편이 좋습니다.

구분	주로 쓰는 클래스
보더 두께와 방향	border, border-2, border-l, border-x, border-y
보더 색상과 모서리	border-gray-200, border-blue-300, rounded-md, rounded-xl

flex는 자식 요소의 배치 흐름을 바꾼다

보더가 요소의 외곽을 다듬는 클래스라면, flex는 자식 요소의 배치 흐름을 바꾸는 클래스입니다. flex를 붙인 요소는 플렉스 컨테이너가 되고, 그 안의 자식 요소들은 기본적으로 가로 방향으로 배치됩니다.

처음에는 flex를 “가로 배치 클래스”로만 외우기 쉽습니다. 실제 기본 동작만 보면 그렇게 보여도 크게 틀리지는 않습니다. 다만 정확히는 display: flex를 적용하는 클래스이고, 가로 방향 배치는 기본 flex-direction: row 흐름 때문에 나타납니다.

이미지와 텍스트를 가로로 배치하기

<div class="flex items-center gap-4 border rounded-xl p-4">
    <div class="h-12 w-12 rounded-full bg-gray-200"></div>
    <div>
        <strong class="block text-sm">프로필 카드</strong>
        <span class="text-sm text-gray-500">이미지와 텍스트를 나란히 배치합니다.</span>
    </div>
</div>

이 구조에서는 바깥 div가 플렉스 컨테이너입니다. 첫 번째 자식은 원형 이미지 영역이고, 두 번째 자식은 텍스트 영역입니다. flex가 없으면 두 요소는 일반 블록 흐름에 따라 위아래로 쌓이기 쉽지만, flex를 붙이면 한 줄에 나란히 놓입니다.

gap-4는 자식 요소 사이의 간격을 만듭니다. 예전 CSS에서는 margin을 어느 쪽에 줄지 고민하는 경우가 많았지만, Tailwind에서 플렉스와 함께 간격을 다룰 때는 gap-*을 먼저 떠올리는 편이 깔끔합니다.

flex-col로 세로 흐름 만들기

<div class="flex flex-col gap-3 border rounded-xl p-5">
    <h3 class="text-lg font-semibold">서비스 안내</h3>
    <p class="text-sm text-gray-600">제목, 설명, 버튼이 위에서 아래로 쌓입니다.</p>
    <button class="border border-gray-300 rounded-md px-4 py-2">확인하기</button>
</div>

flex-col을 추가하면 자식 요소가 세로 방향으로 쌓입니다. 카드 내부에서 제목, 설명, 버튼을 위에서 아래로 배치하거나, 모바일 화면에서 기존 가로 레이아웃을 세로로 바꿀 때 자주 사용합니다.

반응형 UI에서는 flex-col md:flex-row처럼 조합하는 경우도 많습니다. 작은 화면에서는 세로로 쌓고, 중간 크기 이상에서는 가로로 배치하는 방식입니다. Tailwind CSS에 익숙해지면 레이아웃 변경을 CSS 파일보다 마크업에서 더 빨리 읽을 수 있습니다.

justify와 items는 축을 기준으로 이해한다

플렉스에서 가장 많이 헷갈리는 부분은 정렬입니다. justify-center, justify-between, items-center는 자주 쓰이지만, “justify는 가로, items는 세로”라고만 외우면 flex-col을 만났을 때 기준이 흔들립니다.

조금 더 안정적인 기준은 축입니다. justify-*는 주축 방향 정렬을 다루고, items-*는 교차축 방향 정렬을 다룹니다. 기본 flex 상태에서는 주축이 가로 방향이라 justify-*가 가로 정렬처럼 보이고, items-*가 세로 정렬처럼 보입니다.

양쪽 끝 정렬과 세로 중앙 정렬

<header class="flex items-center justify-between border-b px-5 py-4">
    <h1 class="text-lg font-bold">Dashboard</h1>
    <nav class="flex items-center gap-3">
        <a href="#" class="text-sm">Home</a>
        <a href="#" class="text-sm">Setting</a>
    </nav>
</header>

이 예시에서 justify-between은 제목과 메뉴를 양쪽 끝으로 벌립니다. items-center는 제목과 메뉴의 세로 위치를 가운데로 맞춥니다. 헤더나 카드 상단 영역에서 거의 반복적으로 등장하는 조합입니다.

justify-center는 주축 가운데 정렬, justify-around는 각 요소 주변에 간격을 나누는 정렬입니다. 메뉴가 많거나 버튼 그룹을 균등하게 흩어놓고 싶을 때 사용할 수 있지만, 실제 UI에서는 justify-between과 gap-* 조합이 더 읽기 쉬운 경우도 많습니다.

items-start, items-center, items-end는 교차축에서 어디에 붙일지 정합니다. 이미지와 텍스트 높이가 다를 때 위쪽에 맞출지, 가운데에 맞출지, 아래쪽에 맞출지를 결정하는 식입니다.

flex-col에서는 정렬 감각이 달라진다

<section class="flex min-h-64 flex-col items-center justify-center border rounded-2xl p-6">
    <h2 class="text-xl font-bold">빈 상태 화면</h2>
    <p class="mt-2 text-sm text-gray-500">등록된 데이터가 없을 때 보여줄 수 있는 영역입니다.</p>
</section>

flex-col에서는 주축이 세로 방향으로 바뀝니다. 그래서 justify-center는 세로 가운데 정렬에 가까운 역할을 하고, items-center는 가로 가운데 정렬에 가까운 역할을 합니다. 이 차이를 모르면 클래스는 맞게 쓴 것 같은데 요소가 예상한 방향으로 움직이지 않는 상황이 생깁니다.

처음에는 “현재 flex 방향이 row인지 column인지”를 먼저 확인하는 습관이 필요합니다. 그다음 주축을 정렬할지, 교차축을 정렬할지 생각하면 justify-*와 items-* 선택이 훨씬 단순해집니다.

정리

Tailwind CSS의 보더와 플렉스 유틸리티는 클래스 이름만 보면 외울 것이 많아 보이지만, 역할을 나누면 흐름이 분명해집니다. border는 1px 선을 켜는 출발점이고, border-2, border-l, border-x처럼 두께와 방향을 조절할 수 있습니다.

색상은 border-red-500, border-blue-300처럼 Tailwind의 색상 규칙을 따르고, 모서리는 rounded-md, rounded-lg, rounded-xl처럼 요소 크기와 분위기에 맞춰 선택합니다.

flex는 자식 요소를 배치하는 흐름을 바꾸고, 기본 상태에서는 가로 방향으로 놓입니다. 세로 배치가 필요하면 flex-col을 붙입니다. 정렬은 justify-*와 items-*를 쓰되, 단순히 가로와 세로로 외우기보다 주축과 교차축을 기준으로 보는 편이 안전합니다.

카드 하나를 만들 때도 보더, 라운딩, 플렉스, 정렬 클래스는 함께 쓰이는 경우가 많습니다. 그래서 각각을 따로 외우는 것보다 “영역을 구분한다 → 모서리를 다듬는다 → 자식 요소를 배치한다 → 축 기준으로 정렬한다”는 순서로 익히면 실제 마크업을 작성할 때 덜 흔들립니다.

FAQ

Q. Tailwind CSS에서 border만 쓰면 선이 생기나요?
네. border만 작성해도 기본적으로 1px 보더가 적용됩니다. 두께를 더 명확히 조절하고 싶을 때 border-2, border-4 같은 클래스를 추가합니다.

Q. border-2의 숫자는 p-2처럼 spacing 기준인가요?
아닙니다. border-2는 2px 보더 두께로 보는 편이 맞습니다. p-2처럼 spacing scale 감각으로 연결하면 헷갈릴 수 있습니다.

Q. justify와 items는 어떻게 구분하나요?
justify-*는 주축 정렬, items-*는 교차축 정렬입니다. 기본 flex에서는 주축이 가로지만, flex-col을 쓰면 주축이 세로로 바뀝니다.