지금까지 사용해보았던 CSS, SASS, SCSS, Styled-components 외에 새로운 CSS를 프로젝트에 도입해보기로 했다.
Tailwind-css
tailwindcss는 utility-first를 개념으로 만들어진 CSS Framework이다.
utility-first
클래스에 유틸리티한 이름을 붙여 HTML내에서 개발하는 방식
즉, 클래스와 스타일을 새로 작성하지 않는다.
스타일링에 필요한 대부분의 속성이 사전 정의되어 있고, 사용자는 이것을 조합해 사용한다.
예를들면, css로 스타일링할 때는 먼저 html 요소에 각 클래스 이름을 지정하고,
<button className="button button--success">
<span className="button-label">Submit</span>
</button>해당하는 클래스마다 필요한 속성을 정의한다.
.button {
display: inline-block;
border-radius: 3px;
}
.button-label {
font-weight: bold;
}
.button--success {
color: #FFF;
border-color: #4A993E;
}
.button--danger {
color: #900;
}반면 Tailwind CSS는 아래와 같이 기존에 존재하는 클래스가 있고,
.inline-block {
display: inline-block;
}
.rounded {
border-radius: 0.25rem;
}
.p-4 {
padding: 1rem;
}이것을 원하는 요소에 조합해 클래스를 선언해주어 사용한다.
<button className='inline-block rounded p-4'>
Submit
</button>Tailwind CSS의 장점
1. 클래스 이름을 고민하지 않아도 된다.
tailwindCSS에서는 정해놓은 클래스 이름을 가져다 쓰면된다.
따라서 네이밍에 대한 고민을 하지 않아도 된다.
일반적인 css를 사용하면 클래스 네이밍과 클래스 네임 중복을 방지하는 데 꽤 고민을 해야 한다.
하지만 Tailwind CSS를 사용하면 의미있는 클래스 이름에 대한 고민과 네이밍 표기법을 생각하지 않고 스타일에만 집중할 수 있다.
2. 컴포넌트의 수가 늘어나도 CSS파일의 사이즈는 크게 늘어나지 않는다.
3. 버그 발생 가능성이 낮고 수정이 쉽다.
복잡한 구조의 클래스와 태그 셀렉터를 사용할 필요가 없기 때문이다.
4. 화면 분할/이동 없이 개발할 수 있다.
보통 html과 css화면을 동시에 띄워놓고 스타일링 작업을 하게 되는데, Tailwind CSS는
HTML내에서 작업을 하기 때문에 단일 화면에서 작업할 수 있다.
단점
1. 너무 많은 유틸리티 클래스를 일일히 찾아보기 어렵다.
이 고민은 보완해줄 확장 프로그램을 찾았다.
Tailwind CSS Intellisense
유틸리티로 사용할 클래스는 어마어마한 양일텐데, 이것을 모두 외울수는 없다.
또한 인라인으로 클래스 이름을 넣었다면 같은 유틸리티 클래스를 중복해 넣을 가능성도 다분하다.
이러한 문제를 해결하기 위해 도입할 수 있는 것이 Tailwind CSS Intellisense로, vs code에서 유틸리티 클래스를 자동완성해 보여주어 미리 보고 선택할 수 있다.
또한 사용자가 직접 설정한 클래스도 이 자동완성에 포함된다.
직접 클래스를 설정할 수 있다고?
아래와 같이 tailwind.config.js에서 테마를 확장하면 간격에 관련된 모든 유틸리티 클래스에 p-xs, p-sm처럼 suffix 형태로 추가된다.
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
xs: defaultTheme.spacing[2],
sm: defaultTheme.spacing[3],
}
}
}
}2. 클래스명이 길어져 가독성이 떨어진다.
@apply
tailwind에서 이러한 단점을 보완하기 위해 제공하는 기능으로,
@apply를 사용하면 클래스명 하나만으로도 긴 코드를 적용할 수 있다.
그 외... Base Style @layer
@layer를 사용하면 Tailwind에서 기본적으로 제공하는 Base Style과 components, utilities를 수정할 수 있다.
예를 들어 h1, h2의 기본 폰트 크기나 a 태그의 기본적인 색깔도 수정할 수 있다.
Reference
