Tailwind CSS의 필요성
기존의 CSS-in-JS 라이브러리인 Styled-Components는 편리하지만, 성능 이슈와 클래스 네임 충돌 문제가 발생할 수 있음. Tailwind CSS는 이러한 복잡성을 줄이고, 보다 유연하고 직관적인 스타일링을 제공
Tailwind CSS의 주요 특징
전통적인 CSS 프레임워크와 비교할 때, Tailwind CSS는 유연성과 커스터마이징의 용이성에서 큰 강점을 가지고 있음
- 유틸리티 퍼스트
- 다양한 유틸리티 클래스를 제공하여, HTML 요소에 직접 클래스를 추가하는 방식으로 스타일링을 할 수 있음.
- 유틸리티 클래스는 특정 스타일 속성을 나타내는 짧고 간단한 **CSS 클래스**로, HTML 요소에 직접 적용하여 빠르고 쉽게 스타일링을 할 수 있음.Tailwind CSS는 이러한 유틸리티 클래스를 대량으로 제공하여, 별도의 CSS 작성 없이도 다양한 스타일을 구현할 수 있음. 예를 들어, **bg-blue-500**은 배경색을 파란색으로, **p-4**는 패딩을 설정하는 유틸리티 클래스.
- 별도의 CSS 파일을 작성할 필요 없이, HTML 파일만으로도 충분히 스타일링이 가능.
- 성능
- Tailwind CSS는 불필요한 스타일을 제거하고, 필요한 부분만 스타일을 적용하는 방식으로 성능 최적화가 잘 되어 있음.
- 사용하지 않는 CSS를 제거하여, 최종 빌드 파일 크기를 최소화할 수 있음.
- Purging CSS는 사용하지 않는 CSS를 제거하여 최종 빌드 파일 크기를 줄이는 과정을 의미. Tailwind CSS는 이를 자동으로 처리해줌.
- CSS 파일의 크기를 줄이고, 애플리케이션 로딩 속도를 개선 가능.
- React와의 통합
- React와 완벽하게 통합되어, Tailwind CSS의 유틸리티 클래스를 쉽게 사용 가능.
- Tailwind CSS는 React의 JSX 문법과 함께 사용할 수 있어, 스타일링이 매우 간편.
- 예시 코드 <div className="bg-blue-500 text-white p-4"> Hello, Tailwind CSS! </div>
- 클래스 네임 충돌 없이, 독립적인 컴포넌트 스타일링이 가능.
- 커스터마이징
- Tailwind CSS는 기본 설정을 쉽게 커스터마이징할 수 있어, 프로젝트에 맞는 디자인 시스템을 구축 가능.
- Tailwind 설정 파일(tailwind.config.js)을 통해 색상, 폰트, 스페이싱 등 다양한 설정을 커스터마이징 가능.
- module.exports = { theme: { extend: { colors: { primary: '#1DA1F2', }, }, }, };
- 다양한 설정 옵션을 제공하여, 프로젝트의 요구사항에 맞는 스타일링을 손쉽게 적용할 수 있음.
Tailwind CSS 설치
- yarn add tailwindcss postcss autoprefixer
- npx tailwindcss init -p
tailwind.config.js 변경
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
index.css 추가
@tailwind base;
@tailwind components;
@tailwind utilities;
적용 방법
tailwindcss 사이트에서 원하는 정보 검색 후 사용하면 됨.
적용전
<header
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0 20px",
backgroundColor: "lightgray",
}}
>
적용후
<header className="flex justify-between items-center px-20 bg-gray-300">
- Tailwind CSS: 유틸리티 클래스를 사용하여 간편하게 스타일링을 적용함.
- Styled-Components: JavaScript 파일 내에서 스타일을 정의하고, 컴포넌트에 직접 스타일을 적용함.
장단점 비교(정리)
- Tailwind CSS
- 장점: 유틸리티 클래스 기반으로 간편한 사용, 성능 최적화, 커스터마이징 용이
- 단점: 클래스 네임이 길어질 수 있음, 프로젝트 초기 설정 필요
- Styled-Components
- 장점: JavaScript 파일 내에서 스타일링 가능, 동적 스타일링 지원, 컴포넌트 기반 설계
- 단점: 초기 설정 및 학습 곡선, 스타일링 시 성능 이슈 발생 가능