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 -D postcss-loader postcss postcss-preset-env tailwindcss autoprefixer css-loader style-loader
bash
npm i -D postcss-loader postcss postcss-preset-env tailwindcss autoprefixer css-loader style-loader
  1. Create a function for overriding the webpack config
src/enable-tailwind.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
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/bundler";
 
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.overrideWebpackConfig(enableTailwind);
remotion.config.ts
ts
import { Config } from "remotion";
import { enableTailwind } from "./src/enable-tailwind";
 
Config.overrideWebpackConfig(enableTailwind);
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.

See also​