TailwindCSS

使用模板

开始使用 Tailwind 和 Remotion 的最简单方法是克隆 GitHub 上的模板或运行以下命令：

npm

bash
npx create-video --tailwind

bash
npx create-video --tailwind

bun

bash
pnpm create video --tailwind

bash
pnpm create video --tailwind

pnpm

bash
bun create video --tailwind

bash
bun create video --tailwind

yarn

bash
yarn create video -- --tailwind

bash
yarn create video -- --tailwind

在现有项目中安装

从 v3.3.95 开始，请参阅旧版本的说明

1. 安装 @remotion/tailwind 包和 TailwindCSS 依赖项。

npm

bash
npm i -D @remotion/tailwind

bash
npm i -D @remotion/tailwind

yarn

bash
yarn add -D @remotion/tailwind

bash
yarn add -D @remotion/tailwind

pnpm

bash
pnpm i -D @remotion/tailwind

bash
pnpm i -D @remotion/tailwind

2. 将 Webpack 覆盖项从 @remotion/tailwind 添加到您的配置文件：

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableTailwind } from "@remotion/tailwind";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableTailwind } from "@remotion/tailwind";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});

note

在 v3.3.39 之前，该选项称为 Config.Bundling.overrideWebpackConfig()。

3. 如果您使用 bundle() 或 deploySite() Node.JS API，请将 Webpack 覆盖项也添加到其中。

4. 创建一个名为 src/style.css 的文件，并添加以下内容：

src/style.css
css
@tailwind base;
@tailwind components;
@tailwind utilities;

src/style.css
css
@tailwind base;
@tailwind components;
@tailwind utilities;

5. 在您的 src/Root.tsx 文件中导入样式表。在文件顶部添加：

src/Root.tsx
js
import "./style.css";

src/Root.tsx
js
import "./style.css";

6. 在项目根目录添加一个 tailwind.config.js 文件：

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: [],
};

7. 确保您的 package.json 文件中没有设置 "sideEffects": false。如果有，请声明 CSS 文件具有副作用：

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"]
}

8. 开始使用 TailwindCSS！您可以通过向任何元素添加 className="bg-red-900" 来验证它是否起作用。

note

您的软件包管理器可能会显示对等依赖警告。您可以安全地忽略它，或者在您的 .npmrc 中添加 strict-peer-dependencies=false 来抑制它。

另请参阅

• TailwindCSS v2 (legacy)