[CSS/Side Lib.] Tailwind CSS

오랜만에 React에서 사용할 수 있는 Style 라이브러리를 토이 프로젝트와 함께 공부해보고 사용한 경험을 정리하고자 글을 쓴다.

바로, Tailwind CSS(이하 테일윈드) 이다! 많은 사람들이 어느 정도 알고 있는 라이브러리일 것이라 생각한다.

 

테일윈드는 React뿐만 아니라, Vue, Svelte 등 다양한 프레임워크에서 활용할 수 있으며, 또한 요즘 각광받고 있는 CSS 라이브러리 중 하나이다.

 

npm trends 그래프를 가져와봤는데, 확실히 최근에 출시했음에도 불구하고 많은 Stars와 신속한 업데이트 속도를 보여주고 있다.

 

이렇듯, 테일윈드가 각광받고 있는 차별점은 아무래도 간단한 싱글라인 스타일이라고 생각한다. 

className 안에 테일윈드가 제공하는 속성 클래스들, 혹은 본인이 config로 설정한 값을 클래스화하여 스타일링 할 수 있다.

이 속성들은 자연스럽게 JSX구문에 들어가기 때문에, SCSS 등 처럼 별도의 스타일 파일을 관리할 필요성도 없어지게 된다.

 

하지만, 오히려 구식의 Customed-Styling 방식에 기반한 것 같은 느낌도 받았으며, CSS를 직접 작성하는 것이 아니라 미리 설정된 클래스를 가져다 쓰는 만큼 초반의 러닝커브가 상당히 높은 편이라는 생각이 들었다.

 

이렇게 핫한 테일윈드의 기본적인 사용방법, 그리고 토이 프로젝트를 진행하고 난 뒤 사용해본 소감을 2단계에 걸쳐 정리해볼 생각이다!

---

💙 Tailwind CSS 란?

2017년에 출시된, Utility-First(유틸리티 퍼스트) 를 지향하는 CSS 프레임워크다. (2021. 6월 기준 Tailwind CSS v2가 최신이다.)

부트스트랩과 유사하게 m-1, flex 등 미리 지정된 유틸리티 클래스를 활용해 스타일링 하는 방식으로, HTML 코드 내 인라인 스타일링을 한다는 특징이 존재한다.

그렇기에 새로운 클래스를 만들지 않고, 기존 제작된 클래스들을 조합하여 스타일링을 적용한다.

 

그렇다면, Tailwind CSS와 같은 유틸리티 퍼스트 방식의 CSS 프레임워크는 어떠한 장점들이 있을까?

• Utility-First 편리함과 신속성 : HTML 태그내에 인라인으로 작성할 수 있으며, CSS 영역으로 이동하거나 클래스명을 고민하는 리소스가 최소화된다.
• 일관된 디자인 : 스타일의 변수화 없이, 동일한 규격 및 색상 등을 적용할 수 있다.
• 자유로운 커스텀 : tailwind.config.js 를 통해 스타일의 기본값(default)을 커스텀할 수 있다.
• 로우레벨 스타일 : 각 유틸리티 클래스가 단일속성 단위로 제작되있기 때문에, 복합적인 스타일링이 가능하다.
• Javascript 코드와의 분리 : 별도의 CSS 파일 혹은 Styled-Components 와 같이 별도의 스타일 영역없이 스타일링을 진행한다.

 

테일윈드는 위와 같은 장점들이 있지만, 이는 유틸리티 퍼스트 CSS 중 우수한 부분들 위주이며, 고질적인 단점들도 존재한다.

• 길어지는 클래스명 : HTML 태그에 스타일들이 클래스로 나열되기 때문에 가독성과 비주얼이 좋지 않다.
• 초반 러닝커브 : 유틸리티 스타일들을 체득하는 초반 과정이 필요하다.
• Javascript 코드 사용불가 : Props, State 등에 따른 분기를 하기가 어렵다. style 이원화가 필수적이다.
• HTML과 CSS의 혼재 : HTML과 CSS가 마크업 영역에 공존하므로 관심사의 분리가 되지 않는다.

 

위와 같은 장/단점을 명심하고, 테일윈드를 프로젝트에 적용했던 과정부터 설명해보도록 하겠다.

 

 

 

💙 Tailwind CSS 적용하기

테일윈드는 PostCSS 기반으로 작성되었기 때문에, 컴파일 시 Sass와 같이 전용 전처리기가 필요하다.

이 때 커스텀된 내용들을 포함하기위해 postcss.config.js 및 Webpack 설정을 하기도 하지만, 이전에 사용한 Craco를 적용하는 방법도 있다.

* Craco 적용하기(절대경로, Less) : Less를 위해 사용했던 Craco 설치 및 적용 부분을 참고해보는 것도 좋다! (링크)

[Craco] Craco로 설정하기 (절대경로, Less)

 

 

1. 설치

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

테일윈드 및 의존성이 있는 라이브러리들을 설치해준다. 개발환경에서만 사용되도 무방하므로 -D 옵션을 달아주었다.

• tailwindcss : Tailwind CSS 코어 패키지
• postcss : Tailwind CSS를 순수 CSS로 변환해주는 전처리기 패키지
• autoprefixer : 브라우저별로 다르게 지원되는 벤더 prefix를 자동으로 넣어주는 패키지

 

2. Craco 설정

React의 CRA 환경에선 PostCSS의 Webpack 설정이 번거로운데, 이를 Craco 라이브러리를 통해 설정을 쉽게 Override 할 수 있다.

// 설치(terminal)
npm install @craco/craco

// 스크립트 수정 (package.json)
 {
    // ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
    },
  }

그리고, 루트 디렉토리에 craco.config.js 설정파일을 만들어준 뒤, 여기에 테일윈드 설정에 필요한 플러그인을 설정해준다.

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

 

3. Tailwind 설정파일 생성

npx tailwindcss init

위 명령어를 실행하면 루트에 tailwind.config.js 설정파일이 생성된다. 여기에, darkMode, theme 색상, variants(변수) 등을 설정할 수 있다.

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

특히, purge 속성은 사용되지 않는 유틸리티 클래스들을 제외하고 프로덕션 빌드해주는 최적화 설정이다.

대상 확장자를 아래와 같이 설정해주면 된다.

module.exports = {
   // purge 배열을 변경해 줍니다.
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   // ...
  }

 

4. Style 반영하기

마지막으로, tailwind를 CSS와 연동만 시켜주면 된다. 컴포넌트에 import된 CSS 파일에 적용하며, 통상 index.css 에 설정한다.

// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

이러면, 이제 React 컴포넌트에서 테일윈드의 유틸리티 클래스를 사용할 준비를 모두 마친것이다!

---

테일윈드의 기본적인 개념과 React CRA 환경에서의 설정방법을 알아보았다!

 

📎 출처

- [Tailwind CSS] Tailwind CSS 공식 페이지 : https://tailwindcss.com/docs/clear

- [Tailwind CSS 장,단점 및 사용법] wonny 님의 블로그 : https://wonny.space/writing/dev/hello-tailwind-css 

- [React + Tailwind CSS 설정] merrily-code 님의 블로그 :  https://merrily-code.tistory.com/151