Tailwind CSS

개발

목록 보기

19/21

드림코딩 엘리의 css 트렌드 영상을 보고 Tailwind 라는 css 프레임워크를 알게 되었다. 댓글을 보니 사용자 수정이 편리하고 쓰는 사람들이 많은 것을 보고 나도 연습해보아야겠다고 생각, 이에 대해 알아보려고 한다!

Tailwind CSS 의 정의

Tailwind CSS는 유틸리티 퍼스트(Utility-first)를 지향하는 CSS 프레임워크다.

Tailwind CSS 장점

CSS를 작성하는 방법론 중 하나인 BEM은 마크업을 컴포넌트 단위로 구분하고 상태에 따라 스타일을 변경하는 식으로 재활용할 수 있도록 한다.
하지만 유틸리티를 우선하는 CSS 프레임워크는 클래스와 스타일을 새로 작성하지 않는다. 레이아웃, 포지션, 스페이스, 컬러, 폰트 등 스타일링에 필요한 대부분의 속성이 수많은 클래스로 사전 정의되어 있고, 사용자는 그 클래스들을 조합해서 사용한다.
Tailwind도 사전에 CSS들이 정의되어 있다는 점이 기존의 프레임워크들과 같지만 컴포넌트 형태가 아닌 클래스 형태로 정의되어 있다는 것이 다른 점

.inline-block {
	display: inline-block;
}
.rounded {
	border-radius: 0.25rem;
}
.p-4 {
	padding: 1rem;
}

<button className='inline-block rounded p-4'>
	Submit
</button>

bootsrap 을 사용했을 때, 사용자로써 원하는 디자인 수정이 편리하지 않았는데 그런 부분에서 편리할 듯 싶다.
확장 프로그램을 사용하면 에디터 안에서 유틸리티 클래스 자동완성을 제공하며 충돌하는 클래스도 체크해 준다.
그리고 단순히 기본 제공하는 클래스의 자동 완성만 지원하는 것이 아니라 사용자가 직접 설정한 클래스도 확장 프로그램이 인식하여 자동완성에 제공해 준다.