@remotion/tailwind

note

This is documentation for enabling Tailwind v3.
For the Tailwind v4 version of this site, see the Tailwind v4 documentation.

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.

Remotion CLI

npx remotion add @remotion/tailwind

npm

npm i --save-exact @remotion/tailwind@4.0.422

This assumes you are currently using v4.0.422 of Remotion.
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.

bun

pnpm i @remotion/tailwind@4.0.422

This assumes you are currently using v4.0.422 of Remotion.
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.

pnpm

bun i @remotion/tailwind@4.0.422

This assumes you are currently using v4.0.422 of Remotion.
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.

yarn

yarn --exact add @remotion/tailwind@4.0.422

This assumes you are currently using v4.0.422 of Remotion.
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.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.

APIs

enableTailwind()

Override the Webpack config to enable TailwindCSS