@remotion/tailwind
This package provides utilities useful for integrating TailwindCSS with Remotion, as documented on our TailwindCSS page.
Installation
Install @remotion/tailwind
as well as TailwindCSS dependencies.
- npm
- yarn
- pnpm
- bun
npm i --save-exact @remotion/renderer@4.0.147
npm i --save-exact @remotion/renderer@4.0.147
pnpm i @remotion/renderer@4.0.147
pnpm i @remotion/renderer@4.0.147
bun i @remotion/renderer@4.0.147
bun i @remotion/renderer@4.0.147
yarn --exact add @remotion/renderer@4.0.147
yarn --exact add @remotion/renderer@4.0.147
Also update
remotion
and all `@remotion/*`
packages to the same version.Remove all
^
character in front of the version numbers of it as it can lead to a version conflict.Override the Webpack config by using enableTailwind()
.
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableTailwind } from "@remotion/tailwind";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableTailwind (currentConfiguration );});
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableTailwind } from "@remotion/tailwind";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableTailwind (currentConfiguration );});
Then follow the remaining set up steps from the TailwindCSS page.
Templates
You can find the starter template here or install it using:
- npm
- yarn
- pnpm
- bun
bash
npx create-video --tailwind
bash
npx create-video --tailwind
bash
yarn create video --tailwind
bash
yarn create video --tailwind
bash
bun create video --tailwind
bash
bun create video --tailwind
bash
pnpm create video --tailwind
bash
pnpm create video --tailwind