유틸리티 클래스 기반 CSS 프레임워크

Tailwind CSS는 유틸리티 클래스(Utility Class)를 사용하여 UI를 구축하는 방식을 채택했다. 이는 CSS를 직접 작성하는 대신 미리 정의된 클래스를 HTML 요소에 적용하는 방식이다. 예를 들어, `text-center`, `p-4`, `bg-blue-500`과 같은 클래스를 조합하여 스타일을 적용한다. 이러한 방식은 CSS 파일의 크기를 줄이고(Reduce CSS File Size), 일관된 디자인을 유지하는 데 도움을 준다.

Tailwind CSS는 커스터마이징(Customizing)을 위한 다양한 옵션을 제공한다. `tailwind.config.js` 파일을 통해 색상, 간격, 폰트 등 디자인 시스템을 정의할 수 있다. 또한, 새로운 유틸리티 클래스(Utility Class)를 쉽게 추가할 수 있어 프로젝트의 요구 사항에 맞춰 프레임워크를 확장할 수 있다. 이러한 유연성은 디자인 시스템 구축(Design System Building)에 매우 유용하다.

Tailwind CSS는 PostCSS를 사용하여 CSS를 처리한다. 개발 환경에서는 모든 유틸리티 클래스를 포함하는 CSS 파일을 생성하지만, 프로덕션 환경에서는 사용된 클래스만 추출하여 최적화된 CSS 파일(Optimized CSS File)을 생성한다. 이러한 트리 쉐이킹(Tree Shaking)은 불필요한 스타일을 제거하여 페이지 로딩 속도를 향상시킨다. 또한, JIT(Just-In-Time) 컴파일러를 통해 빌드 속도를 개선한다.