tailwind css의 장단점과 사용법

March 12, 2023

tailwind css

tailwind CSS는 HTML 파일, JavaScript 컴포넌트와 클래스네임을 위한 다른 템플릿 모두를 스캐닝해서 대응하는 스타일을 생성하고 그것들을 정적인 CSS 파일에 입력하며 동작한다.
tailwind는 제로 런타임으로 동작하며 빠르고, 유연하며 믿을 수 있다.

tailwind를 사용할 때의 장단점은 다음과 같다.

장점

CSS를 작성할 때 시간을 많이 절약할 수 있음
컴포넌트 생성과 관리가 쉬우며, 유지보수하기 편함
프로그래밍 언어와 같은 추상화 수준을 제공해 스타일을 빠르게 적용할 수 있어 코드의 길이가 줄고, 개발 시간이 절약됨
커스터마이징이 쉬워 원하는대로 디자인을 변경할 수 있음
반응형 디자인 구현도 쉬워짐

단점

새로운 스타일을 사용하면 CSS 클래스를 생성하게 되어 CSS 파일 크기가 커지고 페이지 로드 시간도 늘어날 수 있음
다른 개발자들과 협업할 경우 CSS파일에 충돌이 생겨 해결해야 함
의존성을 가져 더 많은 코드가 필요하게 됨
tailwind를 사용할 수 없는 스타일인 경우에 별도의 css 파일을 생성해야 하기 때문에 일관성 있는 스타일링이 어려울 수 있음

설치

tailwind CLI

Tailwind CSS를 처음부터 시작하는 가장 간단하고 빠른 방법은 Tailwind CLI로 시작하는 것이다. Tailwind CLI는 Node.js 설치 없이 사용하는 것도 가능하다.
그 외에 PostCSS를 사용해 설치하는 방법도 있다.

Tailwind CSS 설치하기

npm install -D tailwindcss
npm tailwindcss init

템플릿 경로 설정하기
- tailwind.config.js 파일 안에 있는 모든 템플릿 파일에 경로를 추가하기
- tailwind.config.js 파일에서는 커스텀 클래스와 색상, 폰트 등의 속성을 추가할 수 있음
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
CSS에 Tailwind directive 추가하기
- 메인 CSS 파일(src/input.css)의 Tailwind의 모든 layer에 @tailwind directive를 추가하라
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Tailwind CLI 빌드 프로세스 시작하기

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

HTML에서 Tailwind 사용 시작하기

컴파일된 CSS 파일을 <head> 에 추가하고 스타일링을 위해 Tailwind의 유틸리티 클래스를 사용하라

// src/index.html
<!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>

사용

별도의 css를 작성할 필요없이 클래스네임에 정의된 클래스네임을 추가하는 것만으로 스타일링이 가능함
marin-top은 mt-x , width는 w-x, background-color는 bg-xxx 등 약자 형태의 prefix를 가진 클래스네임을 추가해 사용 가능하다.
```
<div className="flex items-center">
	<p className="mt-8 w-full bg-white rounded-8">
		hi
	</p>
</div>
```

후기

새로 시작하는 프로젝트에서 tailwind를 사용하게 되었는데 별도의 css를 작성할 필요없이 클래스네임을 추가하는 것만으로 스타일링이 가능해서 편했다. 정의된 스타일도 꽤 직관적이라 이해하고 사용하기에 용이했다.

하지만 협업 시에 output.css 파일에서 충돌이 나는 것과 tailwind로 스타일링할 수 없는 경우에는 별도의 css 파일을 생성해야하는 것과 디자인시스템을 함께 사용할 때는 추가로 처리해줘야 하는 점 등이 번거로웠다.

이 부분은 좀 더 사용하고 개선해봐야할 것 같다.

Written by@jaeeun

I explain with words and code. I explain with words and code. I explain with words and code.