현재 대부분의 프로젝트에서 TailwindCSS를 사용하고 있는데, 그 이유에 대해 설명하고자 한다
TailwindCSS란?
Tailwind CSS는 유틸리티-퍼스트(utility-first) 접근 방식을 제공하는 CSS 프레임워크로, 미리 정의된 클래스를 사용해 빠르고 효율적으로 스타일링을 할 수 있도록 도와준다.
이를 통해 CSS를 별도로 작성할 필요 없이 HTML 태그에 간단히 클래스를 추가하는 것만으로 원하는 스타일을 적용할 수 있게 된다.
TailwindCSS를 사용하는 이유
유틸리티-퍼스트 접근 방식
Tailwind CSS의 가장 큰 장점은 바로 유틸리티-퍼스트 접근 방식이다.
이러한 접근 방식은 CSS 파일을 직접 작성하지 않아도 되기 때문에 스타일링 속도를 크게 향상시킨다.
예를 들어, 일반적인 CSS로 스타일링할 때는 다음과 같이 작성한다.
.btn {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}하지만 Tailwind CSS를 사용하면 다음과 같이 간단히 표현이 가능하다.
<button class="bg-blue-500 text-white px-4 py-2 rounded">Button</button>모듈성 및 재사용성
Tailwind CSS는 높은 모듈성과 재사용성을 제공한다.
이는 각각의 유틸리티 클래스가 단일 책임을 가지고 있어, 다양한 조합을 통해 복잡한 스타일을 쉽게 구성할 수 있기 때문이다.
또한, 이러한 모듈성 덕분에 컴포넌트 기반의 개발이 용이해진다.
예를 들어, 카드 컴포넌트를 만든다고 할 때, Tailwind CSS를 사용하면 각 부분을 유틸리티 클래스로 쉽게 나눌 수 있다
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<div class="px-6 py-4">
<h1 class="font-bold text-xl text-gray-900 mb-2">Tailwind CSS</h1>
<p class="text-gray-700 text-base">Card Component</p>
</div>
</div>이처럼 재사용 가능한 컴포넌트를 작성하면 프로젝트 전반에 걸쳐 일관된 디자인을 유지할 수 있다.
높은 커스터마이징 가능성
Tailwind CSS는 높은 커스터마이징 가능성을 제공한다.
tailwind.config.js 파일을 통해 프로젝트의 요구에 맞게 색상, 간격, 폰트 등을 쉽게 조정할 수 있다.
예를 들어, 브랜드 색상을 추가하고 싶다면 다음과 같이 구성할 수 있다.
module.exports = {
theme: {
extend: {
colors: {
brand: {
light: '#3AB0FF',
DEFAULT: '#0099FF',
dark: '#0066CC',
},
},
},
},
}이렇게 커스터마이징하면 Tailwind CSS를 더욱 유연하게 사용할 수 있다.
반응형 디자인의 용이성
Tailwind CSS는 반응형 디자인을 쉽게 구현할 수 있도록 도와준다.
미디어 쿼리를 직접 작성할 필요 없이, 반응형 유틸리티 클래스를 사용하여 다양한 화면 크기에 맞춘 스타일을 적용할 수 있다
<div class="text-center md:text-left lg:text-right">
<p class="text-sm md:text-base lg:text-lg">Responsive Text</p>
</div>이렇게 작성하면 작은 화면에서는 중앙 정렬, 중간 크기 화면에서는 왼쪽 정렬, 큰 화면에서는 오른쪽 정렬이 적용된다
퍼징을 통한 성능 최적화
Tailwind CSS는 사용하지 않는 CSS를 제거하는 퍼징 기능을 통해 최종 CSS 파일의 크기를 최소화할 수 있다.
이는 웹 페이지 로딩 속도를 향상시키고, 사용자 경험을 개선하는 데 큰 도움이 된다.
퍼징 설정은 tailwind.config.js 파일에 다음과 같이 추가할 수 있다
module.exports = {
purge: ['./src/**/*.html', './src/**/*.js'],
}이렇게 하면 빌드 과정에서 실제로 사용된 클래스만 남기고, 나머지는 모두 제거된다.
JIT 모드 (Just-in-Time 모드)
Tailwind CSS는 JIT(Just-in-Time) 모드를 도입하여 성능을 더욱 향상시켰다.
JIT 모드는 실제로 사용된 클래스만을 즉시 생성하여 빌드 시간을 단축시키고, 개발 환경에서의 속도를 크게 개선해준다
JIT 모드를 활성화하려면 tailwind.config.js 파일에 다음과 같이 설정할 수 있다
module.exports = {
mode: 'jit',
purge: ['./src/**/*.html', './src/**/*.js'],
}TailwindCSS 단점
러닝커브
Tailwind CSS의 유틸리티-퍼스트 접근 방식은 처음 접하는 개발자들에게는 다소 생소할 수 있다.
기존의 CSS 작성 방식과는 다르기 때문에, 새로운 클래스를 외우고 익숙해지기까지 시간이 걸릴 수 있다.
HTML 파일의 크기 증가
유틸리티 클래스를 HTML에 직접 작성하기 때문에 HTML 파일의 크기가 커질 수 있다.
특정 프레임워크 의존성
Tailwind CSS는 매우 강력한 도구이지만, 특정 프로젝트나 팀에서는 다른 CSS 프레임워크와의 호환성 문제가 발생할 수 있다.
또한, Tailwind CSS에 너무 의존하게 되면 다른 스타일링 방식으로 전환하는 것이 어려울 수 있다.
그리고 HTML과 CSS의 분리가 명확하지 않다는 점도 유지보수성과 가독성 측면에선 단점이라 생각한다.
그렇지만 이러한 단점을 뛰어넘는 생산성 때문에 tailwindCSS를 계속 사용하게 된다
따봉 테일윈드css야 고마워~
참고 자료
- (번역) Tailwind CSS의 장점과 단점
https://ykss.netlify.app/translation/the_pros_and_cons_of_tailwindcss/
