Search code examples
cssvuejs3tailwind-cssnuxtjs3

Tailwind/Nuxt issue - inline space between elements is missing

When using tailwind v3.4.3 on tailwind playground space is added b/w span elements

<div>
  <p>
    <span class="bg-slate-800">TEST</span>
    <span class="bg-orange-600">TEST 2</span>
    <span class="bg-yellow-500">TEST 3</span>
  </p>
</div>

Copy Paste the above code on play.tailwindcss.com You can see the extra space added b/w span elements.

enter image description here

When I try to do similar thing in Nuxt 3 with tailwind installation, space between span elements is missing.

enter image description here

I have already setup edit with nuxt and tailwind configuration, editor link

I have also installed tailwind using nuxt modules '@nuxtjs/tailwindcss', but still the issue persists.

I am currently migrating my project from nuxt 2 to nuxt 3, nuxt 2 project show similar behaviour as shown by tailwindcss playground, but on nuxt 3 its breaking.

Solving this space issue would be a great help to the project.

Solution

  • By default, Vue compiles SFCs with whitespace condensed. To change this behavior, edit nuxt.config.ts

    export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      whitespace: 'preserve'
    }
  }
})

    FYI, when not using Nuxt, the required config change is slightly different in vite.config.ts

    export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'preserve'
        }
      }
    })
  ]
})