Updating `tailwind.config.cjs` Kills The Astro Dev Server

[neelsudhakaran]

What version of astro are you using?

1.6.7

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

MacOS Big Sur v11.4

Describe the Bug

Every time I make changes to the tailwind.config.cjs file, the dev server does the following things:

08:48:37 AM [astro] update /tailwind.config.cjs
08:48:37 AM [astro] Configuration updated. Restarting...

08:48:37 AM [astro] Continuing with previous valid configuration

$WORKING_DIR/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:57069
          cb(new Error('The server is not running'));
             ^

Error: The server is not running
    at WebSocketServer.<anonymous> ($WORKING_DIR/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:57069:14)

$WORKING_DIR is simply something I've come up with for this report to represent the root directory of the Astro project. Also, I'm using @astrojs/tailwind v2.1.2

Link to Minimal Reproducible Example

I can't even seem to get the Tailwind plugin set up in CodeSanbox, GitPod, or StackBlitz—but that's due to my lack of experience with those tools.

Participation

I'm more than happy to help fix this issue, although I may need some guidance on doing so!

[neelsudhakaran]

Update: When trying to create a brand new minimal project (even on the same local machine), everything seems to work fine... I guess that means its something unrelated to the astro, @astrojs/tailwind, and tailwindcss dependencies.

[neelsudhakaran]

Update: Okay, so the error seems to occur if you have @astrojs/react and @astrojs/tailwind installed at the same time. It occurs regardless of the order they are listed in the astro.config.ts file.

Here's a git repo with a basic Astro + Tailwind project setup. If you start the dev server with npm start and then modify the tailwind.config.cjs file the dev server will crash.

[neelsudhakaran]

Update: I'm a bit lost now 😅. Uninstalling react, react-dom, and @astrojs/react, then deleting node_modules and reinstalling everything still results in the same issue—but now the only dependencies are Tailwind related!

[matthewp]

I have an idea of what might cause this, want to check for sure though.

[matthewp]

Not seeing it with just regular Tailwind. Now I'm adding React.

[matthewp]

Hm, still not seeing the problem here. going to try your example repo.

[matthewp]

Ok! I'm able to see it happen in your reproduction, but not in my own. So hopefully I can track down what the difference is.

[matthewp]

The difference here is using a astro.config.ts rather than astro.config.mjs. I think I can recreate this in a test, thanks!

[do-kevin]

Hey there, I have a different issue that could be related to this: other tailwind styles were not applying. For example, if I put down bg-black and p-20, the background does change to black but the padding is not applied. This affected other utilities styles as well.

I also use astro.config.ts; I reverted back to astro.config.mjs and that seemed to fix my issues.

[alexmahan]

I know this bug has been closed for a while, but I'm experiencing something similar, so figured it couldn't hurt to post.

I'm on Astro 4.2.4, and using Storyblok as the headless CMS with the @storyblok/astro package. Everything has been hunky dory, but today I installed Tailwind, and now the root page is throwing an error every time I edit the tailwind.config.mjs file, and I have to restart the Astro dev server.

The error I'm encountering is: Cannot read properties of null (reading 'default')

This error seems like it's unrelated to Tailwind, but the page loads fine before editing the Tailwind config file.