You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
The text was updated successfully, but these errors were encountered:
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?
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
preset
fromtailwind.config.js
and save filepreset
totailwind.config.js
and save filepreset/src/plugin/index.ts
, changebackgroundColor
totheme("colors.sun.950")
npm run --workspace app dev
)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, andpreset
which exports a Tailwind preset with themes and a plugin.The (abridged) project layout:
app/tailwind.config.js
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 thepreset
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 ofbase
, which doesn't let it report those files asdependency
(ordir-dependency
) to Vite. If I manage to setup a development environment, I will test that theory and report back.The text was updated successfully, but these errors were encountered: