Tailwind Keyframes & Animation not working in production - Stack Overflow

admin管理员组

文章数量:1406177

Seem to have a really weird issue where keyframes and animations work in dev but not in production when I build the project.

I've pretty much exhausted every avenue hence me posting this question.

In DevTools I can see the CSS is missing in production so I'm not sure whether it's somehow getting purged even though I've added it to the safelist.

Svelte file

<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;
    }
}

本文标签： Tailwind Keyframes amp Animation not working in productionStack Overflow