Tailwind Keyframes与Animation生产环境失效问题求助

开发环境中Tailwind的keyframes和动画类可正常运行，但构建后生产环境完全失效，浏览器DevTools中无法找到对应的CSS代码。已将animate-fade-in、animate-fade-out加入safelist，仍怀疑被Purge机制清除。

相关代码文件 #

Svelte 文件 #

<div class="relative pt-4">
    <!-- First button (fades out) -->
    <Button class="absolute w-full gap-2 bg-gradient-to-r from-primary-darkest from-5% via-primary-500 via-80% to-primary-pink to-100% text-white opacity-100
                       shadow-lg ring-0 focus-within:ring-0 animate-fade-out">
        <LandmarkSolid size="md" />Loading...
    </Button>

    <!-- Second button (fades in) -->
    <Button class="w-full gap-2 bg-gradient-to-l from-primary-darkest from-5% via-primary-500 via-80% to-primary-pink to-100% text-white opacity-0
                       shadow-lg ring-0 focus-within:ring-0 animate-fade-in">
        <LandmarkSolid size="md" />Loading...
    </Button>
</div>

tailwind.config.js #

// Import flowbite from 'flowbite/plugin'
import flowbite from './node_modules/flowbite/plugin.js'

// Import primary colours
import { colours } from './src/lib/themes/primaryColours.js'

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
    safelist: [
        'backdrop-blur-sm',
        'backdrop-filter',
        'animate-fade-in',
        'animate-fade-out',
    ],

    plugins: [flowbite],

    // darkMode: 'class',

    theme: {
        extend: {
            keyframes: {
                fadeIn: {
                    '0%': { opacity: '0' },
                    '100%': { opacity: '1' },
                },
                fadeOut: {
                    '0%': { opacity: '1' },
                    '100%': { opacity: '0' },
                },
            },
            animation: {
                'fade-in': 'fadeIn 1s ease-in-out infinite alternate',
                'fade-out': 'fadeOut 1s ease-in-out infinite alternate',
            },
            colors: {
                primary: colours
            },
        },
    },
}

app.css #

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

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

@layer base {
    [aria-label='Close modal'] {
        content: attr(aria-label);
        display: none;
        visibility: hidden;
    }

    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    @keyframes fadeOut {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }
}

@layer utilities {
    .animate-fade-in {
        animation: fadeIn 1s ease-in-out infinite alternate;
    }

    .animate-fade-out {
        animation: fadeOut 1s ease-in-out infinite alternate;
    }
}

问题分析 #

核心问题是重复定义导致的冲突与Purge识别异常：

1. 同时在tailwind.config.js和app.css中定义了同名的keyframes和动画类，Tailwind生产构建的优化逻辑会对这类重复代码进行清理
2. @layer utilities中手动编写的动画类，没有和Tailwind的配置系统关联，即便加入safelist，也可能被Purge机制误判为未使用代码移除

解决方案 #

1. 移除重复定义，统一使用Tailwind配置 #

删掉app.css中@layer base和@layer utilities里的keyframes与动画类定义，仅保留Tailwind配置中的定义——Tailwind会自动根据theme.extend.animation的配置生成对应的animate-*类，无需手动编写CSS。

修改后的app.css：

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

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

@layer base {
    [aria-label='Close modal'] {
        content: attr(aria-label);
        display: none;
        visibility: hidden;
    }
}

2. 确认safelist与content配置有效性 #

• 当前safelist中的animate-fade-in、animate-fade-out拼写正确，与Tailwind生成的类名匹配，无需调整
• 检查content数组是否覆盖了所有使用动画类的文件，当前配置./src/**/*.{html,js,svelte,ts}已覆盖所有src下的Svelte文件，符合要求

3. 清理缓存后重新构建 #

生产构建的缓存可能残留旧代码，执行以下步骤：

• 删除项目的node_modules/.cache目录（针对Vite/SvelteKit项目）
• 清空dist/build输出目录
• 重新执行构建命令

4. 验证生成结果 #

在开发环境中查看生成的CSS，确认animate-fade-in、animate-fade-out类存在；构建完成后检查生产环境的CSS文件，确认这些类已被正确保留。

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