# 공부하다가 알게 된 Tailwind에 대해서 개념 정리 및 기존 CSS 기술과의 차이점 및 비교 분석 + Flex/Grid 개념 짚기

 

내 질문:

테일 윈드에 대해서 알기 쉽게 설명해줘.

기존의 다른 기술들과 어떻게 다르고, 무엇이 강점인지,

요즘 개발에서 어느 정도의 비중을 차지하고 어떻게 사용되고 있는지도 알려줘.

 

 

테일윈드는 개념 자체는 쉽게 풀고, “기존 CSS/Bootstrap/CSS-in-JS와의 차이”와 “요즘 실제 사용 비중”은 최신 자료를 확인해서 구분해 설명하겠습니다.

46s 동안 생각함

테일윈드 CSS, 정확히는 Tailwind CSS는 “미리 만들어진 예쁜 버튼/카드”를 가져다 쓰는 프레임워크라기보다, 작은 CSS 조각 클래스를 HTML에 조합해서 화면을 만드는 도구입니다. 공식 문서에서도 flex, pt-4, text-center 같은 유틸리티 클래스를 조합해 마크업 안에서 디자인을 만든다고 설명합니다.

1. 아주 쉽게 말하면

기존 CSS는 보통 이렇게 합니다.

 

<div class="profile-card">프로필 카드</div>

 

 

