Skip to main content

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.

bash
npx create-video@latest

The following templates support scaffolding with TailwindCSS:

Installing Tailwind v4 in existing project​

from v4.0.256

  1. Install @remotion/tailwind-v4 package and TailwindCSS dependencies.
bash
npm i -D @remotion/tailwind-v4 tailwindcss
  1. Add the Webpack override from @remotion/tailwind-v4 to your config file:
remotion.config.ts
ts
import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind-v4';
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});

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

  2. Create a file postcss.config.mjs with the following content:

postcss.config.mjs
css
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
  1. Create a file src/index.css with the following content:
src/index.css
css
@import 'tailwindcss';
  1. Import the stylesheet in your src/Root.tsx file. Add to the top of the file:
src/Root.tsx
js
import './index.css';
  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"]
}
  1. 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.
bash
npm 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);
});
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;
  1. Import the stylesheet in your src/Root.tsx file. Add to the top of the file:
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: [],
};
  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"]
}
  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​