On this page

Writing

Upgrading to Astro 7

The upgrade

@astrojs/upgrade bumped the versions: astro to 7.0.6, @astrojs/mdx to 7.0.2, @astrojs/react to 6.0.1, @astrojs/svelte to 9.0.1. Nothing Astro 7 removed was in use on this site, so that part just worked.

The build broke anyway, on something unrelated to any of it.

What broke

[postcss] ENOENT: no such file or directory, open '/portfolio/tailwindcss'

Astro 7 bundles Vite 8. Vite 8 runs on , and somewhere between Vite 8.0 and 8.1 its CSS resolver started treating @import 'tailwindcss' as a file path instead of a package name, so it tried to open a file called tailwindcss next to package.json.

This site was running Tailwind through PostCSS, not the @tailwindcss/vite plugin, because the last Astro upgrade hit a rolldown-vite bug where the Vite plugin failed instead. This time the bug moved to PostCSS.

The fix

withastro/astro#17163 hit the same resolver bug from a different angle (tsconfig path aliases in <style> blocks) and traced it to Rolldown 1.1.2, with the fix landing in vitejs/vite#22766. That fix only covers the Vite plugin’s code path, not PostCSS’s. So the two bugs from the last two Astro upgrades cancel each other out: switching Tailwind back to @tailwindcss/vite fixed the build.

// astro.config.mjs
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

global.css’s @import 'tailwindcss'; didn’t change at all. Only which tool resolves it did. postcss.config.mjs came out entirely.

Closing thoughts

Two Astro upgrades, two different Rolldown bugs, and the same two Tailwind integration paths taking turns breaking. None of it was this site’s config being wrong. Vite’s new bundler is still shaking out bugs, and this one only showed up in pnpm build, not pnpm dev. Worth running a build right after any upgrade, not just checking the dev server.

Resources