Why does space-y Tailwind class work on dev but not production?

Question

I have built a Nuxt app using Tailwind CSS for the first time, but found that space-y-6 works fine on local but not in production - the class has no effect there.

  <div class="prose space-y-6 first-letter:font-bold first-letter:float-left first-letter:mr-3 first-letter:text-7xl">
<p>...</p>
<p>...</p>
  </div>
</template>

On local, the class in tailwind.css looks like this:

.space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0 !important;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)) !important;
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))) !important;
    }
  }

And on production it's subtly different:

.space-y-6 :where(>:not(:last-child)) {
                    --tw-space-y-reverse: 0!important;
                    margin-block-end:calc(var(--spacing)*6*(1 - var(--tw-space-y-reverse)))!important;margin-block-start: calc(var(--spacing)*6*var(--tw-space-y-reverse))!important
                }

Any ideas?

Answer 1

By adding cssMinify to my vite build configuration and setting it to 'lightningcss' it seems to get it working again.

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  vite: {
    plugins: [
      tailwindcss()
    ],
    build: {
      cssMinify: 'lightningcss'
    }
  },
})