Skip to main content

TailwindCSS v2 (Legacy)

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

info

This documentation concerns TailwindCSS v2. See here for V3!

  1. Install the following dependencies:

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

bash
npm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
bash
pnpm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
bash
pnpm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
bash
yarn add postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
bash
yarn add postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
  1. Add the following to your remotion.config.ts file:
ts
Config.overrideWebpackConfig((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",
],
},
},
},
],
},
],
},
};
});
ts
Config.overrideWebpackConfig((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. Create a file src/style.css with the following content:
css
@tailwind base;
@tailwind components;
@tailwind utilities;
css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Import the stylesheet in your src/Root.tsx file. Add to the top of the file:
js
import "./style.css";
js
import "./style.css";
  1. Start using TailwindCSS! You can verify that it's working by adding className="bg-red-900" to any element.

  2. Optional: Add a tailwind.config.js file to the root of your project. Add /* eslint-env node */ to the top of the file to get rid of an ESLint rule complaining that module is not defined.

warning

Due to a caching bug, the config file might not be picked up until you remove the node_modules/.cache folder - watch this issue: https://github.com/remotion-dev/remotion/issues/315