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:
- npm
- yarn
- pnpm
bash
npx create-video --tailwind
bash
npx create-video --tailwind
bash
pnpm create video --tailwind
bash
pnpm create video --tailwind
bash
yarn create video -- --tailwind
bash
yarn create video -- --tailwind
Install in existing project
from v3.3.95, see instructions for older versions
- Install
@remotion/tailwind
package and TailwindCSS dependencies.
- npm
- yarn
- pnpm
bash
npm i -D @remotion/tailwind
bash
npm i -D @remotion/tailwind
bash
yarn add -D @remotion/tailwind
bash
yarn add -D @remotion/tailwind
bash
pnpm i -D @remotion/tailwind
bash
pnpm i -D @remotion/tailwind
- Add the Webpack override from
@remotion/tailwind
to your config file:
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableTailwind } from "@remotion/tailwind";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableTailwind (currentConfiguration );});
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableTailwind } from "@remotion/tailwind";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableTailwind (currentConfiguration );});
note
Prior to v3.3.39
, the option was called Config.Bundling.overrideWebpackConfig()
.
If you use the
bundle()
ordeploySite()
Node.JS API, add the Webpack override to it as well.Create a file
src/style.css
with the following content:
src/style.csscss
@tailwind base;@tailwind components;@tailwind utilities;
src/style.csscss
@tailwind base;@tailwind components;@tailwind utilities;
- Import the stylesheet in your
src/Root.tsx
file. Add to the top of the file:
src/Root.tsxjs
import "./style.css";
src/Root.tsxjs
import "./style.css";
- Add a
tailwind.config.js
file to the root of your project:
tailwind.config.jsjs
/* eslint-env node */module.exports = {content: ["./src/**/*.{ts,tsx}"],theme: {extend: {},},plugins: [],};
tailwind.config.jsjs
/* eslint-env node */module.exports = {content: ["./src/**/*.{ts,tsx}"],theme: {extend: {},},plugins: [],};
- Ensure your
package.json
does not have"sideEffects": false
set. If it has, declare that CSS files have a side effect:
package.jsondiff
{// Only if `"sideEffects": false` exists in your package.json.- "sideEffects": false+ "sideEffects": ["*.css"]}
package.jsondiff
{// Only if `"sideEffects": false` exists in your package.json.- "sideEffects": false+ "sideEffects": ["*.css"]}
- 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.