본문으로 건너뛰기
SoulLog

Tailwind 왜 쓸까?

7분 읽기
Tailwind CSSCSSFrontend

Tailwind란?

  • utility 중심의 CSS 프레임워크
    • utility-first는 무슨 뜻일까?
    • 사용자가 정의한 CSS 클래스를 사용하는 대신 마크업에서 직접 요소의 스타일을 지정 (ex. margin, padding, color, font size 등을 처리할 수 있는 클래스 라이브러리를 제공하는 방식)
    • 재사용이 가능하도록 설계 되어 있고, 커스텀이 유연하여 프로젝트에 맞게 조정 가능

우리는 왜 Tailwind를 선택했을까?

State of CSS 2023: CSS 프레임워크

  • 최근 5년간 통계를 보면 재사용을 희망하거나 관심의 비중이 높음

State of CSS 재사용 비율

  • 최근 5년간 사용자의 만족도가 높음

State of CSS 만족도

  • 인지도나 누적 사용량은 아무래도 부트스트랩이 높음
    • 당장 22년도까지만 해도 IE 지원을 해야 했다 (지원 종료된 시점이 22년 6월 5일)
    • 하위 브라우저 시절부터 지원한 만큼 어쩔 수 없다
  • 하지만 관심도, 만족도 측면에서 Tailwind가 앞선다
  • VSCode에서의 지원
    • Editor Setup - Tailwind CSS
    • 자동완성, 구문 하이라이트, CSS 관련 잠재적인 lint 오류 체크 등을 지원하고 있다

Bootstrap과의 차이점은?

Bootstrap이 익숙하신 분들을 위해 차이점을 요약해드림

BootstrapTailwind CSS
특징이미 만들어진 컴포넌트 기반 (스타일 관련해서도 제공되지만 제한적)색상, 간격, 텍스트 스타일과 같은 유틸리티 우선 접근 방식 (사용자 정의 가능)
커스텀매우 제한적 (Sass 변수 등을 재정의해야함)유연성이 높음
브라우저 지원IE를 포함해서 구형 브라우저도 지원 (현재의 5버전에서는 지원종료)IE를 포함하지 않음
러닝 커브쉬움높은 편
개발 속도초기 개발 시 빠름 (이미 class 하나에 만들어져 있으니까)느리지만, 정확함 (처음에 배울게 많지만 커스텀 자유도가 높아서 정확하게 스타일링 가능)
퍼포먼스무거움가벼움 (실제 사용하는 CSS만 전송)
  • Bootstrap에서 커스텀이 어려운 이유
.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb),var(--bs-border-opacity))!important
}

Tailwind와 SCSS와의 궁합

For the best development experience, we highly recommend that you use PostCSS exclusively, and that you don't use preprocessors like Sass or Less in your Tailwind projects.

  • 기존에 SCSS로 스타일을 입혀왔기 때문에, SCSS와의 궁합도를 체크해봤다
  • Tailwind 공식 문서에서는 PostCSS를 전처리기로 사용하는 건 권장하지만, Sass나 Less의 사용은 권장하지 않는 것으로 되어있다

처음 프로젝트 생성 시 세팅법

15일 기준, 카야와 협의한 프로젝트 환경에 대한 구성 방식은 React, TypeScript, Vite, Yarn Berry라고 했기 때문에 우선은 해당 요건에서 설정한다는 가정하에 install을 해봄

  • Tailwind CSS에서 npm이나 npx로만 설정하는 방식을 설명하고 있어서 직접 프로젝트 세팅한다는 느낌으로 명령어를 정리해봤다
# 처음에 그냥 yarn으로 설정하려 할 때 아무것도 안되서 공식 사이트 갔더니 이 명령어를 사용함
$ corepack enable
 
# yarn으로 vite 기반 프로젝트 react/typescript로 생성
$ yarn create vite {{ 프로젝트명 }}
# 이후 react, typescript 선택
 
# 생성된 프로젝트 폴더로 넘어감
$ cd {{ 프로젝트명 }}
 
# yarn 버전 체크 시 1.x버전으로 나옴
$ yarn -v # 1.22.22
 
# yarn berry로 버전 변경 (4.x 버전으로 생성)
$ yarn set version berry # 4.5.0
$ yarn install
 
# yarn에 tailwindcss 추가
$ yarn add -D tailwindcss
 
# 공홈에는 postcss, autoprefixer 사용시에는 아래와 같이
$ yarn add -D tailwindcss postcss autoprefixer
 
# tailwind.config.ts 파일 생성
$ yarn tailwindcss init -p --ts
 
# 실행
$ yarn dev
  • src/index.css에 아래의 내용 추가
@tailwind base; /* 브라우저 초기화 및 기본 설정 */
@tailwind components; /* tailwind에서 제공하는 컴포넌트에 대한 스타일. 없어도 동작함. */
@tailwind utilities; /* 빠지면 절대 안됨 */
  • 초기 CSS 스타일에 대한 설정을 추가로 하고 싶다면?
@tailwind base;
 
@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  a {
    @apply text-blue-600 underline;
  }
}
 
@tailwind components;
@tailwind utilities;

  • 위와 같이 @layer로 base를 지정한 뒤 개별 요소에 @apply로 추가하고자 하는 설정 값을 설정하면 초기 세팅이 가능함

  • 생성된 tailwind.config.ts에 아래와 같이 설정

import type { Config } from 'tailwindcss'
 
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

  • content는 Tailwind에 대해 규칙을 적용하는 파일의 경로를 설정할 수 있음

  • Content Configuration - Tailwind CSS

  • 만약 Tailwind에서 제공하는 브라우저에 대한 초기화 CSS를 사용하고 싶지 않다면?

import type { Config } from 'tailwindcss'
 
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  }
} satisfies Config