enableTailwind()

从 v3.3.95 起可用

🌐 available from v3.3.95

note

这是关于启用 Tailwind v3 的文档。
关于该网站 Tailwind v4 版本的文档，请参见 Tailwind v4 文档。

一个修改默认 Webpack 配置的函数，以进行必要的更改以支持 TailwindCSS。请参阅 setup 查看在 Remotion 中设置 TailwindCSS 的完整说明。

🌐 A function that modifies the default Webpack configuration to make the necessary changes to support TailwindCSS. See the setup to see full instructions on how to setup TailwindCSS in Remotion.

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

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

多个 Webpack 变更

🌐 Multiple Webpack changes

如果你想进行其他配置更改，你可以通过类似 reducer 的方式来操作：

🌐 If you want to make other configuration changes, you can do so by doing them reducer-style:

remotion.config.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

🌐 Custom Tailwind config locationv4.0.187

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

🌐 By default, TailwindCSS will search for a file called tailwind.config.js in the current working directory where you executed the Remotion CLI.
This is not in line with Remotion which resolves files relative to the Remotion Root.

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

🌐 This mean if you execute the Remotion CLI from a different directory, Tailwind will not be able to find the config file.
To fix this, you can pass the path to the config file as the second argument to enableTailwind():

remotion.config.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'),
  });
});