TailwindCSS

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.

npm

bash
npx create-video@latest

bash
npx create-video@latest

bun

bash
pnpm create video

bash
pnpm create video

pnpm

bash
bun create video

bash
bun create video

yarn

bash
yarn create video

bash
yarn create video

The following templates support scaffolding with TailwindCSS:

• Hello World
• Blank
• Hello World (JavaScript)
• Audiogram
• Overlay
• Stargazer
• TikTok

Install in existing project

from v3.3.95, see instructions for older versions

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

npm

bash
npm i -D @remotion/tailwind

bash
npm i -D @remotion/tailwind

yarn

bash
yarn add -D @remotion/tailwind

bash
yarn add -D @remotion/tailwind

pnpm

bash
pnpm i -D @remotion/tailwind

bash
pnpm i -D @remotion/tailwind

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

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);
});

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:

src/style.css
css
@tailwind base;
@tailwind components;
@tailwind utilities;

src/style.css
css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

src/Root.tsx
js
import './style.css';

src/Root.tsx
js
import './style.css';

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

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

tailwind.config.js
js
/* 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:

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

package.json
diff
{
// 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)