tailwind
tailwind가 무엇인지, 사용법은 어떻게 되는지 그리고 사용후기 및 느낀점을 첨삭하겠습니다. ++ 이전에 사용해보았던 styled-components와 다른점
tailwind란?
Tailwind CSS는 모든 HTML 파일, JavaScript 구성 요소 및 클래스 이름에 대한 기타 템플릿을 스캔하고 해당 스타일을 생성한 다음 이를 정적 CSS 파일에 작성하는 방식으로 작동합니다. 런타임이 없고 빠르고 유연하며 안정적입니다.
기존에 써본적은 없었지만 bootstrap과 유사한 라이브러리라고 알고 있었다. 핵심 개념으로는 utility-first를 지향하고 있다. 제공되는 아주 직관적으로 미리 정의되어 있는 유틸리티 클래스를 class attribute에 넣어서 사용하는 방식
styled-components…
이전에 styled-components 포스팅 후 연속적으로 글을 쓰는 이유는 프로젝트 진행하며 이견이 나왔기 때문이다. 처음 프로젝트를 진행하면서 tailwind, styled-components 등등 여러 스타일 라이브러리가 후보에 있었다. 그중에 styled-componets를 고른 이유는 이전에 사용해 본적이 있었고, 이번 프로젝트를 마이그레이션 프로젝트 였기 때문에 기존 ejs, css, js를 next.js로 마이그레이션하는 것이 목표였다. 그래서 완전히 동일한 스타일링을 하기위해서는 tailwind 보다는 styeld-components가 맞을 것 같아 선정하였다. 하지만 사용하다 보니 위에서 말한 의견이 나왔고 tailwind가 생각한 것보다 러닝커브나 사용성 면에서 좋았고 ssr 하는 부분에서도 이슈가 없었기 때문에 그래서 이번 포스팅을 하게되었습니다. 바꾸면서 얻은 장점이나 느낀점을 떠들어 보겠습니다.
사용법
<button type="button" class="width-100 height-40 bg-blue-200 hover:bg-blue-400">Click!</button>
유틸리티 클래스를 사용하여 스타일링 할 수 있습니다. hover 효과가 필요할 때는 hover:~~ 이런식으로 사용이 가능하다.
<button type="button" class="top-[27px] text-[14px]">Click!</button>
유틸리티 클래스에 선언되어 있지 않은 임의값을 넣어야 할 경우에는 [] 대괄호 안에 넣어서 사용할수 있다.
사용자 커스텀
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
font-size: 30px;
}
}
특정 HTML 태그에 기본 스타일을 추가 할 수 있다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.items {
background-color: #ddd;
padding: 10px 30px;
border: 1px solid #ccc;
}
}
프로젝트 내에서 자주 사용되는 부분이 있을 경우 컴포넌트로 만들어 재사용할 수 있다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.flex-center{
display: flex;
justify-content: center;
align-items: center;
}
}
tailwind 기본 유틸리티에 포함되지 않지만 프로젝트 내에서 자주 사용되는 유틸리티 클래스를 추가할 수 있다.
장점
- 유틸리티 클래스를 사용함으로 css파일에 클래스명을 일일히 검색해 가며 수고할 필요가 없다.
- 클래스 명을 고민할 필요가 없다.
- 일관된 디자인을 얻을수 있다.
- 직관적은 유틸리티 클래스명을 가지고 있어, 다른 작업자가 유지보수 할때도 해독에 문제가 크게 없다.
단점
- 더렵혀진 코드 클래스가 줄줄히 많이 붙을 경우 가독성이 많이 떨어진다.
- css를 html에 선언하는 것이니 html이 커지는 부분은 어쩔수 없다.
- 러닝커브 완전히 손에 익숙해지기 위해서는 유틸리티 클래스 숙지가 필요하다.
- 동적 스타일링 불가
styled-components -> tailwind 변경하면서 얻은 이점
- 매번 새로운 컴포넌트를 만들어줄 필요가 없어짐(생산성)
- server side rendering에 대응하는 추가적인 세팅을 할 필요가 없어짐(세팅 시간 절약)
- 빌드하는 과정에서 사용된 스타일만으
- css 작성시 시간이 기존 보다 많이 절약되어, 전체적인 개발 시간이 짧아짐
- styled-components와는 다르게 build 시에 css 파일이 생성되므로 정적 css를 사용하여 ssr 환경에서 이점이 있음
다 라이브러리 다 장 단점이 존재하므로 프로젝트 특성에 따라 선택하면 될 것 같다. 이번 프로젝트에는 tailwind로~
++ 동적 스타일링 불가한 큰 단점 때문에 결국 tailwind + styled-components에 조합하여 사용할수 있는 라이브러리인 twin.macro를 도입하였다. 시간이 될때 twin.macro에 대한 포스팅도 하도록 하겠습니다!
