Skip to main content

TailwindCSS

使用命令行接口​

🌐 Using the CLI

开始使用 Tailwind 最简单的方法是通过 CLI 构建一个新视频，并选择一个支持自动添加 Tailwind 的模板。

🌐 The easiest way to get started with Tailwind is by scaffolding a new video using the CLI and selecting a template that supports adding Tailwind automatically.

npx create-video@latest

以下模板支持使用 TailwindCSS 的脚手架：

在现有项目中安装 Tailwind v4​

🌐 Installing Tailwind v4 in existing project

来自 v4.0.256

🌐 from v4.0.256

  1. 安装 @remotion/tailwind-v4 包和 TailwindCSS 依赖。
npm i -D @remotion/tailwind-v4 tailwindcss
  1. 将来自 @remotion/tailwind-v4 的 Webpack 覆盖添加到你的配置文件中：
remotion.config.ts
import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind-v4';

Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});
  1. 如果你使用 bundle() 或 deploySite() Node.JS API，也将 Webpack 覆盖添加到它上面。
  2. 创建一个名为 src/index.css 的文件，内容如下：
src/index.css
@import 'tailwindcss';
  1. 在你的 src/Root.tsx 文件中导入样式表。将以下内容添加到文件顶部：
src/Root.tsx
import './index.css';
  1. 确保你的 package.json 没有设置 "sideEffects": false。如果有，请声明 CSS 文件有副作用：
package.json
{
// Only if `"sideEffects": false` exists in your package.json.
-  "sideEffects": false
+  "sideEffects": ["*.css"]
}
  1. 开始使用 TailwindCSS！你可以通过在任何元素上添加 className="bg-red-900" 来验证它是否正常工作。

在现有项目中安装 Tailwind v3​

🌐 Installing Tailwind v3 in existing project

从 v3.3.95 版本起，请参阅旧版本说明

🌐 from v3.3.95, see instructions for older versions

  1. 安装 @remotion/tailwind 包和 TailwindCSS 依赖。
npm i -D @remotion/tailwind
  1. 将来自 @remotion/tailwind 的 Webpack 覆盖添加到你的配置文件中：
remotion.config.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()。

  1. 如果你使用 bundle() 或 deploySite() Node.JS API，也将 Webpack 覆盖添加到它上面。
  2. 创建一个名为 src/style.css 的文件，内容如下：
src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 在你的 src/Root.tsx 文件中导入样式表。将以下内容添加到文件顶部：
src/Root.tsx
import './style.css';
  1. 在项目根目录添加一个 tailwind.config.js 文件：
tailwind.config.js
/* eslint-env node */
module.exports = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. 确保你的 package.json 没有设置 "sideEffects": false。如果有，请声明 CSS 文件有副作用：
package.json
{
// Only if `"sideEffects": false` exists in your package.json.
-  "sideEffects": false
+  "sideEffects": ["*.css"]
}
  1. 开始使用 TailwindCSS！你可以通过在任何元素上添加 className="bg-red-900" 来验证它是否正常工作。
note

你的包管理器可能会显示一个同伴依赖警告。你可以安全地忽略它，或者将 strict-peer-dependencies=false 添加到你的 .npmrc 中以抑制它。

另请参阅​

🌐 See also

Last updated on