diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22868c5c4863..eb128f4d539e 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
### Added
- _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370))
+- Vite: Add a new `scanner` option to disable module-graph based scanning ([#16425](https://github.com/tailwindlabs/tailwindcss/pull/16425))
### Fixed
@@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Export backwards compatible config and plugin types from `tailwindcss/plugin` ([#16505](https://github.com/tailwindlabs/tailwindcss/pull/16505))
- Upgrade: Report errors when updating dependencies ([#16504](https://github.com/tailwindlabs/tailwindcss/pull/16504))
- Upgrade: Ensure a `darkMode` JS config setting with block syntax converts to use `@slot` ([#16507](https://github.com/tailwindlabs/tailwindcss/pull/16507))
+- Vite: Ensure that Astro builds with client-only components are always scanned ([#16425](https://github.com/tailwindlabs/tailwindcss/pull/16425))
## [4.0.6] - 2025-02-10
diff --git a/integrations/vite/astro.test.ts b/integrations/vite/astro.test.ts
index 5b7407e4714b..81db3e82c6d5 100644
--- a/integrations/vite/astro.test.ts
+++ b/integrations/vite/astro.test.ts
@@ -1,4 +1,4 @@
-import { candidate, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
+import { candidate, fetchStyles, html, js, json, retryAssertion, test, ts } from '../utils'
test(
'dev mode',
@@ -19,11 +19,7 @@ test(
import { defineConfig } from 'astro/config'
// https://astro.build/config
- export default defineConfig({
- vite: {
- plugins: [tailwindcss()],
- },
- })
+ export default defineConfig({ vite: { plugins: [tailwindcss()] } })
`,
'src/pages/index.astro': html`
Hello, world!
@@ -70,3 +66,58 @@ test(
})
},
)
+
+test(
+ 'build mode',
+ {
+ fs: {
+ 'package.json': json`
+ {
+ "type": "module",
+ "dependencies": {
+ "astro": "^4.15.2",
+ "react": "^19",
+ "react-dom": "^19",
+ "@astrojs/react": "^4",
+ "@tailwindcss/vite": "workspace:^",
+ "tailwindcss": "workspace:^"
+ }
+ }
+ `,
+ 'astro.config.mjs': ts`
+ import tailwindcss from '@tailwindcss/vite'
+ import react from '@astrojs/react'
+ import { defineConfig } from 'astro/config'
+
+ // https://astro.build/config
+ export default defineConfig({ vite: { plugins: [tailwindcss()] }, integrations: [react()] })
+ `,
+ 'src/pages/index.astro': html`
+ ---
+ import ClientOnly from './client-only';
+ ---
+
+ Hello, world!
+
+
+
+
+ `,
+ 'src/pages/client-only.jsx': js`
+ export default function ClientOnly() {
+ return Hello, world!
+ }
+ `,
+ },
+ },
+ async ({ fs, exec, expect }) => {
+ await exec('pnpm astro build')
+
+ let files = await fs.glob('dist/**/*.css')
+ expect(files).toHaveLength(1)
+
+ await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`overline`])
+ },
+)
diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts
index c0bee2b878cc..1b22fb7a8f36 100644
--- a/integrations/vite/index.test.ts
+++ b/integrations/vite/index.test.ts
@@ -14,7 +14,12 @@ import {
yaml,
} from '../utils'
-describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
+describe.each([
+ ['postcss', 'module-graph'],
+ ['postcss', 'file-system'],
+ ['lightningcss', 'module-graph'],
+ ['lightningcss', 'file-system'],
+])('using %s via %s', (transformer, scanner) => {
test(
`production build`,
{
@@ -45,7 +50,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
export default defineConfig({
css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
build: { cssMinify: false },
- plugins: [tailwindcss()],
+ plugins: [tailwindcss({ scanner: '${scanner}' })],
})
`,
'project-a/index.html': html`
@@ -57,9 +62,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
`,
'project-a/tailwind.config.js': js`
- export default {
- content: ['../project-b/src/**/*.js'],
- }
+ export default { content: ['../project-b/src/**/*.js'] }
`,
'project-a/src/index.css': css`
@import 'tailwindcss/theme' theme(reference);
@@ -122,7 +125,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
export default defineConfig({
css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
build: { cssMinify: false },
- plugins: [tailwindcss()],
+ plugins: [tailwindcss({ scanner: '${scanner}' })],
})
`,
'project-a/index.html': html`
@@ -142,9 +145,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
`,
'project-a/tailwind.config.js': js`
- export default {
- content: ['../project-b/src/**/*.js'],
- }
+ export default { content: ['../project-b/src/**/*.js'] }
`,
'project-a/src/index.css': css`
@import 'tailwindcss/theme' theme(reference);
@@ -162,9 +163,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
},
},
async ({ root, spawn, fs, expect }) => {
- let process = await spawn('pnpm vite dev', {
- cwd: path.join(root, 'project-a'),
- })
+ let process = await spawn('pnpm vite dev', { cwd: path.join(root, 'project-a') })
await process.onStdout((m) => m.includes('ready in'))
let url = ''
@@ -174,17 +173,19 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
return Boolean(url)
})
- // Candidates are resolved lazily, so the first visit of index.html
- // will only have candidates from this file.
+ // Candidates are resolved lazily in module-graph mode, so the first visit of index.html will
+ // only have candidates from this file.
await retryAssertion(async () => {
let styles = await fetchStyles(url, '/index.html')
expect(styles).toContain(candidate`underline`)
expect(styles).toContain(candidate`flex`)
- expect(styles).not.toContain(candidate`font-bold`)
+
+ if (scanner === 'module-graph') {
+ expect(styles).not.toContain(candidate`font-bold`)
+ }
})
- // Going to about.html will extend the candidate list to include
- // candidates from about.html.
+ // Going to about.html will extend the candidate list to include candidates from about.html.
await retryAssertion(async () => {
let styles = await fetchStyles(url, '/about.html')
expect(styles).toContain(candidate`underline`)
@@ -232,8 +233,8 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
})
await retryAssertion(async () => {
- // After updates to the CSS file, all previous candidates should still be in
- // the generated CSS
+ // After updates to the CSS file, all previous candidates should still be in the generated
+ // stylesheet.
await fs.write(
'project-a/src/index.css',
css`
@@ -283,10 +284,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
- export default defineConfig({
- build: { cssMinify: false },
- plugins: [tailwindcss()],
- })
+ export default defineConfig({ build: { cssMinify: false }, plugins: [tailwindcss()] })
`,
'project-a/index.html': html`