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

  1. Install the following dependencies:
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss autoprefixer
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss autoprefixer
  1. Create a function for overriding the webpack config
src/enable-tailwind.ts
ts
import { WebpackOverrideFn } from "remotion";
 
export const enableTailwind: WebpackOverrideFn = (currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules
? currentConfiguration.module.rules
: []
).filter((rule) => {
if (rule === "...") {
return false;
}
if (rule.test?.toString().includes(".css")) {
return false;
}
return true;
}),
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env",
"tailwindcss",
"autoprefixer",
],
},
},
},
],
},
],
},
};
};
src/enable-tailwind.ts
ts
import { WebpackOverrideFn } from "remotion";
 
export const enableTailwind: WebpackOverrideFn = (currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules
? currentConfiguration.module.rules
: []
).filter((rule) => {
if (rule === "...") {
return false;
}
if (rule.test?.toString().includes(".css")) {
return false;
}
return true;
}),
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env",
"tailwindcss",
"autoprefixer",
],
},
},
},
],
},
],
},
};
};
  1. Add the Webpack override to your config file:
remotion.config.ts
ts
import { Config } from "remotion";
import { enableTailwind } from "./src/enable-tailwind";
 
Config.Bundling.overrideWebpackConfig(enableTailwind);
remotion.config.ts
ts
import { Config } from "remotion";
import { enableTailwind } from "./src/enable-tailwind";
 
Config.Bundling.overrideWebpackConfig(enableTailwind);
  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/Video.tsx file. Add to the top of the file:
src/Video.tsx
js
import "./style.css";
src/Video.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.

See also