PostCSS plugin not processing changes outside base directory

[loderunner]

What version of Tailwind CSS are you using?

3.4.3

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

• vite@5.2.11
• postcss@8.4.38

What version of Node.js are you using?

20.12.1

What browser are you using?

Chrome

What operating system are you using?

macOS, Ubuntu 20.04.6 LTS

Reproduction URL

https://codesandbox.io/p/github/loderunner/tailwind-semantic-demo/monorepo-bug-demo

Reproduction method

• Wait for Vite server to start and page to load
• Remove preset from tailwind.config.js and save file
  • Page automatically updates => background switches to white
• Add preset to tailwind.config.js and save file
  • Page automatically updates => background switches to pale yellow
• In preset/src/plugin/index.ts, change backgroundColor to theme("colors.sun.950")
  • Page does not automatically update, background color remains pale yellow
• Refresh page
  • no CSS update, background color remains pale yellow
• Restart Vite server (npm run --workspace app dev)
  • Page updates, background color switches to dark brown

Expected result

Styles auto-update on save of dependency in preset workspace.

Describe your issue

I am building a React app using Tailwind, Vite and PostCSS, as a monorepo. The repo currently has 2 workspaces: app for the React app, and preset which exports a Tailwind preset with themes and a plugin.

The (abridged) project layout:

├── package.json
├── app
│   ├── package.json
│   ├── postcss.config.js
│   ├── tailwind.config.js
│   └── vite.config.ts
└── preset
    ├── package.json
    └── src
        └── index.ts

app/tailwind.config.js

import preset from "preset";

export default {
  content: ["./index.html", "./src/**/*.{html,js,jsx,ts,tsx}"],
  presets: [preset],
};

When I run vite in dev mode, Vite server sets up "hot module reload" which enables automatically reloading the page on file changes.

When I change tailwind.config.js, Vite HMR is able to reprocess CSS and automatically update styles. When I update styles in the preset workspace, Vite does not reprocess CSS, and styles are not updated, even after manually refreshing the page. The only way to force Vite to reprocess CSS is to restart the Vite server.

Intuition

It could be that scanDir used here is unable to scan directories outside of base, which doesn't let it report those files as dependency (or dir-dependency) to Vite. If I manage to setup a development environment, I will test that theory and report back.

[loderunner]

This issue seems similar to #13419 & #13533

[Javi-Soluble]

Same issue with webpack and turborepo

[Javi-Soluble]

This issue seems similar to #13419 & #13533

Right now only works if use a relative path to reference tailwind preset, i found this here