Tailwind配置文件中keyframes内background-position属性失效问题

问题原因分析 #

你的动画注册本身是有效的（opacity动画能正常运行），但background-position动画失效主要有两个核心问题：

• 自定义背景尺寸类未注册：你使用了tw-bg-size-200，但未在Tailwind配置中扩展backgroundSize，导致该类无法生效，渐变背景尺寸还是默认值，移动background-position看不出效果。
• 渐变定义不完整+颜色配置缺失：仅用了from和via而未指定to颜色，渐变终点不明确；同时你在colors配置中只保留了transparent，覆盖了Tailwind默认的white、gray色系，导致tw-from-white、tw-via-gray-300这些类根本无法生效。

修复步骤 #

1. 补全Tailwind配置
   在theme.extend里添加backgroundSize配置，同时恢复需要用到的颜色：

const colors = require("tailwindcss/colors");

module.exports = {
  content: ["./public/**/*.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      animation: {
        mainLoading: "mainLoading 1s ease infinite",
      },
      keyframes: {
        mainLoading: {
          "0%": {
            "background-position": "0% 0%",
          },
          "50%": {
            "background-position": "100% 0%",
          },
          "100%": {
            "background-position": "0% 0%",
          },
        },
      },
      // 注册自定义背景尺寸，让bg-size-200对应横向2倍宽的背景
      backgroundSize: {
        '200': '200% 100%',
      },
    },
    colors: {
      transparent: "transparent",
      // 恢复需要用到的颜色，否则渐变类会失效
      white: colors.white,
      gray: colors.gray,
    },
  },
  plugins: [],
  prefix: "tw-",
};

2. 完善渐变背景类
   添加tw-to-white让渐变形成循环（从白到灰再回到白），确保动画滑动时视觉连贯：

<div className="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-flex tw-flex-col tw-text-center tw-justify-center tw-z-20 tw-bg-gradient-to-r tw-from-white tw-via-gray-300 tw-to-white tw-bg-size-200 tw-animate-mainLoading">

原理说明 #

通过将背景尺寸设置为200%宽度，配合keyframes中background-position从0%到100%的往复移动，渐变背景会横向滑动形成加载动画；完整的from/via/to渐变确保滑动过程中颜色过渡自然，不会出现断层。

内容的提问来源于stack exchange，提问作者Divakar R