@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

bash
npm i -D @remotion/tailwind

bash
npm i -D @remotion/tailwind

yarn

bash
yarn add -D @remotion/tailwind

bash
yarn add -D @remotion/tailwind

pnpm

bash
pnpm i -D @remotion/tailwind

bash
pnpm i -D @remotion/tailwind

Also update all the other Remotion packages to have the same version: remotion, @remotion/cli and others.

note

Make sure no package version number has a ^ character in front of it as it can lead to a version conflict.

Override the Webpack config by using enableTailwind().

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableTailwind } from "@remotion/tailwind";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableTailwind } from "@remotion/tailwind";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(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

bash
npx create-video --tailwind

bash
npx create-video --tailwind

yarn

bash
yarn create video --tailwind

bash
yarn create video --tailwind

pnpm

bash
bun create video --tailwind

bash
bun create video --tailwind

bun

bash
pnpm create video --tailwind

bash
pnpm create video --tailwind

APIs

• enableTailwind()