CSS output differs between development and production builds, breaking custom animation behavior

[yashmodi6]

What build tool are you using?

• Vite
• React (latest as of now)
• Tailwind CSS (latest as of now)

---

Describe the issue

This issue occurs only with one specific custom utility class: fadeIn.

In development (npm run dev), the class works exactly as expected. The animation behaves correctly based on scroll position.

However, after running a production build (npm run build) and then previewing (npm run preview), the compiled CSS changes the order of the properties inside the fadeIn class, causing the animation behavior to break.

---

Input Utility Class (index.css)

@utility fadeIn {
  scale: 0.7;
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    /* animation-range: entry; */
    animation-range-start: cover;
    animation-range-end: 400px;
}

---

Expected Output (Preserved order in compiled CSS)

.fadeIn {
  scale: 0.7;
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    /* animation-range: entry; */
    animation-range-start: cover;
    animation-range-end: 400px;
}

---

Actual Compiled Output (from production build)

.fadeIn {
        opacity: 0;
        animation: linear forwards fade-in;
        animation-timeline: view();
        animation-range: cover 400px;
        scale: 0.7;
}

---

🔁 Reproduction

A minimal Vite + React + Tailwind CSS setup demonstrating the issue:

👉 View Reproduction Repository

Why This Is a Problem

The order of CSS properties — especially with animation shorthand and scroll-based animation properties like animation-timeline and animation-range-start — matters. This breakage causes the animation to not behave as expected in production.

This issue does not occur in the development environment. Only the production CSS build reorders properties in this class.

---

System Info

• Tailwind CSS: latest as of now
• React: latest as of now
• Vite: default setup (no customization)
• Node: v18+
• No external CSS tools or plugins used

---

Additional Context

This issue only affects this particular class: fadeIn in my project.

Would appreciate guidance on how to preserve property order in production or disable CSS reordering for certain utility classes.

[YakshTechs]

Hey! 👋

Thanks for the detailed reproduction — I ran into this exact issue recently too. You're 100% right that the problem comes from CSS property reordering in production, and more specifically from Vite's PostCSS/CSS optimizer — not Tailwind itself.

Let me break it down and give you a clean workaround:

---

🔍 Root Cause

In production builds (npm run build), Vite + PostCSS + esbuild will optimize and reorder CSS properties to "minify" or "normalize" styles for performance. This reordering is fine most of the time, but when you're using modern scroll animations like:

animation-timeline: view();
animation-range-start: cover;
animation-range-end: 400px;

...the order of animation-* properties matters because shorthand like animation: fade-in linear forwards might override or interfere with the more specific longhands (animation-range-*, etc).

---

✅ Solution 1: Use !important or Split Out Longhands

One way to prevent optimization/reordering of important props is to split your animation declaration into longhands, like so:

@utility fadeIn {
  scale: 0.7;
  opacity: 0;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-timeline: view();
  animation-range-start: cover;
  animation-range-end: 400px;
}

This keeps each property separate, so even if the order shifts slightly, behavior won’t break. Also avoids using the shorthand, which is often the culprit.

---

✅ Solution 2: Disable PostCSS/CSS Optimization (not ideal, but works)

If you're okay with a slightly larger CSS file, you can disable css minification for production in your vite.config.js:

// vite.config.js
export default {
  css: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        // Disable cssnano (used internally by vite) or use a custom setup
      ],
    },
  },
  build: {
    minify: false // disables esbuild minification, including css
  }
}

Or, if you want to only disable css property sorting, you can eject from Vite’s default PostCSS pipeline and use postcss-sorting with a config that preserves original order.

But again: longhands over shorthands is the better fix.

---

🔁 Why It Works in Dev, Not Prod

In dev mode, Tailwind + Vite just serve raw CSS with minimal processing. In prod, Vite pipes your styles through optimization layers (esbuild, cssnano, etc) — and those layers aggressively rearrange CSS for "efficiency", not correctness with new CSS features like scroll timelines.

---

Let me know if you want a ready-to-copy @utility fadeIn using longhands — happy to drop it in. Tailwind 4 is amazing, but yeah, the ecosystem around it (like Vite optimizations) still needs to catch up with new CSS specs like animation-timeline.

Cheers! 👊

[yashmodi6]

Thanks for the thorough breakdown — totally agree with everything you said about how Vite’s production pipeline affects animation-* properties through reordering.

Just wanted to add:
I had already tried the longhand approach (splitting animation-name, animation-range-start, etc.), which helped partially, but I was still seeing inconsistent behavior in production — likely due to post-processing interference.

Since I didn’t want to disable minification (keeping bundle size lean is still a priority), the workaround that ended up working for me was:

✅ Moving the fadeIn animation utility into a standalone CSS file that’s not processed by Tailwind/PostCSS — just a regular CSS file imported into the component/page. This way, the animation properties are preserved exactly as written and don’t get touched by the optimizer.

It’s a bit of a separation from Tailwind's utility model, but it keeps things clean and production-safe until ecosystem tools catch up with newer specs like animation-timeline.

Appreciate the insights! 👊

The commit at which I did this fix in my repository has id of "27fb247"

The latest commit that produces the error was just before this commit which has id of "0f2dc3b"

https://github.com/yashmodi6/portfolio.git

[YakshTechs]

This answer is grenrated by ChatGPT right ?

[yashmodi6]

Had to improve my English sorry 😔