Skip to main content

TailwindCSS

import Tabs from "@theme/Tabs"; import TabItem from '@theme/TabItem';

Using the template​

The easiest way to get started with Tailwind and Remotion is to use the template by cloning it on GitHub or running the following:

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

bash
npx create-video --tailwind
bash
npx create-video --tailwind
bash
pnpm create video --tailwind
bash
pnpm create video --tailwind
 
bash
yarn create video -- --tailwind
bash
yarn create video -- --tailwind

Install 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', }, ] }> 

bash
npm i -D @remotion/tailwind
bash
npm i -D @remotion/tailwind
bash
yarn add -D @remotion/tailwind
bash
yarn add -D @remotion/tailwind
 
bash
pnpm i -D @remotion/tailwind
bash
pnpm i -D @remotion/tailwind
  1. 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().

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

  2. 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;
  1. 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";
  1. 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: [],
};
  1. 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"]
}
  1. 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​