Tailwind CSS 프로젝트에 도입하기 (특징 / 설치)

<도입 계기>

- 이전 팀 프로젝트를 두 회차 진행하며, CSS 스택 후보로 항상 Tailwind CSS 가 등장했었다. 그러나 항상 익숙한 styled-components에 밀려 채택되지 못했다. "다음번에는 도입해봐야지" 생각만 하다, 채용 과제를 진행하며 드디어 적용해보게 되었다. 이번 계기를 통해 tailwind를 사용해보고, 내가 직접 느낀 장단점까지 향후 정리해보고자 한다.

 

<Tailwind CSS의 특징>

- 도입에 앞서, Tailwind 공식 페이지에서 특징을 탐색해보았다.

 

- utility-first / 개발 속도 향상

 

- Rapidly build modern website without ever leaving your HTML

 -> 퍼블리싱 작업을 하면 class 나 기타 CSS 선택자를 신경쓰며 HTML 구조가 있는 파일과 CSS를 지정해주는 코드를 왔다갔다 해야 하는 경우가 흔하다. HTML을 떠나지 않고 바로 태그 class에 스타일링을 적용해줄 수 있으니, 개발자 측면에서의 시간효율이 좋아진다. (컨텍스트 스위칭을 안해도 됨)

 

- "Best practices" don't actually work. 

 -> 여기서 이야기하는 Best practice 란, 기존 마크업에 semantic class name을 설정하고, 이에 따라 CSS를 작성해두던 방식을 의미하는듯하다. Adam (CSS creator)은 이러한 시맨틱 클래스명이 CSS 유지보수를 더욱 어렵게 하고, 이를 없앤 Tailwind CSS가 개발을 용이하게 해준다는 장점을 어필하고 있다. (클래스 이름 고민 안해도 됨!)

 

이 외에도,

- the smallest final CSS bundle -> 빌드 시 사용하지 않는 CSS를 제거하여 CSS 번들 크기가 매우 작아짐.

- 손쉬운 반응형 CSS 작성 -> media query 대신, utility class 앞에 스크린 사이즈를 작성하여 다르게 적용해줄 수 있음.

- CSS 까지 함께 컴포넌트화하여 같은 코드를 반복 작성하는 것을 피함

- 컴포넌트화를 원하지 않을 때에는 @apply directive를 사용하여 CSS 코드 재사용 가능

- 다크모드 구현 용이함 (configuration file에서 다크모드 enable / class에 dark: 로 다크모드 시 전환할 색상 작성)

- 디자인 시스템 구현 용이함 (config파일에서 font, color pallete 설정)

- IDE extension으로 autocomplete 가능함

 

<Tailwind CSS 사용법>

공식 문서의 Getting Started 부분을 참고했다.

 

1. 설치하기

// 빌드 시에는 CSS 파일로 빌드되므로, devdependencies에 설치
npm install -D tailwindss

// tailwind.config.js 파일 생성
npx tailwindcss init

2. 설정하기

//tailwind.config.js 파일 내에서

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}


// font, color pallete 등 또한 여기에 지정해줄 수 있음

3. tailwind directives 추가하기

// src/input.css 
@tailwind base;
@tailwind components;
@tailwind utilities;

이렇게 각각의 tailwind layer에 @tailwind directive를 추가한다.

 

4. 빌드하기

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

터미널에 위의 명령어를 입력하여 tailwind 를 빌드해주면, dist 폴더가 생기고 그 안에 output.css 파일이 생성된다.

 

5. output.css 파일 연결하기

// index.html

<link href="/dist/output.css" rel="stylesheet">

html 파일에 stylesheet으로 output.css를 연결해준다.

 

이렇게 하면 utility class로 tailwind를 이용할 수 있게 된다!

 

이렇게 tailwind는 빌드 프로세스를 사용하여 CSS를 자동으로 생성하므로, 스타일시트에는 실제로 코드에 있는 유틸리티 클래스만 포함된다. CSS가 컴팩트하게 유지된다는 장점이 있다. 

 

 

+ 설치해준 extensions

- Tailwind CSS IntelliSense (autocomplete 적용)

- PostCSS Language Support (unknown at rule @tailwind css 해결 - 해당 오류의 또 다른 해결 방법은 여기 글 참고)

 

<앞으로 시도해볼 것>

우선 과제에 적용해보고, 향후 카카오 기술블로그에서 발견한 아래의 글을 읽으면서 tailwind 활용 능력을 늘리고 싶다! :)

특시, arbitrary values를 손쉽게 사용해줄 수 있는 tailwind.config.js는 꼭 적용해보기.

https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/

Tailwind CSS 사용기 | 카카오엔터테인먼트 FE 기술블로그