본문으로 건너뛰기
/ Docs

Tailwind CSS

CSS 스타일링​

CSS 스타일링 방식또한 다른 웹 기술처럼 계속 발전하고 있습니다. 프로젝트의 규모나 성격에 따라 적합한 방식이 다를 수 있습니다.

CSS 스타일링 방식​

웹 개발에서 자주 쓰이는 대표적인 방식 4개를 간단히 정리해보겠습니다.

  1. 전통적인 Global css
    전역에 CSS 파일을 한 번 import하여 모든 컴포넌트에 스타일을 적용하는 방식입니다. 간단하고 이해하기 쉬워 작은 프로젝트 규모에 활용할 수 있습니다만.. 클래스 이름 충돌 및 헷갈림 등의 문제가 발생할 수 있습니다.

  2. css module
    *.module.css 파일을 만들면 클래스 이름이 고유하게 변환되어 충돌을 방지할 수 있습니다. 컴포넌트 단위로 스타일링 할 수 있지만, 동적 스타일링이 어렵습니다.

  3. css-in-js (styled-components)
    컴포넌트와 스타일, 로직을 하나의 파일 안에서 관리합니다. props 기반 동적 스타일이 가능합니다. 편리하지만 런타임 오버헤드와 번들 크기 증가 등의 단점이 있습니다.

  4. tailwind css
    m-1, flex 등 미리 정의된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링할 수 있습니다. 빠른 UI 개발과 디자인 일관성 유지에 좋지만 HTML 가독성이 떨어질 수 있습니다.

css-in-js​

오늘 포스팅을 쓰기 전까지는 tailwind는 약간 사파 방식이라고 생각하고 있었습니다.. 저는 1 -> 2 -> 3 순으로 css styling 방식을 접했는데, css-in-js 방식을 보고 완전 혁신이다 라고 느꼈었습니다.

css-in-js 사용하면서 느낀 점은

  1. 한 페이지(컴포넌트) 안에 바로 CSS 적을 수 있어서 className 생각 안해도 되서 편함
  2. CSS 자동완성 안되서 숙련되긴 해야함
  3. 다른 페이지와 중복된 클래스를 만들고 싶을때, 그냥 중복으로 적어야되서 애매하긴 했음

적어보니 단점이 많은 것 같은데.. 단점이 있어도 1번의 장점이 너무 커서 잘 쓰고 있었습니다. 그런데 포스팅 작성하면서 내용 조사해보니 요즘에는 css-in-js에서 tailwind로 옮겨가고 있는 추세라고 합니다.

대표적인 이유는 다음과 같습니다.

  1. 런타임 오버헤드 문제 : 런타임 시점에 스타일을 생성, DOM이 렌더링때마다 스타일 계산
  2. 번들 크기 증가 : 스타일 정보를 JS 번들에 포함하므로 렌더링 성능에 영향
  3. SSR환경에서 사용하면 렌더링 순서 문제 발생
  4. 개발경험(DX) 개선된 대체재 등장

tailwind​

그럼 제가 앞으로 써볼 Tailwind에 대해서도 자세히 알아봅시다

Tailwind CSS는 UI를 빠르고 효율적으로 구현할 수 있도록 도와주는 CSS 프레임워크입니다. 유틸리티 클래스를 기반으로 스타일을 적용할 수 있으며, 기초적인 클래스만 제공하여 커스터마이징이 가능하도록 합니다. Tailwind는 Utility-First 철학에 기반하여 클래스 중복을 최소화하고 효율적인 디자인을 구현합니다.

Utility First 철학

  1. 개발자 편의성
  2. 디자인 일관성
  3. 재사용성 & 유지보수
  4. 성능 최적화

철학에 맞게 Tailwind는 빠른 UI 구성, 디자인 일관성 유지, 작은 번들 사이즈, tailwind.config.js로 디자인 기준 통일까지 할 수 있습니다.

<ol class="list-decimal pl-5 space-y-1 text-gray-700">
  <li>Profile</li>
  <li>Post</li>
  <li>Setting</li>
</ol>

흠시멘.. 일단 지금 보기에는 깔끔한것 같기도 난잡한 것 같기도 하지만 익숙해지면 다 읽히겠죠?

자세한 유틸리티 클래스는 Tailwind 공식사이트를 참고합시다