tailwind css 설치하기

TailwindCSS란

Utility-first를 지향하는 CSS 프레임워크이다. Utility-first는 CSS 개발론 중에 하나인데, CSS의 속성별로 미리 스타일리에 필요한 속성들을 정의하여, class를 HTML에 하나씩 추가하는 방법으로 스타일링을 한다고 생각하면 된다.

CSS에서 흔히 접할 수 있는 방법이 BEM이라는 개발론인데, Block Element Modifier(기능) 순으로 네이밍을 하는 방법이다.

.container__button--title {
  font-size: 2rem;
  color: #fff;
}

그렇다면 Utility-first는 어떻게 정의될까? 예시를 들어보겠다.

.text-xl {
  font-size: 2rem;
}
.text-white {
  color: #fff;
}

CSS를 이런 방식으로 정의하여, HTML Element에 class를 하나씩 지정하는 것이다.

Utility-first로 CSS를 작성하면 아래와 같은 장점을 가질 수 있다.

• 컴포넌트를 작성할 때 CSS 클래스 이름을 고민할 필요가 없다.
• 컴포넌트의 수가 늘어나도 CSS 파일의 사이즈는 크게 늘어나지 않는다.
• 복잡한 구조의 클래스와 태그 셀렉터를 사용하지 않아 의존성이 낮기에 버그 발생 가능성이 낮고 수정이 쉽다.

물론 요소의 클래스 이름의 길이가 길어지는 단점도 있지만, 위와 같은 장점들과 기존 정의된 디자인 시스템을 기반으로 클래스가 적용되기에, 컬러, 사이즈, 간격 같은 요소에서 일관성을 유지할 수 있다.

프로젝트에 적용하기

이제 tailwind를 프로젝트에 설정해 보자.
프로젝트를 열고, 모듈을 설치한다.

npm i -D tailwindcss postcss autoprefixer

그리고 tailwindcss의 초기 config 파일을 만들어주는 명령어를 입력하자.

npx tailwindcss init -p

이후 프로젝트 전체에 적용될(global) CSS 파일에 다음과 같이 작성하자.

@tailwind base;
@tailwind components;
@tailwind utilities;

_{참고: https://tailwindcss.com/docs/configuration}