Tailwind CSS란? 앱 빌더를 위한 쉬운 가이드

Tailwind CSS는 웹사이트를 꾸미기 위한 도구 모음입니다. 별도 파일에 스타일 규칙을 따로 쓰는 대신, 각 요소에 짧고 미리 만들어진 클래스 이름을 붙입니다. 예를 들어 bg-white는 흰색 배경, p-4는 안쪽 여백, text-lg는 큰 글자, rounded-xl은 둥근 모서리를 뜻합니다. 그러면 Tailwind가 브라우저에 필요한 CSS를 만들어줍니다. 무료이고 오픈소스이며, 현대 웹 앱을 꾸미는 가장 흔한 방법 중 하나입니다.

AI로 만들 때 Tailwind가 중요한 이유

AI 앱 빌더로 웹 앱을 만든다면, 앱이 Tailwind로 꾸며져 있을 가능성이 높습니다. 예를 들어 Mythex는 다른 요청이 없으면 새 프로젝트를 Vite + React + TypeScript + Tailwind로 시작합니다(기술 스택이 선택되는 방식).

이것은 세 가지 면에서 중요합니다:

• 디자인 변경이 저렴합니다. 스타일이 버튼, 카드, 제목 바로 옆에 있으므로, AI는 “카드를 덜 복잡하게 해줘” 같은 요청을 한 곳에서 몇 개의 클래스 이름을 편집해 처리할 수 있습니다.
• 읽을 수 있습니다. Tailwind 클래스는 평범한 영어에 가깝습니다. text-center font-bold text-2xl은 코드를 한 번도 써본 적이 없어도 해독하기 어렵지 않습니다.
• 모양이 일관됩니다. Tailwind에는 고정된 크기, 간격, 색상 체계가 있습니다. 덕분에 앱에 살짝씩 다른 회색이 14가지나 생기는 일을 막아줍니다.

일상 속 비유

페인트와 집 짓기를 생각해보세요.

일반 CSS는 벽마다 직접 페인트를 섞는 것과 같습니다. 완전히 자유롭지만, 시간이 지나면 거실은 “따뜻한 흰색”, 복도는 “조금 더 따뜻한 흰색”이 되고, 왜 그런지 아무도 기억하지 못합니다.

Tailwind는 페인트 가게의 색상표와 라벨 스티커 세트와 같습니다. 모든 벽에 “흰색, 무광, 2회 도장” 같은 스티커가 붙고, 색상표에는 엄선된 색조만 있습니다. 자유는 조금 줄어들지만, 작업하는 모든 사람이 스티커만 읽어도 각 벽이 어떻게 보여야 하는지 정확히 압니다.

Tailwind의 작동 방식

웹 페이지는 HTML(내용과 구조)과 CSS(모양)로 만들어집니다. 보통 CSS는 다음과 같은 규칙이 담긴 별도 파일에 들어 있습니다:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwind를 쓰면 이런 규칙을 작성하지 않고, 유틸리티 클래스를 요소에 바로 붙입니다:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

각 클래스는 작은 역할 하나를 합니다. 앱이 빌드될 때 Tailwind는 파일을 스캔해서 실제로 사용한 클래스를 찾고, 그 클래스에 필요한 CSS만 생성합니다. 그래서 최종 스타일시트가 작게 유지됩니다.

현재 주 버전인 Tailwind 버전 4는 설정이 매우 적습니다. 설치하고, 빌드 도구에 플러그인을 추가하고, CSS 파일 맨 위에 @import "tailwindcss";를 넣으면 됩니다. 브랜드 색상이나 글꼴 같은 맞춤 설정은 이전 버전처럼 큰 JavaScript 설정 파일이 아니라, CSS의 디자인 토큰으로 정의합니다. tailwind.config.js를 언급하는 오래된 튜토리얼을 읽었다면, 이 때문입니다.

실제 예시: 가격 카드

가격 페이지를 AI 빌더에 요청했고, “Pro” 카드가 눈에 띄길 원한다고 가정해봅시다. 카드 코드는 다음과 같을 수 있습니다(React 컴포넌트에서는 class를 className으로 씁니다):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

