TailwindCSS

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import {TailwindSupport} from '../components/TailwindSupport';

Using the CLI

The easiest way to get started with Tailwind is by scaffolding a new video using the CLI and selecting a template that supports adding Tailwind automatically.

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'bun', value: 'bun', }, { label: 'pnpm', value: 'pnpm', }, { label: 'yarn', value: 'yarn', }, ] }> <TabItem value="npm">

npx create-video@latest

pnpm create video

bun create video

yarn create video

The following templates support scaffolding with TailwindCSS: <TailwindSupport />

Installing Tailwind v4 in existing project

from v4.0.256

1. Install @remotion/tailwind-v4 package and TailwindCSS dependencies.

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: 'pnpm', }, { label: 'bun', value: 'bun', }, ] }> <TabItem value="npm">

npm i -D @remotion/tailwind-v4 tailwindcss

yarn add -D @remotion/tailwind-v4 tailwindcss

pnpm i -D @remotion/tailwind-v4 tailwindcss

bun i -D @remotion/tailwind-v4 tailwindcss

2. Add the Webpack override from @remotion/tailwind-v4 to your config file:

import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind-v4';

Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});

3. If you use the bundle() or deploySite() Node.JS API, add the Webpack override to it as well.

4. Create a file src/index.css with the following content:

@import 'tailwindcss';

5. Import the stylesheet in your src/Root.tsx file. Add to the top of the file:

import './index.css';

6. Ensure your package.json does not have "sideEffects": false set. If it has, declare that CSS files have a side effect:

{
// Only if `"sideEffects": false` exists in your package.json.
-  "sideEffects": false
+  "sideEffects": ["*.css"]
}

7. Start using TailwindCSS! You can verify that it's working by adding className="bg-red-900" to any element.

Installing Tailwind v3 in existing project

from v3.3.95, see instructions for older versions

1. Install @remotion/tailwind package and TailwindCSS dependencies.

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: 'pnpm', }, { label: 'bun', value: 'bun', }, ] }> <TabItem value="npm">

npm i -D @remotion/tailwind

yarn add -D @remotion/tailwind

pnpm i -D @remotion/tailwind

bun i -D @remotion/tailwind

2. Add the Webpack override from @remotion/tailwind to your config file:

import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind';

Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});

:::note Prior to v3.3.39, the option was called Config.Bundling.overrideWebpackConfig(). :::

3. If you use the bundle() or deploySite() Node.JS API, add the Webpack override to it as well.

4. Create a file src/style.css with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Import the stylesheet in your src/Root.tsx file. Add to the top of the file:

import './style.css';

6. Add a tailwind.config.js file to the root of your project:

/* eslint-env node */
module.exports = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

7. Ensure your package.json does not have "sideEffects": false set. If it has, declare that CSS files have a side effect:

{
// Only if `"sideEffects": false` exists in your package.json.
-  "sideEffects": false
+  "sideEffects": ["*.css"]
}

8. Start using TailwindCSS! You can verify that it's working by adding className="bg-red-900" to any element.

:::note Your package manager might show a peer dependency warning. You can safely ignore it or add strict-peer-dependencies=false to your .npmrc to suppress it. :::

See also

• TailwindCSS v2 (legacy)