20260203 Tailwind CSS 공부하기

들어가며

저번 주 금요일 유레카에서 종합 프로젝트 발표가 끝나고 꿀같은 휴식을 취하면서 포트폴리오 웹사이트를 어떤 기술로 만들지에 대해 고민해봤다. 결과적으로 Next를 사용하기로 했고 그에 맞는 Tailwind Css와 biome 등을 사용해보기로 했다. 종합 프로젝트 때 biome을 사용했었는데 괜찮았다고 느껴서 개인적으로 한번 더 사용해보기로 했다. 또 팀원분이 구축해줬던 개발 셋팅에서 좋았던 환경들을 따라 적용해보고 있다. 본격적으로 코딩을 하기 전에 Tailwind Css를 공부해보고 다음 유레카에 있을 최종융합프로젝트에도 적용해봐야겠다.

 

Tailwind CSS란?

Tailwind CSS는 빠르게 커스텀 UI를 만들 수 있도록 도와주는 유틸리티 퍼스트 CSS 프레임워크이다. 여기서 유틸리티 퍼스트란, '하나의 CSS 속성만 담당하는 클래스'를 조합해서 UI를 구성하는 개발 방식을 의미한다.

Tailwind의 핵심 기념 3가지

① Utility-first

• p-4, text-sm, bg-gray-100 같은 작은 단위 클래스
• 하나의 클래스 = 하나의 역할

② 조합으로 스타일링

<div className="flex items-center justify-between gap-4">

• 레이아웃, 간격, 정렬을 말하듯이 읽을 수 있음
• 이 div는 flex고 가운데 정렬이고 간격은 4다

③ 디자인 토큰 기반

 

• spacing, color, font size가 미리 정해진 스케일
• 디자인이 자연스럽게 통일됨

p-1, p-2, p-4, p-8
text-sm, text-base, text-lg

 

다른 CSS 방식과 다른 점

1. 전통적인 CSS 방식

• 의미 기반 클래스 네이밍
• CSS 파일과 JSX 파일이 분리됨
• 스타일 재사용은 클래스 이름으로 해결

문제점

클래스 이름 짓기 어렵고 CSS가 커질수록 어디서 쓰는지 추적하기 힘들다. 또한 안 쓰는 CSS가 쌓이기 쉽다.

2. CSS Module 방식

• 스코프 충돌 문제를 해결함
• 여전히 스타일과 마크업 분리
• 컴포넌트 단위로 CSS 관리

문제점

파일 이동이 잦고 디자인 수정 시 생산성이 떨어진다. 공통 스타일 관리가 애매함 -> 안전하지만 느린 방식

3. Styled-components / CSS-in-JS

• JS 안에서 CSS 작성
• props 기반 동적 스타일링 가능
• 컴포넌트와 스타일이 강하게 결합

문제점

번들 사이즈 증가, 런타임 비용, 스타일 로직이 복잡해질 수 있음

 

런타임 비용의 경우 vanilla-extract에 제로런타임의 장점을 가진 방식으로 사용해본 적이 있다.

 

요약

항목                                      Plain CSS                      CSS Module                  CSS-in-JS                Tailwind
					스타일 위치	CSS 파일	CSS 파일	JS 파일	JSX
네이밍 고민	많음	많음	적음	없음
일관성	낮음	보통	보통	높음
생산성	낮음	보통	보통	⭐⭐⭐⭐
런타임 비용	없음	없음	있음	없음

Tailwind 기본 설치 방법

npm install tailwindcss @tailwindcss/vite

설치 후 tailwind.config.js 파일과 postcss.config.js 파일이 생성된다.

필수 config 세팅

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

• content는 Tailwind CSS가 프로젝트 내 실제 사용 중인 클래스만 빌드 결과에 포함하도록 도와주는 옵션이다.
• 공식 문서에서도 이 설정이 잘못되면 필요한 클래스가 빌드 시 삭제될 수 있으니 주의하라고 강조하고 있다.

 

공부하고 글로 쓰며 느낀 점

Tailwind를 실제 내 프로젝트에 적용해보지 않아서 와닿지 않는 부분들이 있지만, 실제로 프로젝트에 적용해보면서 사용가능한 라이브러리로 만들고 싶고 vanilla-extract에 이어 새로운 걸 해본다는 설레임이 있다. jsx나 tsx 파일이 조금 지저분해질 것 같은 느낌이 들지만 하다보면 장단점을 발견하고 다양한 css를 사용할 수 있는 실력이될 것 같다.