테일윈드는 Bootstrap 같은 프리 빌트인 (Pre Built-in) 컴포넌트 방식과 달리 유틸리티 기반(Utility-first) 개발 방식을 제공한다.
➡️ 즉, 완제품 형태가 아니라 필요한 부품을 조립하는 방식으로 사용자 입맛에 맞게 커스터마이징 할 수 있음
(각각의 기능을 단순하게)
특징
- 유틸리티 퍼스트(Utility-first) CSS Framework
- 사용자 입맛에 맞는 커스텀 디자인을 손쉽고 빠르게 구축
- 로우 레벨(Low-level) 프레임워크 (사전에 제작된 컴포넌트를 제공하지 않음)
- 레고 블록을 조립하듯 높은 자율도 (창의성, 재사용성, 생산성이 높음)
장점
- 작은 커스텀 CSS 파일 용량
- 뷰(View) 중심의 쉬운 디자인 변경
- 보다 향상된 개발 경험(Develop Experience)
- 모바일 퍼스트(Mobile-first) 디자인
: 작은 device부터 순서대로 디자인 (mobile --> tablet --> pc) - 빛나는 디자이너으로 빚어진 룩앤필(Look & Feel)
Tailwind vs. Bootstrap
- 사전에 제작된 컴포넌트를 제공하지 않음
- 다소 혼란스럽지만, 쉽게 해석 가능한 HTML 요소에 설정된
class속성 - 사용자 정의 구성(Config)을 통한 높은 커스터마이징
✨ 써본 결과
css로 스타일링을 하면서 클래스 이름 선정에 어려움을 많이 겪었는데 tailwind css를 사용하니 이름이 이미 정해져있어 이름을 따로 지을 필요가 없어서 좋았다!
