Unexpected extra output after upgrading to v4 with Vite plugin

[alexchexes]

I am using TailwindCSS with Vue. I just tried updating to v4 and, as the docs suggest, switched from the PostCSS plugin to the Vite plugin. Now, I see this every time I run pnpm dev or navigate through pages in my Vue SPA:

Before (v3):

Is this the expected behavior now, or did I do something wrong?

Either way, how should one get rid of that meaningless extra output?

[Inventoris]

Hey @alexchexes.

It looks like you see duplicate lines when you run the project because of CSS reprocessing. This can be caused by incorrectly configured caching or conflicts between plugins.

Are you sure you removed the PostCSS plugin and they don't conflict? If so, try adding the following code to the vite config for caching:

css: {
  preprocessorOptions: {
    css: {
      cache: true
    }
  }
}

[alexchexes]

Hey @Inventoris,

Try adding the following code to the Vite config for caching.

Nope, it didn't help.

Are you sure you removed the PostCSS plugin and that there are no conflicts?

How do I know that for sure? I tried searching all files across the project for "postcss," but it seems like there's nothing except for a few entries in pnpm-lock.yaml:

Here’s everything related to Tailwind in my project after updating to v4 and removing PostCSS:

vite.config.js:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      css: {
        cache: true,
      },
    },
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'preserve',
        },
      },
    }),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  build: {
    outDir: '../web/vueapp',
  },
})

tailwind.config.js:

import defaultTheme from 'tailwindcss/defaultTheme'
import plugin from 'tailwindcss/plugin'

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Roboto', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    plugin(function ({ addBase }) {
      addBase({
        'html': { fontSize: '15px' },
      })
    }),
  ],
}

src/assets/main.css:

@import 'tailwindcss';
@config '../../tailwind.config.js';

Tailwind-related packages in package.json:

{
  // ...
  "dependencies": {
    // ...
    "tailwind-merge": "^3.0.1",
    "vue": "^3.5.13",
    // ...
  },
  "devDependencies": {
    // ...
    "tailwindcss": "^4.0.4",
    "@tailwindcss/vite": "^4.0.4",
    "prettier": "^3.4.2",
    "prettier-plugin-organize-attributes": "^1.0.0",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "vite": "^6.1.0",
    // ...
  }
}

Any ideas?

[alexchexes]

Well, I just found out that it was a bug: #16307 (someone left a console.log in the @tailwindcss/vite source code).

So with the latest @tailwindcss/vite 4.0.5 update, the issue is solved. Thanks, everyone, for the help!