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?

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?

• tailwind-css

• 1 If space-y-6 is explicitly written in one of your files, it will definitely be included in the build. Check the generated CSS from the build to see if the class is present. If it is, and you've updated the production release, caching issues are usually the cause of such anomalies. – rozsazoltan Commented Jan 31 at 19:53
• 1 Thanks. I've compared both local and production generated CSS and the class is in both places, but a little different on production. Something about the slightly different CSS means it's not working anymore. – Fijjit Commented Feb 1 at 8:28
• I tested the production build with TailwindCSS v4.0.3. For me, your dev version was generated, just a optimized version of this: :where(.space-y-6 > :not(:last-child)) { ... } Are you running any additional processors when generating the build CSS that might affect the final output? Have you checked in a fresh, clean installation to see if the issue can be reproduced? – rozsazoltan Commented Feb 5 at 20:14

1 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'
    }
  },
})