TailwindCSS v2（旧版）

info

此文档涉及 TailwindCSS v2。点击这里查看 V3！

1. 安装以下依赖：

npm

npm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer

yarn

pnpm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer

pnpm

yarn add postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer

2. 将以下内容添加到你的 remotion.config.ts 文件中：

Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []
        ).filter((rule) => {
          if (!rule) {
            return false;
          }
          if (rule === "...") {
            return false;
          }
          if (rule.test?.toString().includes(".css")) {
            return false;
          }
          return true;
        }),
        {
          test: /\.css$/i,
          use: [
            "style-loader",
            "css-loader",
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: [
                    "postcss-preset-env",
                    "tailwindcss",
                    "autoprefixer",
                  ],
                },
              },
            },
          ],
        },
      ],
    },
  };
});

3. 创建一个名为 src/style.css 的文件，内容如下：

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 在你的 src/Root.tsx 文件中导入样式表。将以下内容添加到文件顶部：

import "./style.css";

5. 开始使用 TailwindCSS！你可以通过在任何元素上添加 className="bg-red-900" 来验证它是否正常工作。
6. 可选: 在项目根目录下添加一个 tailwind.config.js 文件。在文件顶部添加 /* eslint-env node */，以消除 ESLint 关于 module 未定义的规则警告。

warning

由于缓存错误，配置文件可能不会被识别，直到你删除 node_modules/.cache 文件夹 - 关注此问题：https://github.com/remotion-dev/remotion/issues/315