@remotion/tailwind-v4

此软件包提供了用于将 TailwindCSS v4 与 Remotion 集成的实用工具，具体如我们在 TailwindCSS 页面中所述。

🌐 This package provides utilities useful for integrating TailwindCSS v4 with Remotion, as documented on our TailwindCSS page.

安装

🌐 Installation

安装 @remotion/tailwind-v4 以及 TailwindCSS 依赖。

🌐 Install @remotion/tailwind-v4 as well as TailwindCSS dependencies.

Remotion CLI

npx remotion add @remotion/tailwind-v4

npm

npm i --save-exact @remotion/tailwind-v4@4.0.431

This assumes you are currently using v4.0.431 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

bun

pnpm i @remotion/tailwind-v4@4.0.431

This assumes you are currently using v4.0.431 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

pnpm

bun i @remotion/tailwind-v4@4.0.431

This assumes you are currently using v4.0.431 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

yarn

yarn --exact add @remotion/tailwind-v4@4.0.431

This assumes you are currently using v4.0.431 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

通过使用 enableTailwind() 来覆盖 Webpack 配置。

remotion.config.ts
import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind-v4';

Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});

然后按照 TailwindCSS 页面上的其余设置步骤操作。

🌐 Then follow the remaining set up steps from the TailwindCSS page.

应用接口

🌐 APIs

enableTailwind()

Override the Webpack config to enable TailwindCSS