From 9405d428cf1aa0e7f614ccb877854d272d939409 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Thu, 30 Jan 2025 15:49:22 +0100
Subject: [PATCH] Vite: Transform `<style>` blocks in html files

---
 CHANGELOG.md                                |  1 +
 integrations/vite/html-style-blocks.test.ts | 58 +++++++++++++++++++++
 packages/@tailwindcss-vite/src/index.ts     |  3 +-
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 integrations/vite/html-style-blocks.test.ts
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3481c52a7ba..8a06283cf5e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
+- Vite: Transform `<style>` blocks in HTML files ([#16069](https://github.com/tailwindlabs/tailwindcss/pull/16069))
 
 ## [4.0.1] - 2025-01-29
 
diff --git a/integrations/vite/html-style-blocks.test.ts b/integrations/vite/html-style-blocks.test.ts
new file mode 100644
index 000000000000..4a86f96dc0d0
--- /dev/null
+++ b/integrations/vite/html-style-blocks.test.ts
@@ -0,0 +1,58 @@
+import { html, json, test, ts } from '../utils'
+
+test(
+  'transforms html style blocks',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "vite": "^6"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import { defineConfig } from 'vite'
+        import tailwindcss from '@tailwindcss/vite'
+
+        export default defineConfig({
+          plugins: [tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <!doctype html>
+        <html>
+          <body>
+            <div class="foo"></div>
+            <style>
+              .foo {
+                @apply underline;
+              }
+            </style>
+          </body>
+        </html>
+      `,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm vite build')
+
+    expect(await fs.dumpFiles('dist/*.html')).toMatchInlineSnapshot(`
+      "
+      --- dist/index.html ---
+      <!doctype html>
+      <html>
+        <body>
+          <div class="foo"></div>
+          <style>.foo{text-decoration-line:underline}</style>
+        </body>
+      </html>
+      "
+    `)
+  },
+)
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index c8976c0276da..41c96179afc5 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -8,6 +8,7 @@ import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite
 
 const DEBUG = env.DEBUG
 const SPECIAL_QUERY_RE = /[?&](raw|url)\b/
+const INLINE_STYLE_ID_RE = /[?&]index\=\d+\.css$/
 
 const IGNORED_DEPENDENCIES = ['tailwind-merge']
 
@@ -320,7 +321,7 @@ function isPotentialCssRootFile(id: string) {
   if (id.includes('/.vite/')) return
   let extension = getExtension(id)
   let isCssFile =
-    (extension === 'css' || id.includes('&lang.css')) &&
+    (extension === 'css' || id.includes('&lang.css') || id.match(INLINE_STYLE_ID_RE)) &&
     // Don't intercept special static asset resources
     !SPECIAL_QUERY_RE.test(id)
 
