Skip to main content

TailwindCSS

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:

bash
npx create-video --tailwind
bash
npx create-video --tailwind

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