Skip to main content

TailwindCSS v2（遗留版）

info

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

  1. 安装以下依赖项：
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
  1. 将以下内容添加到您的 remotion.config.ts 文件中：
ts
Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []
        ).filter((rule) => {
          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",
                  ],
                },
              },
            },
          ],
        },
      ],
    },
  };
});
ts
Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []
        ).filter((rule) => {
          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",
                  ],
                },
              },
            },
          ],
        },
      ],
    },
  };
});
  1. 创建一个名为 src/style.css 的文件，并添加以下内容：
css
@tailwind base;
@tailwind components;
@tailwind utilities;
css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 在您的 src/Root.tsx 文件中导入样式表。将以下内容添加到文件顶部：
js
import "./style.css";
js
import "./style.css";

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

  2. 可选: 在项目根目录添加一个 tailwind.config.js 文件。在文件顶部添加 /* eslint-env node */ 以消除一个 ESLint 规则，该规则会抱怨 module 未定义。

warning

由于缓存错误，可能需要删除 node_modules/.cache 文件夹才能识别配置文件 - 观察此问题：https://github.com/remotion-dev/remotion/issues/315