오늘은 Tailwind CSS를 사용해본 사용 후기에 관한 글을 작성해보고자 한다. 기본 설치과정과 세팅은 따로 다루지 않을 것으며 Tailwind CSS 공식 문서에 친철하게 각 개발 환경에 맞는 설치법을 지원하니 궁금하다면 (링크)를 클릭해 설치하길 권장한다.
Tailwind CSS란?
Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크. m-1 , flex 와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 태그 안에서 스타일링을 할 수 있다. HTML 태그 안에서 CSS를 정의하기 때문에 CSS 파일을 별도로 관리할 필요가 없으며 CSS 변수명 또한 정의할 필요가 없어 기존의 방식보다 훨씬 빠르게 작업할 수 있다는 큰 장점을 가지고 있다.
처음 들었을 땐 위와 같은 장점만 있으면 사용하기 너무 좋은거 아냐? 라고 생각했지만 그 장점이 곧 단점이 될 수도 있다는 사실을 알게 되었다.
Tailwind CSS 사용을 꺼려했던 이유
개인적으로 HTML 태그 내에서는 깔끔한 코드로 전체적인 구조를 파악하는것을 좋아하기에 아래 사진과 같이 HTML 태그 내에서 작업하는 방식이 편하다 하더라도 가독성을 너무 해치고 보기 불편하다 생각했다. 또한 협업시에 이러한 코드를 보게 될 것을 상상하면 끔찍하다 생각했으며 새로운 유틸리티 클래스 문법에 익숙해지고 이를 조합하여 원하는 스타일을 달성하는 방법을 이해해야 되는것도 진입 장벽중 하나였다.
그럼에도 불구하고 Tailwind CSS를 사용하게 된 이유
현제 진행중인 프로젝트에서는 전반적인 레이아웃과 어떤 스타일들을 적용해야 될지를 빠르게 테스트 해야 되는 환경이라 언제 바뀔 지 모르는 CSS 네이밍을 정의하며 개발하기에는 비효율적이라 느껴 Tailwind CSS를 사용하기로 결정하였다.
생각보다 괜찮은데??
그리고 실제로 사용해본 Tailwind CSS는 선입견을 가졌던 것 보다 괜찮았다. 일단 공식문서 자체에 유틸리티 클래스 문법들이 잘 설명이 되있어 기존 CSS 속성들과 유틸리티 클래스 문법들으 어떻게 다른지를 빠르게 파악하고 적용할 수 있었다.
또한 가독성 부분에서도 검색을 해보니 중복되는 속성들을 공통적으로 관리할 수 있다는 사실도 알게 되었다.
@layer를 통한 공통 속성 관리
버튼이나 카드 섹션같은 경우 여러 컴포넌트에 같은 스타일을 사용될 가능성이 매우 높다. 중복을 줄이기 위해선 @layer 문과 사용자 정의 CSS를 함께 사용해서 제어가 가능하다
/*공통 CSS 정의 파일 */
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn {
background-color: skyblue;
color: #fff;
padding: 15px;
}<button className="btn" type="button">
button
</button>@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply rounded border border-gray-300;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
/* ... */
}Custom Styles
Tailwind CSS 자체에서도 다양한 색상들을 지원하지만 보다 구체적인 서비스를 위해 맞는 색상요소 설정이 가능하다.
tailwind.config.js의 theme에 추가하여 사용할 수 있다. theme.extend.colors가 아닌 theme.colors에 추가하게 되면 기존 색상을 덮어쓰게 된다.
module.exports = {
theme: {
extend: {
colors: {
primary: '#ffc107',
secondary: '#2979ff',
success: '00c07f',
failure: 'ff6562',
},
fontSize: {
'15px': '15px',
},
},
},
};<button type="button" className="rounded-md bg-primary text-15px">
로그인
</button>Tailwind CSS를 사용하다 보니 다른 요소들과 결합하기에도 좋은 프레임워크인것 같다. 실 개발에 앞서 공통 속성 설계만 팀원들과 상의한 사용한다면 팀 프로젝트에서도 충분히 사용 가능하다는 생각이 들었다.
Reference: https://leesangwondev.vercel.app/tailwind-css-%EB%98%91%EB%98%91%ED%95%98%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://velog.io/@rmaomina/tailwindCSS-apply-rule
