@remotion/tailwind
This package provides utilities useful for integrating TailwindCSS with Remotion, as documented on our TailwindCSS page.
Installation
Install @remotion/tailwind
as well as 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
Also update all the other Remotion packages to have the same version: remotion
, @remotion/cli
and others.
note
Make sure no package version number has a ^
character in front of it as it can lead to a version conflict.
Override the Webpack config by using enableTailwind()
.
remotion.config.tsts
import {Config } from "remotion";import {enableTailwind } from "@remotion/tailwind";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableTailwind (currentConfiguration );});
remotion.config.tsts
import {Config } from "remotion";import {enableTailwind } from "@remotion/tailwind";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableTailwind (currentConfiguration );});
Then follow the remaining set up steps from the TailwindCSS page.
Templates
You can find the starter template here or install it using:
- npm
- yarn
- pnpm
bash
npx create-video --tailwind
bash
npx create-video --tailwind
bash
yarn create video --tailwind
bash
yarn create video --tailwind
bash
pnpm create video -- --tailwind
bash
pnpm create video -- --tailwind