Tailwind CSS 기본 클래스 사용법: text font bg spacing 익히기

• Tailwind CSS 클래스는 왜 길어 보일까
• text와 font를 CSS 속성으로 연결하기
• 색상 단계는 숫자로 읽는다
• w, h, p, m은 spacing scale을 따른다
• 정리
• FAQ

Tailwind CSS 클래스는 왜 길어 보일까

Tailwind CSS를 처음 쓰면 HTML 안에 class가 너무 길게 붙는 것처럼 보입니다. 기존 CSS처럼 선택자를 만들고 별도 파일에서 스타일을 작성하던 방식에 익숙하면 더 그렇습니다. 그런데 class를 하나씩 떼어 보면 대부분은 익숙한 CSS 속성을 짧게 표현한 것입니다.

예를 들어 text-lg는 글자 크기, font-bold는 글자 두께, bg-blue-50은 배경색, w-20은 너비, p-5는 패딩을 담당합니다. 길어 보이는 이유는 하나의 선택자에 여러 속성을 몰아넣는 대신, 속성마다 작은 클래스를 조합하기 때문입니다. 이 구조에서는 클래스 이름 자체보다 접두사와 CSS 속성의 연결 관계를 먼저 보는 편이 좋습니다.

주의할 부분도 있습니다. text-는 항상 font-size만 의미하지 않습니다. text-lg는 글자 크기지만 text-blue-500은 글자 색상입니다. 같은 접두사라도 뒤에 오는 값이 크기 단계인지, 색상 단계인지에 따라 실제 CSS 속성이 달라집니다. 그래서 text-를 보면 바로 “글자 크기”라고 단정하기보다 뒤쪽 값을 같이 읽어야 합니다.

클래스를 나눠 읽는 기준

<p class="text-lg font-bold text-blue-500">
    Tailwind CSS 기본 클래스
</p>

<div class="w-20 h-20 bg-amber-500 p-5">
    Box
</div>

첫 번째 줄은 글자 크기, 글자 두께, 글자 색상을 각각 분리해서 표현합니다. 두 번째 줄은 너비, 높이, 배경색, 안쪽 여백을 조합합니다. 기존 CSS로 작성하면 여러 속성이 한 선택자 안에 모이지만, Tailwind CSS에서는 속성 단위로 class를 붙여 화면을 구성합니다.

text와 font를 CSS 속성으로 연결하기

타이포그래피에서 가장 자주 만나는 클래스는 text-와 font-입니다. text-sm, text-base, text-xl처럼 쓰면 font-size를 조정하고, font-medium, font-bold처럼 쓰면 font-weight를 조정합니다. 처음에는 이름이 Tailwind 전용 문법처럼 보이지만 실제로는 기존 CSS 속성을 다른 방식으로 부르는 것에 가깝습니다.

본문에는 text-base나 text-sm이 많이 쓰이고, 카드 제목이나 섹션 제목에는 text-xl, text-2xl 같은 단계가 어울립니다. 정해진 크기만 사용할 수 있는 것은 아닙니다. 시안에서 꼭 13px이 필요하다면 text-[13px]처럼 대괄호 안에 직접 값을 넣을 수 있습니다. 다만 반복되는 본문 크기까지 모두 직접 값으로 맞추면 나중에 타이포그래피 기준을 바꾸기 어려워집니다.

글자 크기와 줄 높이를 함께 맞추기

<article class="max-w-2xl">
    <h2 class="text-2xl font-bold">카드 제목</h2>
    <p class="text-base/7 text-gray-700">
        본문은 글자 크기와 줄 높이를 함께 봐야 읽기 편해집니다.
    </p>
    <p class="text-[13px] font-medium text-gray-500">
        직접 지정한 작은 보조 문구
    </p>
</article>

