[postcss] Cannot create property tailwind.config.js on string node-jiti (File: index.css)

[talkohavy]

Tailwind: v3.3.2
Vite: v4.3.9
React: v18.2.0
Node: v19.0.0
Browser: Chrome
OS: Windows
pnpm: V8.6.5
Reproduction URL: https://github.com/talkohavy/vite-tailwind-bug

Describing the issue

All I did was simply create a new vite project, with react, and follow your documentation on how to add tailwind.
The steps being:

1. npm create vite@latest my-project -- --template react
2. cd my-project
3. code .
4. pnpm add -D tailwindcss postcss autoprefixer
5. npx tailwindcss init -p
6. add content to tailwind.config.js:
   content: [
   "./index.html",
   "./src/**/*.{js,ts,jsx,tsx}",
   ],
7. add to index.css these lines:
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
8. run the command: npm run dev

After doing all that, when I run the start script of npm run dev, I open up the brower to see the app,
and get this error:

[plugin:vite:css] [postcss] Cannot create property '*******\my-project\tailwind.config.js' on string '*****/AppData/Local/Temp/node-jiti'

[regzon]

I've just initialized a SvelteKit project and added Tailwind using instructions from the official website and got the same error.

[szmarczak]

unjs/jiti#147 (comment)

[regzon]

@szmarczak
Thanks! After npm update everything works fine.

[RobinMalfait]

Hey, thank you for this bug report! 🙏

As you mentioned this was an issue in jiti. While we don't really need to bump jiti because npm update already solves the issue, I bumped it anyway and did a few other version bumps as well.

This should be fixed by #11550, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.