.profile-card {
  display: flex;
  padding: 16px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

 

Tailwind는 이렇게 합니다.

 

<div class="flex p-4 rounded-xl bg-white shadow">
  프로필 카드
</div>

 

즉, CSS 파일에 이름을 정하고 스타일을 작성하는 방식에서, 이미 준비된 작은 스타일 클래스들을 바로 HTML에 붙이는 방식으로 바뀝니다.

p-4는 padding, rounded-xl은 둥근 모서리, bg-white는 흰 배경, shadow는 그림자입니다. 처음 보면 class가 길어 보여서 낯설지만, 익숙해지면 CSS 파일을 왔다 갔다 하지 않고 화면을 빠르게 만들 수 있습니다.

2. 기존 기술들과 어떻게 다른가

일반 CSS와의 차이

일반 CSS는 보통 .btn, .card, .header 같은 의미 중심 클래스를 만들고, 그 안에 스타일을 작성합니다. Tailwind는 px-4, text-sm, bg-blue-500, hover:bg-blue-600처럼 스타일 속성 중심 클래스를 조합합니다.

그래서 일반 CSS가 “이 요소는 login-button이야”라고 이름 붙이는 방식이라면, Tailwind는 “이 요소는 가로 패딩 16px, 파란 배경, hover 시 더 진한 파란색”이라고 바로 적는 방식에 가깝습니다.

Bootstrap과의 차이

Bootstrap은 btn btn-primary, card, navbar처럼 완성된 UI 컴포넌트 느낌이 강합니다. 그래서 빠르게 만들기는 좋지만, Bootstrap 특유의 모양이 남기 쉽습니다.

Tailwind는 기본 버튼 디자인을 강하게 강요하지 않습니다. 대신 bg-blue-500 text-white px-4 py-2 rounded처럼 직접 조합해서 만들기 때문에, 디자인 자유도가 훨씬 높습니다. 쉽게 말해 Bootstrap은 “완제품 가구”, Tailwind는 “조립용 레고 블록”에 가깝습니다.

Sass/SCSS와의 차이

Sass/SCSS는 CSS를 더 편하게 쓰기 위한 문법 확장 도구입니다. 변수, 중첩, mixin 등을 제공하죠.

Tailwind는 CSS 문법을 확장한다기보다, 미리 정의된 디자인 시스템 클래스 묶음을 제공합니다. 그래서 Sass는 “CSS를 더 잘 쓰게 해주는 언어”, Tailwind는 “CSS를 직접 많이 안 쓰게 해주는 클래스 시스템”이라고 보면 됩니다.

CSS-in-JS와의 차이

Styled Components, Emotion 같은 CSS-in-JS는 JavaScript 안에서 스타일을 작성합니다.

 

const Button = styled.button`
  background: blue;
  color: white;
`;

 

Tailwind는 런타임에 JavaScript로 스타일을 만들기보다, HTML/JSX에 적힌 클래스명을 스캔해서 필요한 CSS를 생성합니다. 공식 문서도 Tailwind가 HTML, JavaScript 컴포넌트, 템플릿에서 클래스명을 스캔한 뒤 정적 CSS 파일을 만든다고 설명합니다.

3. Tailwind의 강점

가장 큰 강점은 개발 속도입니다. 버튼 하나 만들 때 CSS 파일로 이동해서 클래스 이름 고민하고, 스타일 쓰고, 다시 HTML로 돌아오는 흐름이 줄어듭니다.

두 번째는 디자인 일관성입니다. 예를 들어 Tailwind에서는 p-1, p-2, p-4, p-8처럼 정해진 간격 단위를 사용합니다. 색상도 blue-500, gray-100, red-600처럼 체계화되어 있습니다. 팀 프로젝트에서 제각각 13px, 17px, #3366ff를 쓰는 일을 줄여줍니다.

세 번째는 반응형과 상태 처리가 직관적입니다.

 

<button class="bg-blue-500 hover:bg-blue-600 md:text-lg">
  저장
</button>

 

여기서 hover:bg-blue-600은 마우스를 올렸을 때, md:text-lg는 중간 크기 이상의 화면에서 글자를 키운다는 뜻입니다. CSS 미디어쿼리와 hover 선택자를 따로 작성하지 않아도 됩니다.

네 번째는 최종 CSS 크기를 줄이기 좋다는 점입니다. Tailwind는 프로젝트에서 실제 사용한 유틸리티 클래스를 스캔한 뒤 필요한 CSS를 생성하며, 이를 통해 CSS를 가능한 작게 유지한다고 설명합니다.

다섯 번째는 현대 프론트엔드 생태계와 궁합이 좋다는 점입니다. Tailwind 공식 설치 문서는 Vite 플러그인 방식이 Laravel, SvelteKit, React Router, Nuxt, SolidJS 같은 프레임워크와 통합하기 좋은 방식이라고 안내합니다.

4. 단점도 있다

Tailwind의 대표적인 단점은 HTML/JSX가 지저분해 보일 수 있다는 점입니다.

 

<div class="mx-auto max-w-4xl rounded-2xl bg-white p-6 shadow-lg border border-gray-200">

 

처음 보는 사람에게는 class가 너무 많아 보여서 가독성이 떨어질 수 있습니다. 규모가 커지면 컴포넌트 분리, 공통 버튼 컴포넌트화, 디자인 토큰 관리가 중요해집니다.

또 하나는 동적 클래스명 처리에 주의해야 한다는 점입니다. Tailwind는 소스 파일을 텍스트로 스캔하기 때문에 text-${color}-600 같은 문자열 조합을 이해하지 못합니다. 공식 문서도 동적으로 클래스명을 조립하지 말고, 완성된 클래스명이 코드에 존재하도록 작성하라고 설명합니다.

5. 요즘 개발에서 어느 정도 비중인가

개발자 설문 기준으로는 CSS 프레임워크 중 최상위권입니다. State of CSS 2025 설문은 총 5,506개의 응답을 수집했고, CSS 프레임워크 항목에서 Tailwind CSS가 2,041명으로 1위, Bootstrap이 1,194명으로 2위였습니다.

실제 웹사이트 탐지 기준으로 보면 수치는 더 낮게 나옵니다. W3Techs는 2026년 6월 기준 Tailwind가 “CSS 프레임워크를 식별할 수 있는 웹사이트” 중 1.7%, 전체 웹사이트 중 0.3%에서 사용된다고 집계합니다. 반면 BuiltWith는 Tailwind CSS를 사용하는 라이브 웹사이트를 약 160만 개 이상으로 집계합니다.

이 차이는 측정 방식 때문입니다. Tailwind는 빌드 후 CSS가 생성되기 때문에, public 웹사이트만 스캔해서는 실제 개발 현장의 사용량을 완전히 잡기 어렵습니다. 그래서 개발자 체감/신규 프로젝트 비중은 매우 높지만, 전체 웹사이트 시장 점유율은 Bootstrap이나 오래된 프레임워크보다 낮게 보일 수 있습니다.

6. 요즘에는 어떻게 쓰이나

요즘은 보통 이런 조합으로 많이 씁니다.

React / Next.js / Vue / Nuxt / SvelteKit
+ Vite 또는 프레임워크 빌드 도구
+ Tailwind CSS
+ shadcn/ui, Headless UI, Radix UI 같은 컴포넌트 도구

 

특히 관리자 페이지, 포트폴리오, SaaS 대시보드, 랜딩 페이지, 스타트업 MVP, React/Next.js 프로젝트에서 많이 사용됩니다. State of CSS 2025에서도 shadcn/ui가 CSS 프레임워크/도구 항목에서 766명 응답을 얻어 상위권에 올라 있는데, shadcn/ui는 Tailwind 기반 UI 컴포넌트 생태계와 함께 자주 쓰입니다.

Tailwind v4.0은 2025년 1월 22일 공개되었고, 공식 발표에서는 고성능 엔진, 간소화된 설치, 자동 콘텐츠 감지, CSS-first 설정, Vite 플러그인, 컨테이너 쿼리 등을 주요 변화로 소개했습니다.

결론

Tailwind는 CSS를 대체하는 기술이라기보다, CSS를 더 빠르고 일관되게 쓰기 위한 유틸리티 중심 CSS 프레임워크입니다.

프론트엔드 입문자에게는 처음에 class가 길어 보여 낯설 수 있지만, 실무에서는 “빠르게 UI를 만들고, 디자인 일관성을 유지하고, React/Vue 같은 컴포넌트 기반 개발과 잘 맞는다”는 이유로 많이 선택됩니다.

정리하면 이렇게 보면 됩니다.

       비교 대상                                   특징                                                                Tailwind와의 차이

일반 CSS	직접 클래스 만들고 스타일 작성	Tailwind는 미리 준비된 유틸리티 클래스 조합
Bootstrap	완성형 컴포넌트 제공	Tailwind는 자유 조립형, 디자인 커스터마이징 강함
Sass/SCSS	CSS 문법 확장	Tailwind는 클래스 기반 디자인 시스템
CSS-in-JS	JS 안에서 스타일 작성	Tailwind는 클래스 스캔 후 정적 CSS 생성

배우는 순서는 기본 CSS → Flex/Grid → Tailwind가 가장 좋습니다. Tailwind만 외우면 “왜 이렇게 되는지”를 놓칠 수 있고, CSS 기초를 알고 Tailwind를 쓰면 생산성이 크게 올라갑니다.

 

---

 

내 질문:

배우는 순서 중간에 둔 Flex/Grid는 뭘 말하는 거야?

이것도 알기 쉽게 설명해줘.

 

 

여기서 말한 Flex/Grid는 CSS에서 화면 배치를 잡는 핵심 기술입니다.

쉽게 말하면:

Flex는 “한 줄 방향 정렬”에 강하고, Grid는 “행과 열이 있는 전체 레이아웃”에 강합니다.

---

1. Flex란?

Flexbox라고도 부릅니다.
요소들을 가로 또는 세로 한 방향으로 정렬할 때 많이 씁니다.

예를 들어 이런 상황입니다.

 

<nav>
  <div>로고</div>
  <div>메뉴</div>
  <div>로그인</div>
</nav>

 

이걸 화면에서 이렇게 배치하고 싶다고 해봅시다.

로고              메뉴              로그인

 

이럴 때 Flex를 씁니다.

 

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 

뜻은 대략 이렇습니다.

display: flex;              안쪽 요소들을 flex 방식으로 배치
justify-content: space-between;  가로 방향으로 양끝과 사이 공간을 벌림
align-items: center;        세로 방향 가운데 정렬

 

즉 Flex는 이런 것에 좋습니다.

                                                  상황                                                                             Flex가 적합한 이유

버튼 안의 아이콘 + 글자 정렬	한 줄 정렬이기 때문
헤더의 로고/메뉴/로그인 배치	가로 배치이기 때문
카드 안의 이미지와 텍스트 정렬	한 방향 정렬이 많기 때문
가운데 정렬	Flex로 매우 간단함

예를 들어 화면 가운데 정렬은 Flex로 자주 합니다.

 

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

 

이렇게 하면 박스 안의 내용이 가로/세로 가운데로 옵니다.

---

2. Grid란?

CSS Grid는 이름 그대로 격자 배치입니다.

예를 들어 쇼핑몰 상품 목록처럼 이런 구조를 만들고 싶을 때 좋습니다.

상품1   상품2   상품3
상품4   상품5   상품6
상품7   상품8   상품9

 

이건 단순히 한 줄 정렬이 아니라 행과 열이 있습니다.
이럴 때 Grid를 씁니다.

 

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

 

뜻은 이렇습니다.

display: grid;                  grid 방식으로 배치
grid-template-columns: repeat(3, 1fr);  3개의 같은 너비 열 만들기
gap: 20px;                      요소 사이 간격 20px

 

Grid는 이런 것에 좋습니다.

                            상황                                                                                 Grid가 적합한 이유

상품 목록	여러 행/열 구조
갤러리	격자 구조
대시보드 화면	큰 영역을 나눠야 함
전체 페이지 레이아웃	header/sidebar/main/footer 구조에 적합

예를 들어 관리자 페이지 레이아웃을 생각하면:

헤더 헤더 헤더
사이드바 메인 메인
사이드바 메인 메인

 

이런 구조는 Grid가 더 자연스럽습니다.

---

3. Flex와 Grid의 차이

가장 쉽게 구분하면 이렇습니다.

              구분                                            Flex                                                                     Grid

핵심 개념	한 방향 배치	행과 열 배치
적합한 구조	1차원	2차원
주로 쓰는 곳	버튼, 메뉴, 카드 내부	상품 목록, 갤러리, 전체 레이아웃
방향	가로 또는 세로	가로와 세로 동시에
예시	로고 - 메뉴 - 로그인	3열 카드 목록

조금 더 쉽게 말하면:

Flex = 줄 세우기
Grid = 바둑판 만들기

 

Flex는 사람들을 한 줄로 세우는 느낌이고,
Grid는 교실 좌석표처럼 행과 열을 만드는 느낌입니다.

---

4. Tailwind와는 무슨 관계인가?

Tailwind에서도 Flex와 Grid를 그대로 씁니다.
다만 CSS 파일에 직접 쓰지 않고, class로 씁니다.

일반 CSS에서는 이렇게 쓰던 것을:

 

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 

Tailwind에서는 이렇게 씁니다.

 

<nav class="flex justify-between items-center">
  <div>로고</div>
  <div>메뉴</div>
  <div>로그인</div>
</nav>

 

Grid도 마찬가지입니다.

일반 CSS:

 

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

 

Tailwind:

 

<div class="grid grid-cols-3 gap-5">
  <div>상품1</div>
  <div>상품2</div>
  <div>상품3</div>
</div>

 

즉 Tailwind가 Flex/Grid를 대체하는 게 아닙니다.

Tailwind는 Flex/Grid 같은 CSS 기능을 더 짧은 class 이름으로 쓰게 해주는 도구입니다.

---

5. 왜 Tailwind 전에 Flex/Grid를 배우라고 했냐면

Tailwind를 쓸 때 이런 class를 자주 만나게 됩니다.

 

<div class="flex justify-center items-center">

 

 

<div class="grid grid-cols-4 gap-6">

 

그런데 Flex/Grid 개념을 모르면 이 class들이 그냥 외워야 하는 주문처럼 느껴집니다.

반대로 CSS Flex/Grid를 알고 있으면:

flex = display: flex
justify-center = justify-content: center
items-center = align-items: center
grid = display: grid
grid-cols-4 = 4열 grid
gap-6 = 요소 사이 간격

 

이렇게 바로 이해됩니다.

그래서 추천 순서가 이렇습니다.

HTML 기본 구조
→ CSS 기본 속성
→ Box Model
→ Flex
→ Grid
→ 반응형 CSS
→ Tailwind

 

Tailwind는 결국 CSS를 쉽게 쓰는 방식이라서, CSS의 핵심 배치 개념인 Flex와 Grid를 먼저 알면 훨씬 빨리 익힐 수 있습니다.

---

6. 실전에서의 감각

대부분의 웹페이지는 Flex와 Grid를 섞어서 만듭니다.

예를 들어 게시판 페이지를 만든다고 하면:

전체 페이지 구조: Grid
상단 메뉴 배치: Flex
검색창 + 버튼: Flex
게시글 카드 목록: Grid
카드 안의 작성자/날짜 정렬: Flex

 

즉 둘 중 하나만 쓰는 게 아니라, 역할이 다릅니다.

정리하면:

작은 요소 안쪽 정렬 → Flex
큰 화면 영역 나누기 → Grid

 

이렇게 기억하면 됩니다.

 

 

By. ChatGPT