diff --git a/packages/integrations/tailwind/package.json b/packages/integrations/tailwind/package.json index b6a2664d82bf..68bf29094ade 100644 --- a/packages/integrations/tailwind/package.json +++ b/packages/integrations/tailwind/package.json @@ -38,7 +38,7 @@ "vite": "^6.0.9" }, "peerDependencies": { - "astro": "^4.0.0 || ^5.0.0", + "astro": "^5.0.0", "tailwindcss": "^4.0.0" }, "publishConfig": { diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts index 758e25c89bca..4de7c7b2653c 100644 --- a/packages/integrations/tailwind/src/index.ts +++ b/packages/integrations/tailwind/src/index.ts @@ -1,7 +1,7 @@ -import { fileURLToPath } from 'node:url'; import type { AstroIntegration } from 'astro'; -import type { PluginOption } from 'vite'; import tailwindcss from '@tailwindcss/vite'; +import { fileURLToPath } from 'node:url'; +import { writeFileSync } from 'node:fs'; type TailwindOptions = { /** @@ -18,30 +18,6 @@ type TailwindOptions = { applyBaseStyles?: boolean; }; -const VIRTUAL_MODULE_ID = 'virtual:@astrojs/tailwind/base.css'; -const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID; - -function baseStylesPlugin(configFile?: string): PluginOption { - let content = '@import "tailwindcss";'; - if (configFile) { - content += `@config ${JSON.stringify(configFile)};`; - } - - return { - name: '@astrojs/tailwind/virtual-css', - resolveId(id) { - if (id === VIRTUAL_MODULE_ID) { - return RESOLVED_VIRTUAL_MODULE_ID; - } - }, - load(id, opts) { - if (id === RESOLVED_VIRTUAL_MODULE_ID && opts?.ssr) { - return content; - } - }, - }; -} - export default function tailwindIntegration({ applyBaseStyles = true, configFile, @@ -53,20 +29,23 @@ export default function tailwindIntegration({ return { name: '@astrojs/tailwind', hooks: { - 'astro:config:setup': async ({ config, updateConfig, injectScript }) => { - const plugins: PluginOption[] = [tailwindcss()]; - if (applyBaseStyles) { - plugins.push( - baseStylesPlugin( - configFile ? fileURLToPath(new URL(configFile, config.root)) : undefined, - ), - ); - injectScript('page-ssr', `import ${JSON.stringify(VIRTUAL_MODULE_ID)};`); - } - + 'astro:config:setup': async ({ config, updateConfig, injectScript, createCodegenDir }) => { updateConfig({ - vite: { plugins }, + vite: { plugins: [tailwindcss()] }, }); + + if (applyBaseStyles) { + const codegenDir = createCodegenDir(); + let content = '@import "tailwindcss";'; + if (configFile) { + content += `\n@config ${JSON.stringify(fileURLToPath(new URL(configFile, config.root)))};`; + } + + const url = new URL('tailwind.css', codegenDir); + writeFileSync(url, content, 'utf-8'); + + injectScript('page-ssr', `import ${JSON.stringify(url)};`); + } }, }, }; diff --git a/packages/integrations/tailwind/test/fixtures/basic/astro.config.js b/packages/integrations/tailwind/test/fixtures/basic/astro.config.js index d2207ab808d0..ce87e4f74641 100644 --- a/packages/integrations/tailwind/test/fixtures/basic/astro.config.js +++ b/packages/integrations/tailwind/test/fixtures/basic/astro.config.js @@ -5,7 +5,7 @@ import { defineConfig } from 'astro/config'; export default defineConfig({ integrations: [ tailwind({ - applyBaseStyles: false, + // applyBaseStyles: false, configFile: "./tailwind.config.js" }), ] diff --git a/packages/integrations/tailwind/test/fixtures/basic/src/pages/index.astro b/packages/integrations/tailwind/test/fixtures/basic/src/pages/index.astro index ea2273153a1f..516cef99d188 100644 --- a/packages/integrations/tailwind/test/fixtures/basic/src/pages/index.astro +++ b/packages/integrations/tailwind/test/fixtures/basic/src/pages/index.astro @@ -1,5 +1,5 @@ --- -import "../styles.css" +// import "../styles.css" ---
red