TailWindCSS는 유틸리티 우선의 CSS 프레임워크로, 개발자가 클래스 이름을 통해 직접 스타일을 HTML에 적용할 수 있게 해 준다. 이 접근 방식은 매우 모듈화되어 있으며, 디자인의 일관성을 유지하면서, 커스텀 디자인을 빠르게 구현할 수 있는 유연성을 제공한다.

여기서 유틸리티 클래스란 딱 한 가지 일만 하는 매우 적은 양의 CSS 코드를 담고 있는 클래스를 뜻한다. 보통 유틸리티 클래스를 단독으로 쓰기보다는 여러 개의 유틸리티 클래스를 함께 사용해야 의미있는 스타일링을 할 수 있다. TailWind를 사용하면 className 속성에 여러 유틸리티 클래스를 나열하게 된다.

Extensions - Tailwind CSS IntelliSense를 다운받는 것이 좋다!

TailWindCSS의 장단점

장점

스타일 시트를 오가는 컨텍스트 스위칭 사라짐
클래스 이름을 시맨틱하게 정하기 위해 고민해야 하는 시간도 줄일 수 있음.
컴포넌트 기반의 접근 방식을 통해 페이지를 수정할 때에도 CSS가 어떻게 적용되었는지 한눈에 파악할 수 있어 스타일 수정에 드는 시간 단축 가능.
커스터마이징과 반응형 디자인 구현이 간편해진다.
개발자가 더 빠르게 프로토타입을 만들고, 프로젝트의 스타일 가이드를 효율적으로 관리할 수 있게 해 준다.

단점

새로운 스타일을 적용할 때마다 CSS 클래스가 생성되어 결과적으로 CSS 파일의 크기가 커질 수 있으며, 이는 페이지 로딩 시간에 영향을 줄 수 있다.
TailWindCSS로 구현할 수 없는 특정 스타일에 대해서는 별도의 CSS 파일을 생성해야 하는데, 이는 프로젝트 내에서 일관성 있는 스타일링을 어렵게 만들 수 있다.

TailWindCSS 사용법

가장 기본적인 사용법은 HTML 태그 내 클래스에 직접 적용하는 것이다.

<div className = "w-12 h-10 text-white bg-gray-400"></div>

나중에 적용된 스타일이 이전 스타일을 덮어쓴다.

사이즈 설정

디스플레이 설정

폰트 설정

그림자 설정

방향, 크기 정리

색상 설정

반응형 사이트 설정

라운드 설정

여백 설정

상태 변화 설정

Arbitary values

Tailwind는 주로 사용하는 CSS를 모아둔 집합으로 보아도 무방하다. 크기를 나타내는 숫자에 무한한 값들이 올 수 있는데, TailWind에서는 주로 사용되는 숫자를 모아두고 이 중에서 사용할 수 있도록 해 준다.

한 예시로, fontSize는 xs, sm, base, lg, xl, 2xl, …. 9xl의 크기만 지원하고 있어서 이 중에서 선택해서 사용할 수 있다. 이 외의 값으로 크기를 설정해야 하는 경우는 TailWind에서는 대괄호로 감싸서 arbitary value를 입력할 수 있는 기능을 이용하면 된다. 예를 들어, px 단위로만 디자인 요구사항을 맞추어야 하는 경우 등에 사용한다.

<div className = "p-[8px] h-[35px] text-[12px] rounded-[5px]">