@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.

npm

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

yarn

pnpm i @remotion/tailwind@4.0.291

pnpm

bun i @remotion/tailwind@4.0.291

bun

yarn --exact add @remotion/tailwind@4.0.291

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