$$config title: [thml tool]테일윈드 keywords: - IT - ... $$ ## 테일윈드 # 테일윈드란? - Utility-First를 지향하는 CSS 프레임워크입니다. - CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 사용할 수 있게 됩니다. -> 스타일링에 필요한 대부분의 속성들이 클래스 형태로 사전에 정의되어 있고 사용자는 클래스들을 조합해서 사용하면 됩니다. # Utility-First - 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링 # 테일윈드 적용 전 ```js

ChitChat

You have a new message!

``` # 테일윈드 적용 후 ```js

ChitChat

You have a new message!

``` # 테일윈드 장점 - 1. 클래스의 이름을 고민하지 않아도 됩니다. - 2. 쉽게 반응형 페이지를 구현할 수 있도록 지원합니다 -> 기본적으로 제공하는 BreakPoint가 존재하기 때문에 복잡한 반응형 디자인도 쉽게 구현할 수 있습니다. - 3. 따로 커스터마이징이 가능합니다. -> 기본 정의된 테마를 확장할 수도 있고 새로운 속성을 추가할 수 있습니다. - 4. 반복되는 스타일은 컴포넌트 추상화, 클래스 추상화를 통해서 재사용 가능합니다. - 5. 공식문서가 매우 친절하고 학습 난이도가 낮습니다. - 6. 다크 모드 지원 # 테일윈드 단점 - 1. 코드의 직관성은 좋으나 가시성은 떨어집니다. -> div class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800" -> Headwind와 같은 플러그인( 정렬 기능 )을 활용해 가독성을 높일 수 있습니다. - 2. 미리 정의된 스타일 시트( CSS 파일 )의 용량이 매우 커집니다. -> 클래스명을 재사용하기 때문에 컴포넌트가 많아져도 CSS 파일 용량이 상대적으로 늘어나지 않는 장점은 있습니다. - 3. CSS 속성들의 우선순위 문제 -> Tailwind CSS는 클래스가 출현한 빈도 / 출현한 순서에 상관없이 정의한 순서에 따라 스타일을 구성합니다. -> twin.macro를 통해 class에 선언된 여러 클래스 중 뒤에 위치한 클래스가 최종적으로 적용시킬 수 있습니다. -> v3에서 아직 twin.macro 이슈가 존재합니다. ( 불안정 ) - 4. 특정 프리픽스는 모든 CSS 속성을 지원하지 않습니다. -> hover: / focus: 등 특정 프리픽스는 일부 속성만 사용 가능합니다. -> 모든 속성을 지원하기 위해서는 커스터마이징을 통해 추가 설정을 넣어주면 됩니다. - 5. 다른 CSS 프레임워크 처럼 완성된 스타일 / 컴포넌트를 손쉽게 제공하여 사용할 수는 없습니다. -> 하지만 본인이 필요한 것들만 사용하고 불필요한 부분을 제거하며 직접 구현의 의존도가 높을 경우 더 높은 효율성을 보장합니다. - 6. 분기처리를 하기위한 동적 스타일링을 하기위한 자바스크립트 변수 값 활용이 불가능 합니다.