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.

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