📌
Tailwind CSS는 디자인 시스템을 직접 구축할 수 있도록 도와주는 CSS 프레임워크.
가볍고 사용이 간단한 프레임워크이며, 유틸리티 퍼스트(Utility-First) 방식을 사용함.
빠르고 쉽게 스타일을 적용할 수 있는 다양한 클래스를 제공함.
◼ 등장배경
- CSS 프레임워크의 중요성
- 웹 애플리케이션 규모가 커질수록 CSS 관리의 복잡도 급증함.
- 일관된 디자인 시스템 구축 및 유지보수 효율화를 위해 프레임워크 사용 필수적임.
- 기존 스타일링 방식의 한계
- 전통적인 CSS/SASS: 클래스 네임 명명 규칙(BEM 등) 준수가 어렵고, 프로젝트가 커질수록 CSS 파일 크기가 비대해짐.
- CSS-in-JS (Styled-Components 등): 런타임 성능 오버헤드 발생 가능 및 스타일 정의를 위해 끊임없이 새로운 컴포넌트를 생성해야 하는 번거로움 존재함.
- 클래스 네임 충돌: 전역 스타일 오염이나 의도치 않은 스타일 중복 적용 문제 빈번함.
→ 이러한 문제를 해결하기 위해 등장한 프레임워크가 Tailwind CSS
→ 유틸리티 클래스 기반 스타일링 지원
→ CSS 관리 단순화 가능
→ 빠르고 일관된 UI 스타일 구축 가능
◼ 주요특징
유틸리티 퍼스트
HTML 요소에 직접 클래스를 추가하는 방식 사용함.
유틸리티 클래스란?
특정 스타일 속성을 나타내는 짧고 간단한 CSS 클래스.
HTML만으로 스타일 적용 가능하며 별도의 CSS 파일 작성 필요 없음.
예시: bg-blue-500 → 배경색 파랑, p-4 → 패딩 설정
성능 최적화
Tailwind CSS는 필요한 스타일만 포함하는 방식으로 성능 최적화 지원.
- Purging CSS 기능을 통해 사용하지 않는 CSS를 자동 제거하여 최종 빌드 파일 크기를 최소화함.
- 애플리케이션 로딩 속도 개선 가능.
Purging CSS?
Purging CSS는 사용하지 않는 CSS를 제거하여 빌드 파일 크기를 줄이는 과정을 의미함.
Tailwind CSS는 빌드 과정에서 사용되지 않는 스타일을 자동으로 제거함.
React와의 통합
- React의
JSX문법과 완벽히 호환되어 스타일링이 간편함. - 클래스 네임 충돌 걱정 없이 독립적인 컴포넌트 스타일링 지원함.
<div className="bg-blue-500 text-white p-4">
Hello, Tailwind CSS!
</div>커스터마이징
- 전통적인 프레임워크 대비 유연성이 매우 높음.
tailwind.config.js설정을 통해 색상, 폰트, 스페이싱 등 프로젝트만의 디자인 시스템 구축 가능함.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#1DA1F2',
},
},
},
};◼ 설치 및 기본 사용법
설치
npm install tailwindcss@3.3.5 postcss autoprefixer
npx tailwindcss init -ptailwind.config.js 변경
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}기본 사용법
// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;적용 예시 (Header 컴포넌트)
// src/components/Header.jsx
// 변경 전
// ... 생략
<header
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0 20px",
backgroundColor: "lightgray",
}}
/>
// ... 생략
// 변경 후
// ... 생략
<header className="flex justify-between items-center px-5 bg-gray-200" />
// ... 생략◼ Tailwind CSS vs Styled-Components
설정 및 사용법 비교
Tailwind CSS
유틸리티 클래스를 사용하여 HTML에서 직접 스타일 적용.
<div className="bg-blue-500 text-white p-4">
Hello, Tailwind CSS!
</div>Styled-Components
JavaScript 파일에서 스타일 정의 후 컴포넌트에 적용.
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 1rem;
`;
function App() {
return <Button>Hello, Styled-Components!</Button>;
}장단점 비교
Tailwind CSS
장점
- 유틸리티 클래스 기반 빠른 스타일링 가능
- 사용하지 않는 CSS 제거로 성능 최적화 지원
- 높은 커스터마이징 가능
단점
- 클래스 네임 길어질 수 있음
- 초기 설정 필요
Styled-Components
장점
- JavaScript 파일에서 스타일 관리 가능
- 동적 스타일링 지원
- 컴포넌트 기반 스타일 구조 구성 가능
단점
- 초기 학습 필요
- 런타임 스타일 처리로 성능 이슈 발생 가능
