한숨에 부트스트랩

명령어 다섯 줄. 설정 파일 수정 셋. 머신에서 동작하는 앱 하나. 스택 전체를 한 자리에서.

도착 지점

이 레슨 끝나면 디스크에 폴더 하나가 있고 거기서 npm run dev 하면 React 19 앱이 http://localhost:5173 에서 떠. TypeScript strict mode 켜져 있고 Tailwind v4 유틸리티 동작해. 스크린샷 없음, 6개월 묵은 블로그 복붙 없음. 명령어, 파일, 설명만.

Step 1 — scaffold

Vite 팀이 React + TS 템플릿 유지보수해. 2026년 기준 React 공식 문서가 비-메타-프레임워크 시작점으로 추천하는 유일한 scaffold 야.

Step 2 — Tailwind v4 설치

v4 는 두 패키지로 와: tailwindcss (엔진) + 빌드 도구 통합. Vite 의 통합은 @tailwindcss/vite. 설치 두 번, vite.config.ts 에 플러그인 한 줄, CSS import 한 줄.

Step 3 — Tailwind 를 CSS 에 연결

v4 는 메인 CSS 에서 네이티브 @import 문법으로 Tailwind import. v3 의 @tailwind base; @tailwind components; @tailwind utilities; 디렉티브 — 아직 동작은 하지만 새 방식은 한 줄이야.

Step 4 — 확인

JSX 엘리먼트에 Tailwind 유틸 클래스 하나 붙여 봐. 스타일 입혀서 렌더 되면 체인 OK. 아니면 실패 모드는 거의 항상 'CSS 파일이 main.tsx 에서 import 안 됨' 또는 'vite.config.ts 에 @tailwindcss/vite 플러그인 빠짐.' 두 군데만 확인하면 돼.

Step 5 — strict TS

Vite 의 React + TS 템플릿이 이미 tsconfig.app.json 에 strict: true 켜놨어. 그게 뭘 의미하는지는 lesson 4 에서 파볼게. 지금은 켜져 있다는 것만 확인.

생성된 파일들 직접 읽어. Vite scaffold 가 파일 한 12개 줘. 어느 것도 함부로 못 건드릴 것 취급 마. vite.config.ts, tsconfig.json, tsconfig.app.json, tsconfig.node.json, src/main.tsx, src/App.tsx, src/index.css — 다 열어서 한 번씩 읽어. React 스택 전체가 머리에 들어올 만큼 작아. 들어오게 만들어.

Code

명령어 다섯 줄, 위에서 아래로·bash

# 1. Vite + React 19 + TS 프로젝트 scaffold
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

# 2. Tailwind v4 + Vite 플러그인 추가
npm install -D tailwindcss @tailwindcss/vite

# 3. 띄우기
npm run dev

vite.config.ts — Tailwind 플러그인 추가됨·ts

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 5173,
  },
});

src/index.css — Tailwind v4 의 CSS-first 방식·css

@import "tailwindcss";

/* 테마 토큰은 lesson 5 에서 들어와. 지금은 import 만으로 충분 —
   모든 Tailwind 유틸리티가 쓸 수 있어. */

src/App.tsx — sanity check·tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main className="min-h-screen flex items-center justify-center bg-slate-900 text-slate-100">
      <button
        onClick={() => setCount((n) => n + 1)}
        className="px-6 py-3 rounded-lg bg-cyan-500 text-slate-950 font-semibold hover:bg-cyan-400 transition-colors"
      >
        Tailwind + React 19: clicked {count} times
      </button>
    </main>
  );
}

Exercise

명령어 다섯 줄 실행. 기본 App.tsx 를 위 sanity-check 버전으로 교체. 버튼이 스타일 잡혀 (cyan 배경, hover 효과) 렌더 되고 카운터가 증가하는지 확인. 그 다음 셋 중 하나씩 일부러 깨봐 (@import 제거, 플러그인 주석, main.tsx 의 index.css import 주석) — 각각 실패 모드 관찰. 다 끝나면 복원.

Hint

각 break 마다 실패 모양이 달라: @import 빠지면 Tailwind 유틸 전체 무동작; 플러그인 빠지면 비슷하지만 CSS 파일에 transform 흔적 없음; main.tsx import 빠지면 어떤 스타일도 안 적용 (본인 CSS 도).

도착 지점

Step 1 — scaffold

Step 2 — Tailwind v4 설치

Step 3 — Tailwind 를 CSS 에 연결

Step 4 — 확인

Step 5 — strict TS

Code

External links

Exercise

Progress

댓글 0