Tailwind CSS 사용법, 장점과 단점

개인적으로 tailwindcss에 대해 말하는 사람들이 늘기 시작했고 호기심이 생겼다. 그동안 미루고 미뤘던 개인 프로젝트에 적용 해보았는데 대만족을 했다. CSS를 사용하면서 느꼈던 문제들, 불편한 점들..아래와 같이 고민을 하고 있고 공감이 된다면, 많은 사람들이 tailwindcss를 통해 해결하길 바란다.

기존 CSS의 문제점

명시도(Specificity)

MDN에서 설명하는 명시도란 다음과 같다.

브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다.

CSS 선택자(selector)를 통해 명시도를 증가 시키고 우선순위를 결정한다. 여러 스타일들이 쌓이고, 새로운 스타일을 덮어쓰기 위해 더 복잡한 선택자를 사용하거나 깊이가 깊어지게 된다. 그러다 보면 !important와 같은 우선순위가 바뀌는 코드를 남발하는 나쁜 습관이 생길 수도 있다. 특히 남이 만들어놓은 스타일을 유지보수 할 때 빛을 발한다.(나는 티스토리의 CSS를 건들 때 !important를 남발했다.)

전역 스코프(Global Scope)

두번째로 CSS의 클래스 네이밍에 시간을 많이 쏟았다. 전역 스코프에 의해 클래스가 중복이 되면 안되고, 최대한 의미있게 작성해서 협업과 유지보수에 용이하도록 했다. 그래서 초반엔 네이밍 컨벤션인 BEM 표기법을 사용했었고, 깊이 문제와 클래스 네이밍에 대한 문제를 어느정도 해소했다고 생각한다. 하지만 계속해서 늘어나는 클래스와 끊임없이 내려가는 스크롤은 막을 방법이 없었다.

 

그러다 리액트 프로젝트에서 CSS를 모듈화하는 도구와 함께 사용했지만 또 다른 문제가 생겼다.

개인 프로젝트의 폴더 구조

이렇게 모듈화를 하면 해당 컴포넌트의 스타일에만 집중할 수 있고 다른 곳에서 클래스 이름이 중복이 되어도 자동으로 고유 클래스 이름으로 변환시켜주기 때문에 괜찮았다. 이런 점들은 좋았지만 컴포넌트마다 CSS 파일을 생성하는 것이 정말 귀찮았다. 그리고 클래스 앞에 매번 붙여야 하는 styles도 힘들었다.(자동으로 붙여주는 도구를 결국 못찾았다)

import React from 'react';
import styles from './vintz.module.css';

const Vintz = () => {
  // styles..styles..
  return <div className={styles.vintz}>개발 전용차선</div>;
};

export default Vintz;

Tailwind CSS 💨

HTML 내에서 모던한 웹사이트를 빠르게 구축 해보세요 - https://tailwindcss.com/

tailwindcss는 utility-first를 개념으로 만들어진 CSS framework이다. 나는 개인적으로 다용도성을 최우선으로 갖는다는 개념으로 받아들였다. 클래스에 유틸리티한 이름(flex, pt-4, ...)을 붙여 HTML 내에서 개발하는 방식이다. 관리 측면에서 분리한 둘을 다시 붙여놓는다는 게 아이러니하지만 요즘 개발 방식에 잘 맞고 편한건 사실이다.

이제 대부분의 웹 개발은 HTML이 고정되어 있고 테마를 제공하는 솔루션 방식이 아닌 프론트가 직접  HTML과 CSS를 수정하기 때문에, tailwindcss가 CSS의 구조적인 문제를 다룰 수 있는 방법으로 인정 받으며 가장 인기 있는 프레임워크가 되었다. - CSS 역사로 알아보는 CSS가 어려워진 이유

tailwindcss를 사용하면서 느낀 장점들은 다음과 같다.

Tailwind CSS의 장점 ✨

클래스 이름을 고민하지 않아도 된다

tailwindcss가 정해놓은 클래스 이름을 가져다가 쓰면 되기 때문에 네이밍에 대한 고민을 하지 않아도 된다.(나는 이게 가장 큰 장점이라고 생각한다) 더이상 CSS에 의미있는 클래스 이름에 대한 고민과 네이밍 표기법을 생각하지 않고 스타일에만 집중할 수 있는 것이다. 이제는 비즈니스 로직에 대한 네이밍에만 신경쓰면 된다!

쉬운 반응형 페이지와 커스터마이징

개인 프로젝트 개발을 미뤘던 이유가 반응형 페이지 구현 때문이었다. 처음부터 PC화면에 맞게 코드를 작성해서 반응형 페이지로 만드는 게 막막했다. 클래스 이름도, 속성도, 레이아웃도 전부 다 갈아엎어야 한다고 생각했다.

 

그런데 tailwindcss는 CSS를 추가할 필요 없이 스타일에 맞는 클래스를 찾아서 HTML에 적용만 시켜주면 됐기 때문에 비교적 쉽게 스타일을 바꾸고 반응형 레이아웃을 만들 수 있었다.

 

그리고 구분점(breakpoints) 커스터마이징도 가능해서 좀 더 유연하게 대처할 수 있다.

