intro
올해 상반기에 싸피 프로젝트를 할 때, tailwindcss를 써보는건 어떨까 고민했었는데, 내부 사정이 있어서 설치만 해보고 사용을 못 했다. 이번에 블로그를 직접 만들기로 계획하면서 다시 한번 배워보기로 결심했다. 익숙해지면 windi css도 같이 공부해볼 생각이다.
why
단도직입적으로 tailwind는 왜 쓸까? 공식문서를 참조하자면 아래의 장점들이 있다.
1. Utility-First Fundamentals
2. Responsive Design
3. Hover, Focus, and Other States
4. Dark Mode
5. Reusing Styles
6. Adding Custom Styles
7. Functions & Directives
이 장점들을 전부 설명할 것은 아니지만 핵심적인 부분이라 일단 다 나열해봤다.
Utility-First Fundamentals
vue 개발자들은 평소에 vue 파일에서 태그들의 스타일을 입히기 위해 클래스 이름을 짓고 스타일 태그에서 이들을 정의했다. 추상적인 이름을 짓는 것도 고민거리고, template과 style 영역이 분리 되어있기 때문에 스크롤을 위아래로 번갈아 이동해야하는 불편함이 있다. 이게 싫으면 css파일을 완전히 분리해서 import할 수 밖에 없는데 이 마저도 번거롭다.
tailwind는 미리 기능이 지정된 클래스들을 제공해주기 때문에 스타일 태그에 따로 클래스를 정의해줄 필요가 없다. html 태그의 클래스에 미리 지정된 클래스들을 욱여 넣기만 하면 더 이상 스타일 태그를 사용할 필요가 없다는게 핵심. 스타일 영역을 일절 쓰지 않는 것은 아니지만 최소한 css가 비대해지는 것을 막을 수는 있다.
css만을 사용해서 버튼을 만들 경우 보통은 아래와 같이 구현한다. 우선, 스타일을 입힐 태그에 비슷한 이름들의 클래스들을 적어준다. 기능 상 이름이 비슷해질 수 밖에 없기에 작업하는데 헷갈린다. 또, 각 클래스마다 스타일을 입히기 위해서 css를 적어줘야하는데 스타일 영역과 템플릿 영역 사이에 스크립트 영역이 있어서 한번에 보기 불편하다. scss와 같은 전처리기를 사용하면 코드량은 줄어들겠지만, 여전히 불편함은 해소가 되지 않는다.
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>tailwind는 미리 스타일이 지정된 클래스들을 제공해줌으로써, 사용자가 스타일 영역을 최소한으로 작업하는 것을 돕는다. 또한 해당 요소가 어떤 스타일이 적용될 지 바로 알 수 있다.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>그런데 이러한 방식의 작업이 완전해보이지 않는다. 예를 들면,
1. 인라인이랑 뭐가 다른거지?
2. 클래스가 너무 지저분하지 않나?
같은 질문들이 떠오르게 된다.
공식 문서에서는 이에 대해, tailwind는 인라인과 달리 미리 정의해둔 디자인 시스템을 사용할 수 있고 media query가 되지 않는 인라인과 달리 반응형도 가능하다고 설명한다. 또한 hover나 focus와 같은 상태들을 변수처럼 사용이 가능하다고 주장한다.
두 번째 질문을 해결하기 위해 공식문서에서는 두 가지 방법을 제시하고 있다. 아래처럼 reusable한 컴포넌트로 따로 빼든지,
<!-- PrimaryButton.vue -->
<template>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
<slot/>
</button>
</template>@apply를 사용해서 아래와 같이 축약을 해버리면 된다고 한다.
<!-- Using utilities -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-sky-500 hover:bg-sky-700">
Save changes
</button>
<!-- Extracting classes using @apply -->
<button class="btn btn-sky">
Button
</button>
<style>
.btn {
@apply py-2 px-4 font-semibold rounded-lg shadow-lg;
}
.btn-sky {
@apply text-white bg-sky-500 hover:bg-sky-700;
}
</style>Responsive Design
웹을 반응형으로 구현하기 위해서 css에 미디어 쿼리를 지정해서 스타일을 입히는데 scss와 같은 전처리기를 사용하더라도 코드가 길어지는 문제가 있다. tailwind는 좀 더 간편한 사용을 위해서 브레이크 포인트용 prefix를 제공한다. sm, md와 같은 브레이크 포인트 + : + utility 클래스 순으로 붙이면 해당 브레이크 포인트를 넘긴 시점에서 디자인이 적용된다. 예를 들면, md:bg-red-400은 화면 크기가 미들 사이즈를 넘길 경우 백그라운드 색을 빨간색(400)으로 적용한다는 뜻이다. 브레이크 포인트의 경계값은 아래의 이미지처럼 미리 지정된 값이며, tailwind.config.js를 통해 사용자가 직접 커스텀할 수 있다. 참고로, tailwind는 모바일을 우선적으로 적용한다.
