chore: upgrade Tailwind CSS to v4

[azzzy]

Tailwind CSS 4 was released on January 22nd.
The upgrade guide can be found here.

The steps which were executed for each package in the workspace:

Upgrade Tailwind CSS to v4

pnpm i -D tailwindcss@latest

Install the Tailwind CSS Vite plugin

pnpm i -D @tailwindcss/vite

Remove postcss and autoprefixer

In v4 imports and vendor prefixing are now handled automatically.

pnpm rm postcss autoprefixer

Update vite.config.ts and App.css (see the PR diff for more information)

[brookslybrand]

Awesome, thanks @azzzy! Looks like the tests broken unfortunately. Let me know if you need help debugging

[azzzy]

There is a hydration error, which appears only in production.
Same issue was reported in the Tailwind CSS repo - tailwindlabs/tailwindcss#15422

I wasn't able to find any difference when diffing the server rendered page and the client markup, will dive deeper in it during the weekend.

[brookslybrand]

I would try it as a side effect import and see if that resolves it

-import stylesheet from "./app.css?url";
+import "./app.css";

This is still an issue that should be fixed (not sure if it's us or tailwind)

[azzzy]

@brookslybrand ,

I would try it as a side effect import and see if that resolves it

-import stylesheet from "./app.css?url";
+import "./app.css";

This is still an issue that should be fixed (not sure if it's us or tailwind)

This solves it, thanks. It seems @tailwindcss-vite generates slightly different css files for the server and client entry:

vite v5.4.11 building for production...
✓ 48 modules transformed.
build/client/.vite/manifest.json                  2.08 kB │ gzip:  0.53 kB
build/client/assets/logo-dark-pX2395Y0.svg        6.10 kB │ gzip:  2.40 kB
build/client/assets/logo-light-CVbx2LBR.svg       6.13 kB │ gzip:  2.41 kB
build/client/assets/app-xqat8gf9.css             22.70 kB │ gzip:  6.32 kB  <----
build/client/assets/with-props-DYsm_2E1.js        0.35 kB │ gzip:  0.21 kB
build/client/assets/root-CR7BLDvn.js              1.22 kB │ gzip:  0.68 kB
build/client/assets/home-Cx76ZJ3y.js              3.74 kB │ gzip:  1.72 kB
build/client/assets/chunk-K6AXKMTT-C90Ya4xn.js  105.36 kB │ gzip: 35.65 kB
build/client/assets/entry.client-Dhb33yhI.js    178.81 kB │ gzip: 56.76 kB
✓ built in 557ms
vite v5.4.11 building SSR bundle for production...
✓ 11 modules transformed.
build/server/.vite/manifest.json              0.74 kB
build/server/assets/logo-dark-pX2395Y0.svg    6.10 kB
build/server/assets/logo-light-CVbx2LBR.svg   6.13 kB
build/server/assets/app-C-j-FxCF.css         20.47 kB  <----
build/server/index.js                        10.92 kB

✓ 1 asset moved from React Router server build to client assets.
build/client/assets/app-C-j-FxCF.css

In development mode Vite uses plain file names but for the production build it uses a content-based hashing strategy, so the url of the stylesheet is different for client and server in the prod build.

Vite supports side effect imports out of the box, so this looks like a better default for CSS assets.

[brookslybrand]

Great stuff @azzzy!

I'm not even sure why the production build has a css file, that seems to get deleted anyway.

Anyway, glad this works, I'm going to merge this in so that our templates are more up to date and simplified