Vite 8 + Tailwind 4 — 빌드 & 스타일 철학

Vite — 거짓말 안 하는 dev

Webpack 시대 빌드 도구는 빌드 두 개 유지했어: 느린 production 빌드 + 빠르지만 다른 dev 빌드. dev 빌드가 prod 에서만 나타나는 버그를 가린 적 많았지. Vite 가 그걸 무너뜨림 — dev 는 ESM-native, browser 가 module 요청하면 Vite 가 on-demand 서빙. Production 은 Rolldown (Vite 8 에서 Rollup 대체하는 새 Rust 기반 bundler).

cwkPippa 에서 실용적 효과: 코드 변경 저장하면 chat 이 100ms 안에 update. HMR 이 컴포넌트 상태 보존. dev 경험 = production 경험 + 즉각 reload.

Tailwind 4 — utility-first, CSS-native config

Tailwind 4 가 JavaScript config 버리고 CSS-native @theme 블록으로 갔어. design token 이 CSS 에 살아 — 쓰이는 곳에 가까이, Node round-trip 없이 계산.

왜 utility-first 인가? 실제 앱에서 픽셀 수준 차이 빠르게 ship 해야 하는데, '맞는 CSS 클래스 파일 찾아서 편집' 이 죽음의 루프거든. JSX 옆에 p-4 rounded-lg bg-bg-elevated 가 sibling 파일의 같은 스타일보다 읽기 빠르고, 쓰기 빠르고, 지우기 빠름.

framework 와 싸우지 마: 컴포넌트마다 custom CSS 클래스 박고 싶으면, Tailwind 를 Bootstrap 처럼 쓰는 거. utility 써. 패턴은 컴포넌트로 추출하지 CSS 클래스로 추출 X.

Code

vite.config.ts — proxy to backend in dev·ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    host: '0.0.0.0',
    proxy: {
      '/api': 'http://localhost:8000',
      '/avatars': 'http://localhost:8000',
    },
  },
});

Tailwind 4 — CSS-native theme tokens·css

@import 'tailwindcss';

@theme {
  --color-bg: #0d0d12;
  --color-bg-elevated: #16161e;
  --color-fg: #e8e8ee;
  --color-accent: #FF8FBE;
  --font-sans: 'Inter', system-ui;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme='light'] {
  --color-bg: #ffffff;
  --color-fg: #1a1a1f;
}

Vite 8 + Tailwind 4 — 빌드 & 스타일 철학

Vite — 거짓말 안 하는 dev

Tailwind 4 — utility-first, CSS-native config

Code

Progress

댓글 0