Skip to main content

enableTailwind()

从 v3.3.95 版本开始可用

这是一个函数，它修改默认的 Webpack 配置以进行必要的更改，以支持 TailwindCSS。 查看设置以查看如何在 Remotion 中设置 TailwindCSS 的完整说明。

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);
});

多个 Webpack 更改​

如果您想进行其他配置更改，可以通过 reducer 风格来实现：

remotion.config.ts
ts
import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind';
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind({
    ...currentConfiguration,
 
    // Make other changes
  });
});
remotion.config.ts
ts
import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind';
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind({
    ...currentConfiguration,
 
    // Make other changes
  });
});

自定义 Tailwind 配置文件位置v4.0.187​

默认情况下，TailwindCSS 会在您执行 Remotion CLI 的当前工作目录中搜索名为 tailwind.config.js 的文件。
这与 Remotion 不一致，Remotion 会相对于Remotion 根目录解析文件。

这意味着，如果您从不同的目录执行 Remotion CLI，则 Tailwind 将无法找到配置文件。
要解决此问题，您可以将配置文件的路径作为 enableTailwind() 的第二个参数传递：

remotion.config.ts
ts
import path from 'node:path';
import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind';
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration, {
    configLocation: path.join(__dirname, 'tailwind.config.js'),
  });
});
remotion.config.ts
ts
import path from 'node:path';
import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind';
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration, {
    configLocation: path.join(__dirname, 'tailwind.config.js'),
  });
});