왼쪽에서 오른쪽으로 읽으면 다음과 같습니다:

“Pro 카드를 파란 테두리와 은은한 그림자로 눈에 띄게 해줘”라고 요청하면, AI는 border-gray-200을 border-2 border-blue-600으로 바꾸고 shadow-lg를 추가할 수 있습니다. 변경은 이것이 전부입니다.

반응형 디자인과 다크 모드

Tailwind에는 화면 크기와 상태를 위한 짧은 접두사가 있습니다:

• md:grid-cols-3 — 중간 크기 이상 화면에서는 세 개의 열. 휴대폰에서는 기본 한 열이 적용됩니다. Tailwind는 모바일 우선입니다. 접두사가 없는 클래스는 모든 곳에 적용되고, 접두사는 더 큰 화면에 대한 변경을 추가합니다.
• hover:bg-gray-700 — 마우스가 올라가면 버튼이 더 어두워집니다.
• dark:bg-gray-900 — 다크 모드가 켜지면 다른 배경이 적용됩니다.

그래서 Tailwind 프로젝트에서는 모바일 반응형 레이아웃이나 다크 모드를 요청하는 것이 보통 빠릅니다.

주요 용어

흔한 오해

• “Tailwind는 디자인이다.” 그렇지 않습니다. Tailwind는 모양이 아니라 구성 블록을 줍니다. 같은 Tailwind 사이트라도 전혀 다르게 보일 수 있습니다. 흔히 말하는 일반적인 “AI 앱 느낌”은 Tailwind가 아니라 기본값에서 나옵니다. 빌더에게 실제 방향을 알려주세요. AI로 보기 좋은 앱을 디자인하는 방법을 참고하세요.
• “인라인 스타일과 같다.” 정확히는 아닙니다. 클래스는 공용 체계에서 가져오며, 호버, 다크 모드, 브레이크포인트를 지원하고, 빌드할 때 일반 CSS로 변환됩니다.
• “Tailwind는 페이지를 무겁게 만든다.” 빌드에는 사용하는 클래스만 포함되므로, 방문자에게 전달되는 CSS는 보통 작습니다.
• “클래스 목록이 길면 코드가 지저분하다.” 처음에는 복잡해 보이지만, 요소의 모양에 관한 모든 것이 한 곳에 있습니다. 반복되는 패턴은 보통 Button 같은 하나의 컴포넌트로 묶습니다.
• “Tailwind를 쓰면 맞춤 CSS를 쓸 수 없다.” 필요할 때는 언제든 일반 CSS를 쓸 수 있습니다.

AI 빌더에 요청할 내용

• “브랜드 색상과 글꼴을 테마 토큰으로 한 번만 정의하고, 하드코딩된 색상 대신 어디서나 사용해줘.”
• “모든 카드, 버튼, 입력란이 같은 모서리 반경과 간격을 쓰도록 해줘.”
• “휴대폰 너비에서 레이아웃을 확인하고, 넘치거나 터치하기 어려운 부분을 고쳐줘.”
• “Tailwind의 dark: 변형을 사용해 다크 모드를 추가하고, 글자 대비가 읽기 쉽게 유지되도록 해줘.”
• “반복되는 버튼 스타일을 하나의 재사용 가능한 Button 컴포넌트로 묶어줘.”
• “이 섹션의 Tailwind 클래스를 평범한 말로 설명해줘.”

Mythex에서의 Tailwind

새 Mythex 프로젝트는 기본적으로 React 및 TypeScript와 함께 Tailwind를 사용하므로, 시각적 변경을 평범한 말로 요청하고 라이브 미리보기에서 바로 확인할 수 있습니다. 코드를 보고 싶다면 코드 편집기에서 모든 클래스를 볼 수 있습니다(Free에서는 읽기 전용, Pro에서는 편집 가능). 일반 CSS나 다른 구성을 원한다면 첫 프롬프트에서 말해주세요. 기술 스택이 선택되는 방식은 문서에 설명되어 있습니다.

자주 묻는 질문