Description
What version of Tailwind CSS are you using?
For example: v4.0.7
What build tool (or framework if it abstracts the build tool) are you using?
SvelteKit 2.17.2
What version of Node.js are you using?
v22.14.0
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction URL
https://github.com/DarthGigi/tailwind-v4-app-html-mvce
Describe your issue
When building, Tailwind CSS v4 does not detect SvelteKit's src/app.html
file:
app.html
<!doctype html>
<html lang="en" class="bg-black">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="bg-red-500">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
While this is easily fixable by adding @source "app.html";
to your css file where tailwind is being loaded (in this case, src/app.css
), I feel like tailwind should automatically include it when building like it does in the dev server.
I've also made a minimal repro: https://github.com/DarthGigi/tailwind-v4-app-html-mvce
Originally posted by @DarthGigi in #16339 (comment)