반응형
Tailwind CSS
Tailwind CSS는 이름에서 부터 알 수 있듯이 CSS Framework 이다. 하지만 Bootstrap과 같은 다른 CSS 프레임 워크들과는 다르게 Tailwind CSS는 디자인의 커스터마이징이 아주 편하다.
또한 아래와 같은 장점들을 갖고 있다.
- 이미 제작된 유틸리티 클래스들 사용하여, 따로 직접 만들 필요가 없다
- 동적 클래스의 JLT 컴파일, 반응형 디자인 등 유용한 기능을 제공한다.
- 해당 프레임워크를 쉽게 커스터마이징 할 수 있다.
- 클레스 이름을 자동생성해주기에, 클레스 네이밍하는데 있어서 불필요한 업무량을 줄여준다.
기본 CSS 코드와 Tailwind를 사용한 코드비교
CSS코드
Tailwind 코드
코드가 놀랍도록 줄어들지만 class 이름이 가독성이 많이 떨어진다.(사실 클레스이름을 읽는게 거의 불가능할 정도).
하지만 @apply라는걸 사용하면 이러한 문제는 해결되는데 @apply는 다음과 같다.
@apply
Tailwind의 단점중 하나는 클래스명이 너무 길어진다는 것인데, 이러한 단점을 해결하기 위해 Tailwind에서 지원하는 기능중 하나인 @apply는 긴 클래스명을 간단하게 줄일 수 있다.
@apply를 사용하지 않는다면 input에 스타일을 적용할 때마다 위의 긴 코드를 복붙해 넣어야겠지만 @apply덕분에 input이라는 클래스명 하나만으로도 위의 긴 코드를 적용할 수 있다. 이처럼 @apply를 사용한다면 같은 스타일을 쉽게 재사용 할 수도 있고 개발자들은 저 길고 더러워 보이는 코드를 보지 않아도 된다는 장점을 가질 수 있다.
CSS 코드와 Tailwind를 비교했을 때 장단점은?
장점:
- 빠른 개발 속도:
- Tailwind CSS는 사전에 정의된 클래스를 사용하여 스타일을 적용하기 때문에 빠른 개발이 가능합니다. 클래스 이름을 기억하거나 일일이 작성할 필요 없이 코드를 빠르게 작성할 수 있습니다.
- 커스터마이징 용이:
- Tailwind CSS는 각 클래스에 대해 다양한 변형이나 옵션을 제공하므로 디자인을 쉽게 수정하고 조절할 수 있습니다. 커스터마이징이 용이하며 일관된 디자인 시스템을 만들기가 쉽습니다.
- 크기 경량화:
- Tailwind CSS는 프로젝트에 필요한 클래스만을 사용하여 최종 CSS 파일의 크기를 최소화할 수 있습니다. 이는 빠른 페이지 로딩 속도를 제공하고 대역폭을 절약할 수 있습니다.
- 프레임워크 독립성:
- Tailwind CSS는 기본 HTML과 함께 사용되기 때문에 특정 프레임워크에 종속되지 않습니다. 어떤 프레임워크든 사용 가능하며, 기존 프로젝트에도 쉽게 통합할 수 있습니다.
- 커뮤니티와 생태계:
- Tailwind CSS는 큰 커뮤니티와 풍부한 생태계를 가지고 있습니다. 다양한 플러그인, 확장 기능, 테마 등이 제공되어 개발자들 간의 지식 공유가 활발합니다.
단점:
- 학습 곡선과 초기 설정:
- Tailwind CSS의 문법은 처음에는 익숙하지 않을 수 있고, 일부 개발자들은 기존의 CSS 작성 습관을 버리기 어려울 수 있습니다. 또한 초기 설정이 필요하다는 점도 고려해야 합니다.
- HTML 코드의 가독성:
- Tailwind CSS를 사용하면 HTML 코드에 많은 클래스가 포함되어 있어 가독성이 떨어질 수 있습니다. 특히 작은 프로젝트나 간단한 마크업에서는 클래스가 많아질 수 있습니다.
- 커스텀 디자인의 어려움:
- Tailwind CSS는 주로 사전에 정의된 클래스를 사용하므로 완전히 커스텀하고 독창적인 디자인을 구현하는 데 제한이 있을 수 있습니다. 일부 개발자는 이러한 제약을 커스텀 디자인에 제한이라고 여길 수 있습니다.
- 번들 사이즈:
- Tailwind CSS를 모두 포함하는 경우, 번들 사이즈가 증가할 수 있습니다. 이는 더 큰 프로젝트에서 빌드 파일의 크기에 영향을 미칠 수 있습니다.