Tailwind CSS 개념 설명
Utility-First 철학을 지향하는 CSS 프레임워크. HTML 마크업 내부에서 사전 정의된 클래스명을 조합하여 스타일을 완성하는 방식. 별도의 CSS 파일을 생성하거나 클래스 선택자 이름을 고민할 필요 없이 태그 안에서 즉시 스타일링이 가능하여 개발 효율성을 극대화함.
사용 상황 예시
- 빠른 프로토타이핑: 디자인 시안을 코드로 구현할 때 별도의 스타일 선언 없이 즉각적인 확인 필요 시 사용.
- 디자인 시스템 일관성: 정해진 수치(Spacing, Color, Shadow)만을 사용하여 UI의 통일성을 유지해야 하는 프로젝트에 적합.
- 반응형 웹 구현:
sm:,md:,lg:접두사를 활용해 복잡한 미디어 쿼리 작성을 대체할 때 유용.
기본 문법 및 도구 설정
1. 유틸리티 클래스 활용
HTML class 속성에 필요한 기능을 직접 기입.
- Layout:
flex,grid,justify-center,items-center사용.
- Spacing:
p-4(padding),m-2(margin),space-x-4(요소 간 간격) 적용.
- Typography:
text-2xl,font-semibold,tracking-tight설정.
2. 개발 환경 최적화 (설치 및 확장)
- Tailwind CSS IntelliSense: VS Code 필수 확장 프로그램. 자동 완성 제안, Linting, 스타일 미리보기 기능 제공.
- Prettier Plugin: 클래스명 자동 정렬을 통한 코드 가독성 확보.
[Prettier 및 플러그인 설치]
Bash
npm i -D prettier prettier-plugin-tailwindcss[.prettierrc 설정 파일 작성]
JSON
{
"plugins": ["prettier-plugin-tailwindcss"]
}자주 하는 실수
- 문자열 조합을 통한 동적 클래스 생성:
text-${color}-500과 같이 클래스명을 동적으로 생성할 경우 빌드 타임에 스타일이 누락됨. 반드시 전체 클래스명(text-blue-500)을 그대로 작성하거나 객체 매핑 방식 사용 권장. - 클래스 비대화 방치: 한 태그에 수많은 클래스가 나열되어 가독성이 떨어지는 경우 발생. 반복되는 UI는 반드시 컴포넌트 단위로 추출하여 관리 필요.
- Purge CSS 설정 오류: 사용하지 않는 클래스를 제거하는 과정에서 필요한 스타일이 삭제되지 않도록
content경로 설정을 정확히 지정해야 함.
핵심 요약
- Utility-First 기반의 효율적인 클래스 조합형 프레임워크
- IntelliSense 및 Prettier 플러그인을 통한 표준화된 개발 환경 구축
- 동적 클래스 생성 지양 및 컴포넌트화를 통한 유지보수성 확보
참고
출처: 한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
