Tailwind CSS

tailwindcss 란?

UI 빌드를 빠르게 도와주는 utility-first CSS 프레임워크이다. 마크업 파일에 text-center, m-auto, flex-row 같은 클래스 네임을 이용하여 디자인을 빌드할 수 있다.

Bootstrap보다 나은 방법이 없을까?

나는 회사 프로젝트를 위해 Bootstrap을 사용했었는데, 별로 좋아하진 않았다. 가장 큰 이유로 기존에 제공되는 대로만 사용하면 디자인이 다 똑같기 때문에 css 오버라이드를 위해 많은 코드를 작성해야했기 때문이다.

처음 봤을 때는 요상해보인다

tailwind는 text-center, mx-auto 등의 클래스네임을 사용한다는 점에서 어떻게 보면 부트스트랩과 비슷한 점이 있다고 할 수 있다. 하지만 tailwind는 별도의 css파일 없이 오로지 마크업 파일에서 빌드하는 것을 추구한다. 예를 들면 이런식이다.

<nav className="relative px-4 py-4 flex justify-between items-center bg-white">
  <ul className="hidden w-full lg:flex flex-col md:flex-row md:max-w-3xl md:justify-around md:mx-auto lg:max-w-4xl list-none">
    <li className="nav-item text-center">
      <Link to="/">Home</Link>
    </li>
    <li className="nav-item text-center">
      <Link to="/about">About</Link>
    </li>
    <li className="nav-item text-center">
      <Link to="/contact">Contact</Link>
    </li>
  </ul>
</nav>

기존의 css 방법과도 다르다는 점을 알 수 있을 것이다.

솔직히 처음 봤을 때는 이 방법에 좀 회의감을 느끼기도 했다. 직관적으로 이해하기 쉬울까? 그런데 테스트겸 사이드 프로젝트에 한 번 사용해본 결과 나는 굉장히 마음에 들었다.

1. css 클래스명을 만들기 위해 머리를 쥐어짜지 않아도 된다.

개발자라면 모두 공감할거다. 좋은 변수, 함수 이름 짓기 정말 어렵다. 이미 자바스크립트에서 좋은 이름 짓기 에너지는 바닥난다. 그런데 css를 위해 container, section, content 등등.. 또 클래스 혹은 아이디 네임을 만들어야한다? 머리 아프다.

2. css 코드 관리가 쉽다

html에서 클래스명을 변경했을때는? css 파일에서도 변경해줘야한다. 간혹 더이상 사용하지 않는 css 코드가 구천을 떠도는 귀신마냥 파일 여기저기에 남아있는 경우가 있다. Tailwind는 마크업 파일에서 바로 빌드하므로 불필요한 클래스명은 없다.

3. UI component 제공

tailwindUI와 tailwindcomponents(무료)에서 UI 컴포넌트를 찾을 수 있다.

---

그럼 지금부터 React에 Tailwind를 사용하는 법을 알아보자

React 프로젝트에 Tailwind 설치하는 방법

Tailwind 공홈은 아주 친절하다. React, Vue, Next.js 등의 프레임워크/툴에 어떻게 Tailwind CSS를 설치할 수 있는지 가이드라인을 제시해준다.
나는 리액트 프로젝트에서 사용할 것이므로 Install Tailwind CSS with Create React App 을 살펴볼 것이다.

1. 리액트 프로젝트 생성

먼저 create-react-app 을 이용해서 새로운 리액트 프로젝트를 만들어준다.

npx create-react-app my-project
cd my-project

2. tailwind설치

그런 다음 npm을 이용하여 Tailwind를 설치한다.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3. craco

create-react-app은 PostCSS configuration을 기본적으로 오버라이드 할 수 없으므로 Tailwind를 구성하기 위해 craco를 설치해야한다.

npm install @craco/craco

CRACO란 Create React App Configuration Override의 약자로 create-react-app을 위한 configuration layer이다.

Craco를 설치한 후 package.json에서 scripts 부분에서 react-scripts 대신 craco를 사용하여 아래와 같이 변경해준다.

{
    // ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

그리고 프로젝트의 루트에 craco.config.js 파일을 생성하고 아래와 같이 작성한다.

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

4. tailwind configuration 파일 생성

tailwind.config.js 파일을 생성하기 위해 아래의 명령어를 실행해준다.

npx tailwindcss-cli@latest init

그러면 아래와 같은 파일이 저장된다.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

• darkMode
media - 유저의 시스템 설정에 따라 자동으로 적용. 즉 내가 Chrome에서 다크모드를 사용하고 있으면 자동으로 다크모드 UI를 보여준다.
  class - 시스템 설정에 의존하지 않고 다크모드 토글링을 지원하고 싶다면 사용.

• purge
  아래와 같이 모든 프로젝트의 template 파일 경로 array를 추가할 것을 권장한다. 그 이유는 production 과정에서 사용하지 않는 스타일들을 자동으로 제거해서 최종 빌드 사이즈를 최적화해주기 때문이다.

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

5. CSS 파일에 Tailwind 추가하기

이제 create-react-app이 자동으로 생성한 디폴트 파일인 ./src/index.css 파일에 아래와 같이 추가하면 모든 준비가 끝났다.

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