Tailwind CSS v4 - 도입과 설정

연·2025년 3월 4일
CSSReacttailwindCSSvite테일윈드
0

tailwindcss

목록 보기
1/1

왜 Tailwind CSS ?

오늘의 주제는 v4가 중요한 부분이기에, 이 부분에 관해선 간단히 짚겠다.

장점

  • JSX 구문과 함께 바로 보이는 스타일 코드
  • 빠른 작성을 통한 생산성 증가
  • UI 라이브러리로 shadcn/ui를 채택 (이건 이미 Tailwind CSS를 고려한 선택이기도 함)
  • cn 유틸과 cva 유틸로 용이한 확장성
  • 친절한 문서
  • AI에도 잘 적용되는 편
  • 지속적인 업데이트

이 정도의 이유가 떠오르는데, 장점만 적힌 위 내용과는 다르게 단점도 존재한다.
물론 단점이 치명적이지 않고, 장점이 갖는 영향력이 더 크기에 선택하였다.

단점

  • 동적 스타일링의 제한
  • 지저분하게 보이는 JSX
  • 빌드 시간

Tailwind CSS 공식 문서 →


v4를 사용해야 하는 이유

기존 v3와 비교했을 때, 개선된 부분들 위주로 간결히 체크해보았다.

  • 빌드 속도 최적화 - (전체 리빌드 기준, 3.5배 이상)
    • 성능 향상 관련 공식 문서 →
    • 기존에 개발 환경에서 일정 규모 이상의 코드를 수정하고 반영하는 시간이 꽤 걸리는 경우가 많은데,
      Tailwind CSS의 빌드 타임이 줄어 들면 이 부분이 개선될 것으로 예상
  • 더욱 간결해진 설정
  • h-4, w-8 등, h-에서 에 해당하는 수가, 지정된 값이 아닌 모든 값을 적용할 수 있게 됨
  • 간결한 업그레이드
    • 업그레이드 가이드 →
    • 위에서 본 개선된 부분들을 CLI를 통해 쉽게 업그레이드하여 적용 가능
    • 수동 업그레이드 또는 변경된 부분의 이해를 위한 가이드도 제공됨

이외에도 많은 확장성과, 변수 활용의 변경된 문법, 일부 제거된 요소들이 있으니
문서를 참고하면 좋을 듯하다.

Tailwind CSS v4 공식 발표 →


Vite + React + TypeScript 환경으로 설치 및 적용 예시

에 관해 작성하기 전에 shadcn/ui를 채택했다면?

shadcn/ui의 문서를 먼저 보는 것을 추천한다.



[ Vite + React + TypeScript ] + Tailwind CSS v4 설치


  1. 프로젝트 설치

Vite 공식 가이드 →

pnpm create vite

◇  Project name:
│  vite-react
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript

  1. Tailwind CSS v4 설치

Vite와 함께 사용하는 설치 가이드 →

pnpm add tailwindcss @tailwindcss/vite

  1. vite.config.ts에 tailwindcss 플러그인 추가
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

  1. @import "tailwindcss"
  • App.css는 제거, index.css를 globals.css로 변경 (main.tsx 에서 import)
    • 꼭 index.css를 재사용할 필요는 없음
    • Tailwind CSS 공식 문서의 경우, Vite 설정에서 html 파일 head 태그에 link 태그를 이용

      main.tsx에 import 하는 것과, html 파일에서 사용하는 것의 명확한 차이는 모르겠음
      기회가 되면 나중에 분석해보는 걸로


  • globals.css 최상단에 @import "tailwindcss"; 추가
    @import "tailwindcss";

...

이제 기본적인 세팅은 완료되어, className을 입력하면 잘 적용되는 것을 확인할 수 있다.

여기까지는 Tailwind CSS의 공식 문서를 참고하면 아주 간단하게 진행할 수 있다.

테마 변수 지정

기존 Tailwind CSS v3의 경우, tailwind.config.ts에서 config를 통한 관리를 했다.

  • v3 예시
    const config = {
  darkMode: ['class'],
  content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
  prefix: '',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      zIndex: {
        '70': '70',
      },
      screens: {
        xs: '480px',
      },
      colors: {
        black: {
          DEFAULT: 'hsl(var(--color-black))',
          '02': 'hsl(var(--color-black-02))',
          '03': 'hsl(var(--color-black-03))',
        },
        white: 'hsl(var(--color-white))',
        stroke: 'hsl(var(--stroke))',
        border: 'hsl(var(--border))',
        turquoise: 'hsl(var(--color-turquoise))',
        error: {
          DEFAULT: 'hsl(var(--color-error))',
          '01': 'var(--color-error-01)',
          '02': 'hsl(var(--color-error-02))',
        },
        gray: {
          DEFAULT: 'hsl(var(--color-gray))',
          '01': 'hsl(var(--color-gray-01))',
          '02': 'hsl(var(--color-gray-02))',
        },
        
        ...

위 경우, 테마 변수에 지정한 컬러를 css 변수로 사용하면, css 파일에서 스타일 변수 또한 지정해야 했다.


v4는, tailwind.confg가 존재하지 않고, css 파일에서 @theme 을 통해 모두 처리하면 된다.

이때, css 컬러 변수를 별도로 생성하지 않아도 자동으로 적용된다.

테마 설정 문서 →

Tailwind CSS v4는 oklch 컬러 팔레트를 권장한다.


v4 예시 - @theme

  • globals.css (테마 변수를 css 변수로 이용하는 예시도 추가)
@import 'tailwindcss';

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
  --color-banana: oklch(0.95 0.05 100);
}

body {
  color: var(--color-mint-500);
}

...
  • App.tsx
function App() {
  return (
    <main className='flex flex-col items-center justify-center w-screen h-screen'>
      <h1 className='underline text-banana bg-mint-500'>Banana</h1>
      <p>mint chocolate</p>
    </main>
  );
}

export default App;
  • 실행 화면

App.tsx Tailwind CSS v4.0 example

이 과정을 통해서, 간단히 테마 변수를 설정할 수 있다.

설정할 일이 없어 따로 눈에 띄게 작성하진 않았지만, 간단히 언급하자면

  • config에서 설정하던 content의 범위도 따로 설정할 필요 없이, gitignore 파일에 작성된 항목은 content 범위에서 제외된다.
    ex) node_modules

여기까지 봤을 때, 기존 버전에 비해 초기 설정이 많이 간결해진 것을 알 수 있다.

좀 더 편하게, Tailwind CSS의 세팅을 할 수 있게 되었고, 좀 사용해봐야 알겠지만 실제 사용성이나 확장성도 기대해볼 만하다.


뒤늦게서야 작성하는 이 글의 목적은 아래와 같다.

  • 문서를 통한 개발이 익숙한 분들은 잘 적용하시겠지만,
    문서를 통한 개발이 익숙하지 않은 입문자분들이 보다 손쉽게 이해하고(최소한의 부분만)
    더 자세한 내용을 찾기 위해 문서를 보는 연습을 하게끔 하려는 작은 의도가 있다.

이후엔 좀 더 사용을 하면서, 추가된 기능이나 확장과 관련하여 추가적으로 포스팅하려 한다.

profile
연
내 멋대로 나의 개발 일지

0개의 댓글

관련 채용 정보