[tailwindcss] 테일윈드란?

.m-1{margin:10px}
.m-2{margin:20px}

.text-sm{font-size:12px}
.text-lg{font-size:18px}

자주 쓰는 스타일을 클래스명으로 만들어 사용하는 utility class

 

utility class 여러 개 모아놓은 라이브러리이다.

 

Bootstrap과의 차이점

bootstrap도 완성된 Component를 많이 제공하고 Utility class를 제공한다. tailwindcss가 더 많다. 그래서 tailwind가 용량은 크지만 build시 안 쓰는 스타일은 제거해준다.

Material UI와 차이점

mui는 미리 만들어진 컴포넌트들을 이용하는 느낌이라면 tailwind는 className으로 빠르게 커스텀하는 느낌이다.

 

Tailwind단점

자주 쓰는 클래스명을 외우고 있어야한다. -> 직관적이라 빠르게 적응할 수 있다.

클래스명이 길어져 가독성이 안좋다. -> 클래스를 새로 만들어 넣으면 된다.

스타일 재사용이 어렵다. -> 컴포넌트로 사용하면 된다.

Tailwind장점

반응형도 빠르게 작성할 수 있다. 다양한 utility class를 제공한다.

작업 속도가 엄청엄청 빨라진다.

 

결론

styled-components와 함께 사용하면 엄청난 css가 될 것이다.

++  twin.macro를 사용해  Styled-Components안에서 tailwindcss를 사용할 수 있다.