Skip to main content

@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 i --save-exact @remotion/tailwind@4.0.209
npm i --save-exact @remotion/tailwind@4.0.209
This assumes you are currently using v4.0.209 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);
});
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:

bash
npx create-video --tailwind
bash
npx create-video --tailwind

APIs​