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

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

Share Improve this question Follow edited Feb 1 at 8:27 Fijjit asked Jan 31 at 19:42 FijjitFijjit 1,49722 gold badges1919 silver badges3333 bronze badges 3

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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'
    }
  },
})