Table of Contents
시작하기 #
Tailwind는 최근 웹 개발 분야에서 상당히 인기를 끌고 있는 Utility-First CSS의 원칙을 가진 차세대 CSS 프레임워크이다. Tailwind에 대해 알아보기 전 간단하게 Utility-First CSS에 대해 간단히 살펴보자.
Utility-First란? #
웹 개발에서 스타일링에 접근하는 새로운 방식 중 하나로, 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링이다.
Utility-First가 생소하게 느껴질 수도 있지만, 사실 Utility-First는 완전히 새로운 개념은 아니다.
우리가 흔히 웹 개발을 하면서 널리 사용 중인 라이브러리 중 Bootstrap이 이 개념을 기반으로 제작되었다. 그렇다면 이제부터 Tailwind에 대해 자세하게 알아보자.
Tailwind란? #
Tailwind는 앞서 말했듯이 Utility-First 컨셉을 가진 CSS 프레임워크이다.
쉽게 말하자면, 다양한 유틸리티 클래스를 활용하여 추가적인 CSS 코드 작성 없이 단순히 HTML 요소의 class 속성에 설정해주는 것만으로도 스타일링이 가능하게 된다.
기존 css 프레임워크(Bootstrap)와 Tailwind 비교 #
부트스트랩은 class를 부여하는 방식으로 스타일을 적용하는 반면, Tailwind는 각 class가 담당할 스타일을 미리 정의하고 필요한 class 들을 조합해서 사용한다.
-
BootStrap을 이용한 스타일링
<div class="card-body"> <h1 class="card-title pricing-card-title">$29 <span class="text-muted">/ mo</span></h1> <ul class="list-unstyled"> <li>30 users</li> <li>15 GB</li> </ul> <button type="button" class="btn btn-primary">Buy</button> </div> -
Tailwind를 이용한 스타일링
<div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto"> <h1 class="text-lg leading-6 font-medium text-gray-900">$20 <span class="text-sm">/ mo</span></h1> <ul class="mt-6 space-y-4"> <li class="flex space-x-3 text-sm text-gray-500">30 users</li> <li class="flex space-x-3 text-sm text-gray-500">15 GB</li> </ul> <button type="button" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2">Buy</button> </div>
Tailwind 장점 #
-
Utility-First의 편리함과 빠른 개발
Utility-First 컨셉은 Tailwind의 메인 컨셉이자 가장 큰 장점이다.
Tailwind를 사용하면 스타일 코드도 HTML 코드 안에 있어서 HTML과 CSS 파일을 별도로 관리할 필요가 없다. 또한, 원하는 태그의 스타일을 변경하기 위해 클래스 명을 검색해가며 일일이 필요한 CSS 코드를 찾을 필요도 없어지며 스타일을 빠르게 적용하고 웹 페이지 레이아웃을 신속하게 구축할 수 있다. -
클래스 이름 추상화
마크업을 하다 보면 랩핑하는 태그의 클래스 명을 고민하는 일이 많은데 Tailwind를 사용하면 랩핑 태그의 클래스 명을 사용할 일이 거의 없으므로 container, wrapper, inner-wrapper와 같은 클래스 명을 고민하지 않아도 된다. -
재사용성
Tailwind는 유틸리티 클래스를 사용하므로 일관된 디자인을 적용하고 수정하기가 용이하며, 스타일 속성값만 변경하여 디자인을 조정할 수 있다. 또한, 반복되는 스타일은 컴포넌트 추상화, 클래스 추상화를 통해서 재사용이 가능하다. -
반응형 디자인
기본적으로 제공되는 다양한 'Break Point'를 활용하여 복잡한 반응형 디자인도 쉽게 구현할 수 있으며, 다양한 화면 크기에 맞게 스타일을 적용할 수 있다.속성 설명 'sm'(Small) 작은 화면 크기를 대상으로 하는 Break Point 'md'(Medium) 중간 크기의 화면을 대상으로 하는 Break Point 'lg'(Large) 큰 화면을 대상으로 하는 Break Point 'xl'(Extra Large) 아주 큰 화면 크기를 대상으로 하는 Break Point 이러한 Breakpoints를 사용하면 클래스 이름에 Breakpoint 접두어를 추가하여 특정 화면 크기에서만 스타일을 적용할 수 있다.
예를 들어, "md:text-center" 클래스는 중간 크기의 화면에서 텍스트를 가운데 정렬하는 스타일을 적용하고, "lg:hidden" 클래스는 큰 화면에서 요소를 숨김 처리할 수 있다. -
자유로운 커스터마이즈
- Tailwind는 프로젝트에 맞게 클래스 이름, 색상, 여백, 글꼴, 그리드 등의 스타일 관련 설정을 변경할 수 있는 구성 파일을 제공한다. 이 구성 파일을 사용하여 기본 스타일 값을 수정하거나 사용자 지정 클래스를 추가할 수 있다.
- Sass나 Less와 같은 CSS 전처리기를 사용하여 변수를 정의하고, 스타일 확장을 수행할 수 있다. 이를 통해 색상, 폰트, 여백 및 그림자와 같은 스타일 속성을 사용자 정의하고 확장할 수 있다.
- 플러그인 시스템을 제공하여 다양한 확장 기능을 통해 디자인 시스템을 확장하거나 필요한 스타일 패턴을 추가할 수 있다.
- 조건부 클래스를 사용하여 특정 조건에 따라 스타일을 다르게 적용할 수 있다. 이를 활용하여 다크 모드와 같은 테마 전환 기능을 구현할 수 있다.
- 빌드 프로세스 중에 CSS를 메모화하여 최종 번들 크기를 줄이고 렌더링 속도를 향상한다.
이러한 기능을 통해 Tailwind는 기본 스타일 값을 수정하는 방식이기에 디자인 일관성을 유지하며 프로젝트의 요구사항에 맞게 원하는 스타일을 자유롭게 적용할 수 있으며, 디자인 시스템과 다크 모드와 같은 고급 기능을 구현하기가 쉬워진다.
-
활발한 커뮤니티
또한, Tailwind는 공식 커뮤니티와 다양한 확장 기능을 지원하는 생태계를 가지고 있어 확장성이 뛰어나다는 장점을 가지고 있다.
Tailwind 단점 #
-
빌드 단계의 필요성
원래 Tailwind는 가져올 수 있는 스타일 시트에 불과했지만, 최신 버전에서는 CSS를 생성하기 위해 빌드 프로세스를 실행해야 한다. 이는 웹 페이지를 만드는 과정에 약간의 추가 오버헤드가 있음을 의미한다. 만약, 프론트엔드의 빌드 프로세스를 잘 모르는 경우, 새로운 개발자에게 엄청난 복잡성을 가중할 수 있다.
다행히 Tailwind는 많은 프론트엔드 프레임워크에서 사용하는 Node.js 기반의 빌드 도구(예: Webpack, Parcel, Gulp)에 잘 통합되어 있으며, Tailwind CLI를 사용하면 매우 쉽게 사용할 수 있다. -
러닝 커브와 초기 설정의 복잡성
Tailwind CSS의 초기 학습 곡선은 사용자가 많은 클래스 명을 익혀야 한다는 점으로 인해 일부 사용자들에게는 번거로울 수 있다. 각각의 클래스는 스타일 속성과 속성값을 표현하는데, 일부 사용자들은 처음에는 이러한 클래스 명을 외워야 하거나 문서를 자주 참고해야 할 수 있다.
그러나 Tailwind CSS의 클래스명은 해당하는 CSS 속성이나 값을 표현하기 위해 직관적으로 작성되었기 때문에, 기존의 CSS 속성과 유사한 이름을 가지고 있다. 이에 따라 많은 사용자가 클래스 명에 빠르게 익숙해지며, 개발 과정에서 더 쉽게 기능을 찾고 적용할 수 있다.
또한, 많은 코드 편집기와 IDE에서는 Tailwind CSS를 지원하고 IntelliSense(인텔리센스)와 같은 자동 완성 기능 플러그인을 제공하여 클래스 명을 더 쉽게 입력하고 사용할 수 있도록 도와준다. -
가시성 부족과 코드의 복잡성
Tailwind는 코드의 직관성은 좋으나 가시성이 떨어진다.<div class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">위의 코드를 봤을 때 클래스 이름을 통해 배경색, 모서리 둥글게, 여백 및 다크 모드 스타일 등이 어떻게 보일지 유추할 수 있지만 코드가 복잡해 가시성이 떨어지는 단점이 있다.
이러한 점을 극복하기 위해 Tailwind는 Headwind와 같은 플로그인을 제공하는데, Headwind는 클래스 이름을 정렬하여 가독성을 향상하는 도구로, 클래스를 알파벳순이나 논리적으로 정리하여 코드의 가시성을 높여준다. -
파일 크기
Tailwind CSS는 많은 유틸리티 클래스를 포함하고 있으므로 사용하지 않는 클래스들도 모두 번들에 포함되어 전체 CSS 파일 크기가 크다는 단점이 있다.
하지만, 클래스 명을 재사용하기 때문에 컴포넌트가 많아져도 CSS 파일 용량이 상대적으로 늘어나지 않는 장점은 있다.
또한, 2.1 버전부터 JIT(Just-In-Time Mode)모드를 지원하면서 변경된 소스 파일을 탐지하여 해당 클래스만 스타일시트에 추가할 수 있고, 사용하지 않는 유틸리티 CSS 파일을 제거하는 purge이나 Tree-shaking 옵션을 제공하고 있다.
Tailwind 사용하기 #
설치하기 #
Tailwind는 사용하는 프레임워크나 도구에 따라 설치 방법이 조금씩 다르다. 공식 문서에 따르면 Node.js를 설치하지 않고 사용하는 Tailwind CLI 방식과 webpack, Rollup, Vite 및 Parcel과 같은 빌드 도구와 통합하는 가장 원활한 방법인 PostCSS 플로그인으로 설치하는 방법이 있다.
그 외에도 Next.js, Vue3, Laravel, Nuxt.js, Create React App, Gatsby 등 프레임워크별 설치 가이드를 제공하고 있다.
이 글에서는 Tailwind CLI 활용하여 설치하는 방법과 PostCSS 플러그인으로 설치하는 방법을 소개할 것이다.
Tailwind CLI 활용 #
-
npm을 통해 tailwindcss 패키지를 설치한다.
npm install -D tailwindcss -
tailwind.config.js 파일을 생성한다.
npx tailwindcss init -
tailwind.config.js 파일에 Tailwind CSS를 사용할 템플릿이 존재하는 경로를 추가한다.
module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }; -
최상위 혹은 global.css 파일에 @tailwind 지시어들을 추가한다.
@tailwind base; @tailwind components; @tailwind utilities; -
CLI 도구를 실행하여 템플릿 파일에서 클래스를 검색하고 css를 빌드한다.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch -
HTML의 head 요소에 컴파일된 Tailwind CSS 파일을 추가하고, 스타일링 코드를 작성한다.
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/output.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
PostCSS 활용 #
-
npm으로 Tailwind CSS를 설치한다.
Tailwind CSS v2부터는 IE를 지원하지 않기 때문에 PostCSS의 autoprefixer 등을 함께 사용해야 한다.npm install -D tailwindcss postcss autoprefixer -
tailwind.config.js 파일을 생성한다.
npx tailwindcss init -
tailwind.config.js 파일에 tailwindcss와 autoprefixer를 추가한다.
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } -
tailwind.config.js 파일에 Tailwind CSS를 사용할 템플릿이 존재하는 경로를 추가한다.
module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } -
최상위 혹은 global.css 파일에 @tailwind 지시어들을 추가한다.
@tailwind base; @tailwind components; @tailwind utilities;만약, React나 Vue와 같이 CSS 파일을 JavaScript에 직접 import할 수 있는 경우에는 아래와 같이 JavaScript 코드에서 직접 임포트할 수도 있다.
import "tailwindcss/tailwind.css"; -
빌드를 시작한다.
npm run dev -
HTML head 요소에 컴파일된 css가 포함되어있는지 확인한 다음, Tailwind의 유틸리티 클래스를 사용하여 스타일링 한다.
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/main.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
기본 설정 커스텀하기 #
앞서 말했듯이 Tailwind CSS는 기본 스타일 값을 쉽게 커스텀할 수 있다. 아래와 같이 색상이나 특정 스타일, 변수 등 웬만한 것을 커스텀할 수 있고, 원한다면 JavaScript 코드를 활용할 수도 있다.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'yellow': '#ffc82c',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
}
구성 파일의 모든 섹션은 선택 사항이므로 변경하려는 항목만 지정하면 된다. 누락된 섹션은 Tailwind의 기본 구성으로 대체된다.
기본 스타일을 설정할 때 주의할 점은 실수로 기본 스타일 값을 오버라이딩 하지 않는 것이다. extend 객체 안에 넣어주지 않으면 기본 스타일 값이 덮어써지므로 아래와 같이 extend를 잘 활용해야 한다.
module.exports = {
...
theme: {
...
extend: {
colors: {
primary: '#8ffebf',
},
...
},
},
variants: {
extend: {
borderWidth: ['hover'],
},
},
마치며 #
개발자들 사이에서 Tailwind는 많은 논란을 빚고 있는 주제이다. Tailwind를 사용하고 좋아하는 사람들은 이 도구가 개발 효율성을 높이고 빠른 디자인 구현을 지원하며 유지 보수성이 뛰어나다고 주장하는 반면, Tailwind 사용을 싫어하는 사람들은 과도한 유틸리티 클래스 사용이 코드의 가독성을 해치고 대규모 프로젝트에서는 오히려 유지 보수성을 저하한다고 주장한다.
또한, CSS를 충분히 학습하지 않은 상태에서 Tailwind를 사용하면 개발자의 학습 곡선을 저하할 수 있다고 말한다.
그러나, Tailwind를 경험해본 결과 참고할 수 있는 문서도 많고 스타일링을 할 때 확실히 편하다고 느꼈다. Tailwind가 여전히 개발자들 사이에서 논쟁의 대상이지만, 주류 CSS 프레임워크로 자리를 잡는 지금, 아직 Tailwind를 경험하지 않은 분들에게는 한 번쯤은 시도해보는 것도 나쁘지 않을 것 같다.
