v4 vite PostCSS plugin error when app root folder contains a hyphen [-]

[y-core]

It appears that using the @tailwindcss/vite plugin, when app root folder contains a hyphen [-] the following error is thrown.

[postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

node_modules/tailwindcss/dist/lib.js:33:1716 is where the final error is thrown.

What version of Tailwind CSS are you using?

4.0.6

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

Vite 6.1.0

What version of Node.js are you using?

22

What browser are you using?

N/A

What operating system are you using?

macOS

my use case happens to be when using react-router, but I've tracked it down to what appears to be the @tailwindcss/vite plugin.

Steps to reproduce: 🔴

mkdir local-app
cd local-app
npx create-react-router . 
npm i

This creates a vite.config.ts that includes:

import tailwindcss from "@tailwindcss/vite";
...
export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
});

npm run dev - when accessing http://localhost:5173 throws error: [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin...

Steps to reproduce: 🟢
When creating a directory without hyphen, it works fine

mkdir localapp
cd localapp
npx create-react-router . 
npm i

npm run dev - http://localhost:5173 works perfectly

downgrading to tailwindcss@3 and not using the v4 plugin or removing the hyphen from the root folder name both resolves the issue

[philipp-spiess]

Hey! It looks like you for some reason still use Tailwind CSS as a Post CSS plugin somewhere. However, when I try to run create-react-router to set up a new app it will use the Vite setup and works fine. Do you have a postcss config file lying around?

[y-core]

Thank you Philipp.

I did some additional testing and tracing. I noticed that I had previously used a docker image that mounted the same folder name with postcss configured. It appears that this config stuck around post v4 upgrade.

Once I prune all previously mounted volumes - docker system prune --all --volumes - the startup with v4 upgrade works correctly.

The hyphen in the folder was a red herring, the folder names I tested, were simply names that had been mounted in docker images used previously

Thanks a stack for your input. This can definitely be closed.