Tailwind CSS
在 Remotion 專案中使用 Tailwind CSS。
安裝
在 Remotion 專案中使用 Tailwind CSS：
npm install tailwindcss @tailwindcss/postcss postcss設定
建立 postcss.config.js：
module.exports = {
plugins: {
"@tailwindcss/postcss": {},
},
};在你的 CSS 檔案中匯入 Tailwind：
@import "tailwindcss";在元件中使用
import { AbsoluteFill } from "remotion";
import "./styles.css";
export const MyScene: React.FC = () => {
return (
<AbsoluteFill className="bg-slate-900 flex items-center justify-center">
<h1 className="text-7xl font-bold text-white">
Hello Tailwind!
</h1>
</AbsoluteFill>
);
};注意事項
不要用 Tailwind 的動畫工具
Tailwind 的 animate-*、transition-* 等工具類依賴瀏覽器的時間系統，在 Remotion 的逐幀渲染中無法正常運作。
動畫必須用 Remotion 的 useCurrentFrame() + interpolate() / spring() 來驅動：
// ❌ 錯誤：Tailwind 動畫在渲染時不會動
<div className="animate-bounce">...</div>
// ✅ 正確：用 Remotion 的方式
const frame = useCurrentFrame();
const translateY = interpolate(frame, [0, 15, 30], [0, -20, 0]);
<div style={{ transform: `translateY(${translateY}px)` }}>...</div>可以用的 Tailwind 功能
- 佈局類：
flex、grid、absolute、relative - 間距類：
p-4、m-8、gap-2 - 文字類：
text-xl、font-bold、text-white - 背景類：
bg-slate-900、bg-gradient-to-r - 邊框類：
rounded-xl、border - 尺寸類：
w-full、h-screen
基本上，所有靜態樣式都可以正常使用，只有涉及時間的功能不行。
小結
- Tailwind CSS 可以在 Remotion 中正常使用
- 避免使用
animate-*、transition-*等時間相關功能 - 靜態樣式（佈局、顏色、字型等）完全沒問題