text-base/7처럼 슬래시를 붙이면 font-size와 line-height를 함께 지정할 수 있습니다. 문장이 길어지는 본문에서는 이 차이가 꽤 크게 보입니다. 글자 크기만 맞췄는데 줄이 답답해 보인다면 text-sm, text-base만 바꾸기보다 text-base/7처럼 줄 높이까지 같이 조정해야 합니다.

font-bold는 강조에 쓰기 좋지만, 모든 텍스트를 굵게 만들면 오히려 정보의 우선순위가 흐려집니다. 제목, 버튼, 가격, 상태 라벨처럼 시선이 먼저 가야 하는 곳에만 두께를 주는 방식이 더 안정적입니다.

색상 단계는 숫자로 읽는다

색상 클래스는 색상명과 숫자 단계를 조합합니다. text-red-500은 글자 색상이고, bg-blue-50은 배경색입니다. 접두사가 text-이면 color, bg-이면 background-color로 연결된다고 보면 됩니다.

Tailwind CSS 기본 색상 팔레트는 50부터 950까지의 단계를 사용합니다. 숫자가 작을수록 밝은 색상에 가깝고, 숫자가 클수록 어두운 색상에 가깝습니다. 500은 해당 색상 계열의 기준색처럼 쓰기 좋고, 50이나 100은 연한 배경을 만들 때 부담이 적습니다.

배경과 글자색은 같이 봐야 한다

<div class="bg-blue-50 p-5">
    <h2 class="text-blue-700 font-bold">알림 제목</h2>
    <p class="text-blue-600">
        연한 배경 위에는 조금 더 진한 텍스트가 잘 보입니다.
    </p>
</div>

<p class="text-[rgb(100,30,200)]">
    직접 입력한 RGB 색상
</p>

색상은 단독으로 고르면 판단하기 어렵습니다. bg-blue-50처럼 배경을 연하게 잡았다면 글자는 text-blue-600이나 text-blue-700처럼 더 진한 단계를 써야 읽기 좋습니다. 반대로 진한 배경에는 text-white나 text-blue-50처럼 밝은 글자색이 필요합니다. 색상 클래스는 배경과 텍스트를 따로 외우기보다 대비 조합으로 보는 쪽이 실무에서 더 안전합니다.