// tailwind.config.js 📂

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
    screens: {
      sm: '465px',
      md: '768px',
      lg: '1024px',
      xl: '1640px',
    },
  },
};

화면을 번갈아가면서 개발하지 않아도 된다

HTML 내에서 작업을 하기 때문에 HTML과 CSS 화면을 번갈아가면서 개발을 하지 않아도 된다. 특히 리액트에서 더욱 효과가 좋았다고 생각한다. 또한 카페와 같은 한정된 데스크환경에서도 개발하기가 더 편했다. 

만족스러운 CSS 프레임워크

이렇게 tailwindcss를 사용함으로써 기존 CSS의 문제를 해결할 수 있었다. 깊이가 하나인 클래스를 사용하고, 네이밍에 대한 고민도 없고, 컴포넌트마다 CSS 파일을 생성하지 않아도 됐다.

 

이외에도 컬러들이 정의 되어 있어서 일관된 스타일을 적용할 수 있다는 점, 공식문서가 친절하고 단축키를 통해 클래스 이름을 쉽게 찾을 수 있다는 점 등 자잘한 장점들도 많아서 마음에 들었다. 하지만 장점이 있다면 단점도 있는법. 상충 관계(trade-off)가 존재한다.

Tailwind CSS의 단점 🤔

코드의 가독성 포기..

스타일을 하나둘씩 추가 할 수록 코드가 길어지고 알아볼 수 없을 정도까지 오기도 한다. 하지만 사실 사용자가 개발자 도구를 띄워서 보는 것도 아니고 보여지는 것이 더 중요하기 때문에 크게 신경쓰진 않았다.(그리고 미디엄이나 유튜브의 코드를 보고 더 그랬다)

미디엄의 코드 중 일부분 - https://medium.com/

적응하기까지의 시간

나는 어느 정도 적응하기까지 3시간이 걸렸다. 공식 문서를 보며 클래스 이름들을 찾느라 꽤 시간이 걸렸다. 하지만 적응을 좀 하다보면 빠르게 스타일을 적용할 수 있고 오히려 개발 생산성이 더 올라갈 것이라고 생각한다.

시작하기

영어를 잘 모르는 나도 공식 문서를 통해 쉽게 설치하고 적용할 수 있었다. 다양한 설치 방법들이 존재하는데 나같은 경우 CRA를 통해 프로젝트를 만들었기 때문에 프레임워크 가이드 탭의 CRA를 통해 설치했다.

Getting StartedInstallation: Framework Guides

프로젝트 생성하기

기존 프로젝트에 적용 시 생략한다.

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

참고: Create React App v5.0+

Tailwind CSS 설치 및 초기화

tailwindcss와 크로스브라우징을 대응 해주는 postcss autoprefixer를 함께 설치 해준다.

npm install -D tailwindcss postcss autoprefixer

그리고 초기화 파일을 생성해준다.

npx tailwindcss init -p

템플릿 경로 설정

초기화를 완료하면 'tailwind.config.js' 파일이 생성되며, 해당 파일에 템플릿 경로를 설정 해준다.

// tailwind.config.js 📂

module.exports = {
  // 템플릿 파일의 경로 설정 👀
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind 지시문 CSS에 추가하기

'@tailwind' 지시문을 메인 CSS 파일(./src/index.css)에 추가하여 Tailwind CSS 스타일을 추가해주자.

/* index.css 📂 */

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

IntelliSense 설치하기

IntelliSense for VS Code

VS Code extension인 IntelliSense를 설치하면 훨씬 빠르고 쉽게 스타일을 적용할 수 있다. 자동완성 기능, 오류나 잠재적인 버그를 강조해주고 클래스 이름에 hover 시 해당 CSS를 보여주는 등 tailwindcss를 사용한다면 기본으로 사용하길 추천한다.

커스터마이징 하기

tailwind.config.js에서 사이즈나 컬러 등을 쉽게 커스터마이징 할 수 있다. 주의할 점은 기존 스타일에 추가로 값을 넣어줄 경우에는 extend 객체 안에 넣어줘야 한다. 새롭게 재설정 하는 경우에만 extend 객체 밖에서 작성한다.

// tailwind.config.js 📂

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

커스터마이징 역시 문서 맨 하단에 친절하게 설명이 되어 있어서 필요할 때마다 찾아서 설정을 하면 된다.

마치며..

일주일 정도 사용 해봐서 그런지 아직까지는 장점이 더 크다고 생각한다. 더 사용해봐야 알겠지만 넷플릭스 탑 10에서도 쓰일 만큼 프로덕션 레벨의 최적화도 할 수 있고, 개인 프로젝트를 하면서 웬만한 스타일은 전부 적용이 가능했다.(부족한건 플러그인을 찾아서 설치하기도 했다) 정말 만족하며 사용했기 때문에 계속 사용하면서 실무에서도 써보고 싶고, 주변에 추천을 하고 다녀야겠다. 더 많은 사람들이 사용을 했으면 좋겠다.

참고

CSS 역사로 알아보는 CSS가 어려워진 이유 - teo
Hello Tailwind CSS! | 장점, 단점, 사용법 - wonny log