A utility-first CSS framework
UI 개발자(or 클라이언트 개발자)가 UI 개발 작업을 더 쉽게 하기위해 사용하는 도구 대표적인 CSS framework 는 **Bootstrap, Semantic UI, W3.CSS, Bulma, materializecss** 등이 존재한다. 여기서 React 또는 Vue 에 친화적인 CSS Framework 도 존재한다.(**Vuetify, Quasar, Ant Design, MATERIAL-UI**) Tailwind CSS 도 CSS framework 에 속하며, 차이가 존재를 한다.
기존의 CSS framework 들은 대부분 미리 정해진 디자인의 component 들이 있고, 이를 사용하면서 조합을해나가는 방식이었다. 문제는 UI 개발자가 이를 원하는 형태로 커스텀을 하려고 하면 애로사항이 많았다.
위 UI를 작성하기 위해서는, 아래 미리 정해진 마크업과 스타일링을 따라야한다.
Tailwind CSS 는 저수준의 유틸리티 클래스를 제공하여, HTML 요소에 직접 적용한다.
<!-- tailwind CSS -->
<div class="bg-gray-100 round-xl p-8">Hello World</div>
그렇지만..
HTML 요소에 클래스를 나열하다보면 구문이 매우 길어지고 복잡해지는부분이 확인이 됩니다.
<!-- a lot of utility class names -->
<div class="sm:w-4 md:w-6 lg:w-10 xl:w-full sm:text-sm md:text-base lg:text-base xl:text-2xl flex-1 sm:flex-none bg-black sm:bg-white rounded-md sm:rounded-none">Hello World</div>