Next.js + Tailwind starter doesn't seem to work

[corysimmons]

What am I doing wrong here?

https://codesandbox.io/p/devbox/green-surf-282ltp?file=%2Fapp%2Fpage.tsx%3A10%2C1

[filipelima18]

Hey @corysimmons! It looks like this Devbox is private - would it be possible at all to temporarily change its privacy to "Unlisted" so we can investigate further?

[corysimmons]

Sorry, I didn't realize it was private. It's public now.
When it initially loaded it seemed to work, but if you refresh the box it throws those hydration errors.

[filipelima18]

After forking this Devbox and restarting the VM, I don't see the hydration errors any longer. Can you check if restarting the Devbox solves it for you? You can do it from the menu on the top left as shown below.

[corysimmons]

I tried, but that didn't fix it for me.

[CompuIves]

I wonder, can you repro the same issue in other browsers? I'm curious if maybe a browser extension is manipulating the HTML, causing this error. I cannot reproduce the same problem right now.

[corysimmons]

@CompuIves Sorry for the slow response.

• It does work fine in Firefox.
• It does this hydration error in Incognito with no extensions.
• I get the hydration error on fresh copy of Edge.

It seems to be a Chromium bug in general, but it's not affecting you? 🤔

[serranoarevalo]

Unrelated but https://codesandbox.io/p/devbox/green-surf-282ltp?file=%2Fapp%2Ftailwind.css%3A1%2C1-3%2C23 contains:

@tailwind 'base';
@tailwind 'components';
@tailwind 'utilities';

And it should be:

@tailwind base;
@tailwind components;
@tailwind utilities;

[corysimmons]

Ah good catch. I've updated it, but, as you said, the hydration error is still present.