Remotion Tailwind & Styling

Remotion은 TailwindCSS v4와 공식 통합된다. npx create-video 시 --tailwind 옵션만 주면 자동 설정된다.

🚀 빠른 시작

# 새 프로젝트 생성 시 Tailwind 포함
npx create-video@latest --tailwind my-video
cd my-video
npm i
npm run dev

tailwind.config.js와 PostCSS 설정이 자동 추가된다.

🎨 사용법

Remotion 컴포넌트에서 일반적인 Tailwind 클래스 사용:

import { AbsoluteFill } from "remotion";

export const MyComp = () => {
  return (
    <AbsoluteFill className="bg-gradient-to-br from-pink-500 to-red-500 flex items-center justify-center">
      <h1 className="text-9xl font-bold text-white drop-shadow-2xl">
        Hello Remotion!
      </h1>
    </AbsoluteFill>
  );
};

🛠️ 설정 확인

1. `tailwind.config.js`

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

2. `postcss.config.mjs` (Remotion 4.x)

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

3. CSS 엔트리 (`src/style.css`)

@tailwind base;
@tailwind components;
@tailwind utilities;

4. `src/Root.tsx`에서 import

import "./style.css";

⚠️ Remotion에서 Tailwind 주의사항

1. 클래스명은 정적이어야 함

Tailwind는 클래스명 스캔으로 CSS를 생성하므로, 동적으로 만드는 클래스명은 감지 못함:

// ❌ 잘못된 사용 — Tailwind가 감지 못함
<div className={`text-${size}xl`} />

// ✅ 올바른 사용 — 완전한 클래스명 사용
<div className={size === "9" ? "text-9xl" : "text-3xl"} />

2. `interpolate()`로 동적 스타일

프레임에 따라 스타일을 바꿀 때는 interpolate() 사용:

import { interpolate, useCurrentFrame } from "remotion";

const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });

return <div className="bg-pink-500" style={{ opacity }} />;

3. CSS-in-JS 주의

Emotion, styled-components 등도 사용 가능하지만, 런타임 CSS-in-JS는 렌더링 시 오버헤드가 있다. 가능하면 Tailwind 클래스 + 인라인 style 조합 권장.

자세한 비교: https://www.remotion.dev/docs/using-styled-components

🌐 Tailwind v4 마이그레이션

Remotion 4.0+은 Tailwind v4를 기본 지원. 기존 v3 프로젝트는 v4 마이그레이션 가이드 참고:

📌 Tailwind v3 (tailwind-legacy)는 별도 가이드 참고

🎨 디자인 시스템 예시

tailwind.config.js에서 확장:

export default {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#fef2f2",
          500: "#f5576c",
          900: "#7c1d1d",
        },
      },
      fontFamily: {
        display: ["Pretendard", "sans-serif"],
      },
    },
  },
};

<h1 className="font-display text-9xl text-brand-500">안녕!</h1>

💡 실전 팁

Pretendard 같은 한글 폰트는 staticFile()로 public/fonts/에 두고 @font-face로 로드
반응형 — Remotion은 컴포지션 크기 고정이지만, 컨테이너는 Tailwind 유틸 사용 가능
그라데이션·그림자 — Tailwind의 bg-gradient-*, drop-shadow-* 그대로 작동
애니메이션 — Tailwind animate-*는 렌더에서 깜빡임 가능. Remotion interpolate() 권장

⚠️ 알아둘 점

CDN Tailwind는 사용 불가 (런타임 빌드 필요)
PurgeCSS 자동 — content 설정으로 미사용 클래스 자동 제거
테마 공유 — 디자인 시스템 코드를 다른 Remotion 프로젝트에 import 가능

📚 영역 구분

TypeScript 설정: Remotion TypeScript & Bundler
컴포넌트 분리: Remotion Reuse Components
한글 hub: Remotion AI & 도구

상위 문서: ← Remotion AI & 도구 출처: Remotion 공식 문서 — Tailwind 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 Tailwind 가이드 한글화)
2026-07-29	메타데이터 블록을 본문 하단으로 이동