Tailwind Css Vite build warning

[dev-patricksampson]

My project is Solid.JS and it uses Vite/TailwindCSS. Before I used TailwindCSS 3 and migrated to v4. And while I running the build command, vite build and it generates build files. And I can see that warning in the build log

What version of Tailwind CSS are you using?

"@tailwindcss/vite": "^4.0.0",
"tailwindcss": "^4.0.0",

What build tool (or framework if it abstracts the build tool) are you using?

vite": "^6.0.11",

What version of Node.js are you using?

"@types/node": "^22.12.0",

What browser are you using?

Chrome

What operating system are you using?

Linux

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

Attached my warning message while build

[plugin @tailwindcss/vite:generate:build] Sourcemap is likely to be incorrect: a plugin (@tailwindcss/vite:generate:build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

In the vite.config.js, if I remove tailwindcss(), it doesn't throw any warning. But I followed your migration guide.
return {
plugins: [
tailwindcss(),
solidPlugin(),

[philipp-spiess]

Hey! Yeah we don't have proper sourcemapping for our transforms yet. That's something we'll add at a later point but not usually something to be concerned about.

[gengurke]

Great to hear! Im getting the same warning. I would not care about the warnings, but this seem to mess with my source mapping. Looking forward to a fix, thank you :)

[dotM87]

In my case, there are usually no problems until we have to build the project and all the tailwind styles are lost, how can I solve that, I am new to this.

[edcaron]

If anyone want to hide this warnings from the build process for now, put this on your vite config file vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      onwarn(warning, warn) {
          // Ignore sourcemap warnings
          if (warning.code === 'SOURCEMAP_BROKEN') {
              return;
          }

          warn(warning);
      }
    }
  }
});

[simonmaass]

this does not silence the warnings for me

[scottfoxus]

I am experiencing this error on a brand new nuxt project without modifications, which was a surprise. I decided to suppress the error specifically for Tailwind, so if other modules begin to have issues I will know.

nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    plugins: [
      {
        name: "vite-plugin-ignore-sourcemap-warnings",
        apply: "build",
        configResolved(config) {
          config.build.rollupOptions.onwarn = (warning, warn) => {
            if (
              warning.code === "SOURCEMAP_BROKEN" &&
              warning.plugin === "@tailwindcss/vite:generate:build"
            ) {
              return;
            }

            warn(warning);
          };
        },
      },
    ],
  }
});

[simonmaass]

this removes the source map warning but creates different warnings for me...

[envygeeks]

You can fix that with:

{
  apply: 'build',
  name: 'vite-plugin-ignore-sourcemap-warnings',
  configResolved(config) {
    const originalOnWarn = config.build.rollupOptions.onwarn;
    config.build.rollupOptions.onwarn = (warning, warn) => {
      if (
        warning.code === 'SOURCEMAP_BROKEN' &&
        warning.plugin === '@tailwindcss/vite:generate:build'
      ) {
        return;
      }

      if (originalOnWarn) {
        originalOnWarn(
          warning, warn
        );
      } else {
        warn(
          warning
        );
      }
    };
  },
},