선정 과정
팀원들 사이에 스프린트 기간 동안에 다양한 스타일 라이브러리 스택을 체험해보자는 의견이 모아졌다. 특히 별도의 css 파일을 만들 필요 없는 스택인 tailwind와 styled-component를 두고 많은 고민을 했었다. 그런데 styled-component는 next의 서버사이드 렌더링과 궁합이 좋지 않다는 의견을 봤어서 이 역시 멘토님께 고민을 나눴었고, 둘 중 tailwind를 더 추천해주셔서 tailwind를 채택하게 되었… 긴 하지만 선정 이유는 사실 그냥 써보고 싶어서가 가장 컸던 것 같다.
사용 후기
장점
tailwind는 뚱뚱한 클래스명 때문에 첫 인상이 그렇게 좋진 않았는데 쓰다보니까 너무 편해서 지금은 완전 tailwind 팬이 된 것 같다. 나는 기존에 scss module, css module을 통한 스타일링을 사용했었는데, 태그에 달 클래스 명 정하고, css 파일 열어서 클래스명 적고 스타일 입히고,, 불편한 줄 모르고 했던 이런 과정들이 그냥 ‘태그에 utility 중심 class명을 단다’ 로 간소화 되니 정말 편했다.
특히 반응형 짤 때 너무 편했다. mobile에서 특정 태그를 숨겨라!를 className = ‘sm:hidden’ 한 줄로 구현할 수 있다니, 파일을 이동하지 않아도 되니까 내가 반응형 구현을 위해 짰던 html 구조/논리를 잊지 않고 바로 css로 적용할 수 있다는 점도 좋았다.
‘뚱뚱하고 난잡한 클래스명’이라는 단점도 사용하기 전부터 알고 있었기 때문에 프로젝트 세팅 초기부터 tailwind 클래스명 정렬을 돕는 prettier plugin을 도입했었다. 확실히 팀원들간에 class명이 정렬 된다는 것 자체로 혼란을 줄여주었다고 생각한다.
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"],
...
}단점
하지만 개인적으로 느낀 단점도 있었다. style 디버깅이 까다로웠다는 점이다. 이전에 scss나 css를 사용할 때 ‘어? 여기가 왜 이렇게 스타일링 됐지?’ 하면 ‘개발자도구를 켜고 → 해당 태그를 선택 → 해당 태그를 선택하고 있는 class명을 확인 → 해당 클래스명을 스타일링하고있는 css 코드를 수정’ 의 흐름으로 디버깅을 했는데, tailwind utility class 명만 확인할 수 있기 때문에 이런 흐름의 디버깅이 어려웠다.
그리고 내가 세팅을 잘못 한건지는 모르겠지만 rem 단위를 사용할 때 px-[2.4rem] 방식으로 지정해야 했어서 불편했다. rem 단위로 styling 할 때 이것보다 좋은 방법이 있는지 좀 알아봐야겠다.
tailwind.config의 활용
폰트, 컬러, 브레이크포인트 등의 통일이 필요한 스타일 요소에 tailwind config를 활용하기도 헀다. figma 시안을 스타일링으로 옮길 때 편하게 할 수 있게 작성하려고 했다.
브레이크 포인트
screens: {
// => @media (max-width: 1119px) { ... }
md: { max: '1199px' }, // tablet
// => @media (max-width: 743px) { ... }
sm: { max: '743px' }, // mobile
},평소에 max-width를 썼어서 pc 우선 → 태블릿 스타일링시 md: , 모바일 스타일링 시 sm:으로 지정하게 했다.
폰트
fontSize: {
// <p class="text-12-400 ...">The quick brown fox ...</p> 처럼 사용
'10-400': [
'1rem',
{
fontWeight: '400',
},
],
//fontsize: 12px
'12-400': [
'1.2rem',
{
fontWeight: '400',
},
],
},크기와 굵기 정도를 묶어 하나의 클래스명으로 사용할 수 있게 설정해두었다. text 관련해서는 figma에서 font size와 weight를 순서대로 확인하고, text-10-400으로 한번에 설정해두는 것이 편할 것 같아서 이런 방식을 채택했다.
컬러
색상 역시 figma 시안에 어떻게 적혔는지를 먼저 보고 config를 작성했다. 아래처럼 색상이 black-4B4B4B 와 같이 지정되어 있었기 때문에 hexa 코드의 첫번째 글자만 따서 class명을 작성할 수 있도록 했다.
colors: {
// 예시) <p className="bg-gray-D">
black: {
0: '#000000',
1: '#171717',
3: '#333236',
4: '#4B4B4B',
},
gray: {
7: '#787486',
9: '#9FA6B2',
D: '#D9D9D9',
E: '#EEEEEE',
F: '#FAFAFA',
}
},결과적으로 우리의 디자인 시스템에서 위 타이포그래피를
text-18-500, text-black-3 으로 옮길 수 있게 되었다.
Tailwind 도입 시 유용한 팁
Tailwind CSS cheat sheet
이 css는 tailwind에서 어떻게 쓰지? 가 궁금할 때 봤던 사이트
🔗 Tailwind CSS Cheat Sheet
Tailwind CSS Intelisense
vs code 확장 프로그램, 클래스명 자동 완성을 도와줌
Prettier-plugin-tailwindcss
클래스명 자동 정렬을 돕는
prettierplugin
🔗 공식 리드미{ "plugins": ["prettier-plugin-tailwindcss"], ... }무려
tailwind공식 docs에서 추천해주는 플러그인이었다. 정말 편했다.
