Tailwind & PostCSS error when adding Svelte to an Astro project

Question

I have been using Astro with Tailwind for a project, however upon adding Svelte to the project with a simple npx astro add svelte, a simple npm run dev produces this error:

error   Cannot read properties of undefined (reading 'postcss')
  File:
    C:\Users\**\node_modules\@astrojs\tailwind\dist\index.js:78:22
  Code:
    77 |         const tailwindConfig = (userConfig == null ? void 0 : userConfig.value) ?? getDefaultTailwindConfig(config.srcDir);
    > 78 |         config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig));
         |                      ^
      79 |         config.style.postcss.plugins.push(autoprefixerPlugin);
      80 |         if (applyBaseStyles) {
      81 |           injectScript("page-ssr", `import '@astrojs/tailwind/base.css';`);
  Stacktrace:
TypeError: Cannot read properties of undefined (reading 'postcss')
    at astro:config:setup (file:///C:/Users/**/node_modules/@astrojs/tailwind/dist/index.js:78:22)
    at async withTakingALongTimeMsg (file:///C:/Users/**/node_modules/astro/dist/integrations/index.js:18:18)
    at async runHookConfigSetup (file:///C:/Users/**/node_modules/astro/dist/integrations/index.js:95:7)
    at async createContainer (file:///C:/Users/**/node_modules/astro/dist/core/dev/container.js:30:14)
    at async createContainerWithAutomaticRestart (file:///C:/Users/**/node_modules/astro/dist/core/dev/restart.js:90:28)
    at async dev (file:///C:/Users/**/node_modules/astro/dist/core/dev/dev.js:32:19)
    at async runCommand (file:///C:/Users/**/node_modules/astro/dist/cli/index.js:155:7)
    at async cli (file:///C:/Users/**/node_modules/astro/dist/cli/index.js:213:5)

I have tried a few workarounds like creating a postcss.config.js file, however it hasn't yielded any results.

Would appreciate any insights on what may be causing this issue and any suggestions for fixing it.

Thanks in advance :)

Thanks for the comment. The issue is solved and I'll post a answer here shortly. In short, this was due to an issue with the versions of the packages being used. Nevertheless, thanks for responding to the question and indirectly reminding me to to do. — Dhruv, Jun 21 '23 at 18:58

score 0 · Accepted Answer · answered Jun 21 '23 at 19:15

It seems that this was either due to an issue with Astro v2.5.5 or astrojs/tailwind v2.1.3 (most likely the latter).

I added the Svelte integration to an existing project (npx astro add svelte) that was using Astro v1.9.0 with astrojs/tailwind v2.1.3. The latest version of the Svelte integration required a newer version of Astro, so it automatically upgraded the project to Astro v2.5.5 which was only released 15 hours ago at the time.

Few hours later, I noticed that v2.6.6 was out. I upgraded to that version and uninstalled tailwind and svelte. Thereafter, I re-ran npx astro add svelte & npx astro add tailwind to make sure that I am using the latest versions of the two integrations. This bumped up my tailwind integration to astrojs/tailwind v4.0.0.

That solved the issue.

While researching this error earlier, I had come across a few closed issues (opened only a few months ago) on the Astro repo discussing similar errors while trying to use Svelte and Tailwind together with Astro. The workarounds suggested there didn't seem to work for me, but there was a discussion around introducing a patch in one of the integrations. Thus, I am assuming that these issues were patched in newer releases of (mostly likely) the astrojs/tailwind integration (it wasn't immediately clear from the multiple issue threads where this was patched).

Putting this out there for anyone that may face something similar in the future.

Tailwind & PostCSS error when adding Svelte to an Astro project

1 Answers1