브랜드 색상이 반복된다면 매번 text-[#123456]처럼 직접 값을 넣기보다 프로젝트 설정에서 토큰으로 관리하는 방식이 낫습니다. 한두 번 쓰는 예외 색상은 대괄호 문법으로 처리해도 되지만, 반복되는 색상까지 직접 값으로 흩어지면 나중에 수정 범위가 커집니다.

w, h, p, m은 spacing scale을 따른다

w-와 h-는 요소의 너비와 높이를 잡을 때 사용합니다. w-20은 20px이라는 뜻이 아니라 Tailwind의 spacing scale에서 20에 해당하는 값을 사용한다는 뜻입니다. Tailwind CSS v4 문서 기준으로도 w-<number> 유틸리티는 spacing scale을 기반으로 고정 너비를 만듭니다. 기본 설정에서는 spacing 1단위를 0.25rem으로 계산하므로 w-20은 일반적으로 5rem, 약 80px로 해석됩니다.

이 구조를 알면 p-5나 mt-4도 같은 방식으로 읽을 수 있습니다. p-5는 padding 값으로 spacing scale의 5를 쓰고, mt-4는 margin-top 값으로 spacing scale의 4를 씁니다. 숫자가 곧 px이 아니라 scale이라는 점을 놓치면 처음에 w-20, p-5 같은 값이 실제 화면에서 예상보다 크게 보일 수 있습니다.

크기와 여백을 함께 조합하는 예시

<section class="w-full max-w-3xl mx-auto p-5">
    <div class="w-20 h-20 bg-amber-500 mb-5"></div>
    <p class="px-10 py-5 mt-4 text-base/7">
        좌우 패딩과 상하 패딩을 따로 지정한 문단입니다.
    </p>
</section>

w-full은 부모 너비를 채우고, max-w-3xl은 최대 너비를 제한합니다. mx-auto는 좌우 margin을 auto로 잡아 블록 요소를 가운데에 배치할 때 자주 사용합니다. 이렇게 크기, 최대 너비, 바깥 여백을 함께 조합하면 별도 CSS 없이도 기본적인 레이아웃 폭을 잡을 수 있습니다.

패딩은 요소 안쪽 여백이고, 마진은 요소 바깥쪽 여백입니다. p-5는 네 방향 패딩, px-10은 좌우 패딩, py-5는 상하 패딩입니다. 마진도 m, mt, mb, mx, my처럼 같은 방향 규칙을 따르기 때문에 padding 계열을 이해하면 margin 계열도 함께 읽을 수 있습니다.

대괄호 값은 예외에 가깝다

<div class="w-[80px] h-[120px] p-[18px] bg-[#f5f4ff]">
    직접 값을 지정한 박스
</div>

대괄호 문법은 기본 토큰으로 맞추기 어려운 값을 바로 넣을 수 있게 해줍니다. w-[80px], p-[18px], bg-[#f5f4ff]처럼 작성하면 별도 CSS 파일을 만들지 않아도 됩니다. 다만 이런 값이 많아지면 디자인 기준이 클래스마다 흩어집니다. 반복되는 간격은 p-4, p-5, gap-6처럼 기본 토큰으로 맞추고, 특정 배너나 예외적인 컴포넌트처럼 고정 값이 필요한 곳에만 직접 값을 쓰는 편이 유지보수에 유리합니다.

구분	읽는 기준
text, font, bg	글자 크기, 글자 두께, 글자색과 배경색을 다룬다
w, h, p, m	크기와 여백을 spacing scale 기준으로 조합한다

정리

Tailwind CSS 기본 클래스는 암기 목록처럼 접근하면 금방 복잡해집니다. text, font, bg, w, h, p, m이 각각 어떤 CSS 속성과 연결되는지 먼저 잡으면 클래스가 길어져도 읽는 순서가 생깁니다. 결국 중요한 것은 클래스 개수가 아니라, 각 클래스가 맡고 있는 CSS 역할을 빠르게 분리하는 감각입니다.

실제 작업에서는 기본 토큰을 먼저 쓰고, 꼭 필요한 경우에만 대괄호 문법으로 직접 값을 넣는 흐름이 안정적입니다. text-[13px], w-[80px], p-[18px] 같은 값은 빠르게 문제를 해결해주지만, 반복되기 시작하면 프로젝트의 크기와 여백 기준이 흐려질 수 있습니다. 기본값으로 맞출 수 있는지 먼저 보고, 맞지 않는 값만 예외로 분리하는 습관이 오래 갑니다.

기본 클래스를 익힌 뒤 상태 스타일링과 디자인 토큰으로 확장하려면 Tailwind CSS group, peer, has-* 차이와 Tailwind CSS Theme Variables와 Design Token 글도 함께 보면 좋습니다.

많이 받는 질문

Q. w-20은 왜 20px이 아닌가요?
w-20의 20은 픽셀 숫자가 아니라 spacing scale 값입니다. 기본 설정에서는 1단위를 0.25rem으로 계산하므로 w-20은 일반적으로 5rem, 약 80px로 해석됩니다.

Q. text-red-500에서 500은 무슨 뜻인가요?
500은 색상의 명도 단계입니다. Tailwind CSS 기본 팔레트는 50부터 950까지의 단계를 사용하며, 숫자가 작을수록 밝고 숫자가 클수록 어두운 색상에 가깝습니다.

Q. 대괄호 문법을 계속 써도 괜찮나요?
필요할 때는 사용할 수 있습니다. 다만 반복되는 크기, 색상, 여백까지 모두 대괄호로 처리하면 디자인 토큰의 장점이 줄어듭니다. 한 번만 쓰는 예외 값에는 적합하지만, 여러 화면에서 반복되는 값은 기본 토큰이나 프로젝트 설정으로 관리하는 편이 좋습니다.