My code was the same but suddenly deployments started throwing these errors:

Here's the code for both:
Header:

.header {
    @apply w-full fixed top-0
    flex justify-between items-center 
    
    border-b-[.1rem]
    border-white bg-black z-[700]

    py-[1.5rem] px-[var(--spacing)]
}

.headerAppear {
    @apply border-black;
    animation: headerAppear 2s ease-in-out forwards;
    animation-delay: 7s;
}

@keyframes headerAppear {
    0% {
        @apply border-black;
    }
    100% {
        @apply border-white;
    }
}

.navItem {
    @apply text-[1.25rem] text-white font-[400] tracking-normal cursor-pointer;

    &:hover {
        @apply skew-x-[-12deg] duration-300;
    }
}

And preloader:

.text {
    @apply text-[3rem] lg:text-[6rem] tracking-normal
    
    opacity-0 translate-y-[-5rem] scale-[.95];

    transition: ease .5s;
}

.visible {
    @apply opacity-100 translate-y-0 scale-100;
}

.preloaderHidden {
    top: -100vh;
}

.actionText {
    @apply whitespace-nowrap text-[1rem];
    animation: actionTextBlink 1.5s ease-in-out infinite;
}

@keyframes actionTextBlink {
    0% {
        @apply opacity-50;
    }
    50% {
        @apply opacity-100;
    }
    100% {
        @apply opacity-50;
    }

}

How can I fix this so it can work without removing tailwind styles?