Tailwind is being added to <head> twice when running react-router dev #14003
Description
Reproduction
Create a new React Router v7 app in Framework mode and start a dev server:
npx create-react-router@latest my-react-router-app
cd my-react-router-app
npm run dev
Open localhost:5173 in the browser, open the Inspect devtools, and expand the <head> element. Note that there is a <style> tag with no attributes which, when expanded, contains Tailwind CSS. Next, note the second style tag with the contents of app.css, including Tailwind CSS as well.
System Info
System:
OS: macOS 15.5
CPU: (12) arm64 Apple M4 Pro
Memory: 2.10 GB / 24.00 GB
Shell: 4.0.2 - /opt/homebrew/bin/fish
Binaries:
Node: 22.16.0 - ~/.asdf/installs/nodejs/22.16.0/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 10.9.2 - ~/.asdf/plugins/nodejs/shims/npm
pnpm: 10.12.4 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 138.0.7204.101
Safari: 18.5
npmPackages:
@react-router/dev: ^7.5.3 => 7.6.3
@react-router/node: ^7.5.3 => 7.6.3
@react-router/serve: ^7.5.3 => 7.6.3
react-router: ^7.5.3 => 7.6.3
vite: ^6.3.3 => 6.3.5Used Package Manager
npm
Expected Behavior
There should only be one inclusion of Tailwind in <head> during development.
Actual Behavior
Two copies of Tailwind are included in the page at development time:
This is currently causing a degraded developer experience when using certain CSS features (@layer and @property), as a bug in Chrome causes tab crashes during page transitions when there are two <style> tags using these features. (See https://issues.chromium.org/issues/432035531)