I think Vite with Remix didn't like tailwind integraiton?

[onesamket]

import stylesheet from "~/tailwind.css";
export const links = () => [  { rel: "stylesheet", href: stylesheet }];

Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import stylesheet from "~/tailwind.css?inline"
Plugin: vite:import-analysis

what is the issue?

[jrestall]

You'll want to switch to using side effect imports. https://remix.run/docs/en/main/future/vite#fix-up-css-imports

[jrestall]

You shouldn't be mixing the remix cli and vite, if you want to use vite, you should fully migrate to the official express vite template rather than use remix dev.

[manzaloros]

Really? There's a section of the Remix Vite docs that specifically mentions custom servers: https://remix.run/docs/en/main/future/vite#migrating-from-a-custom-server

Edit
I see that in the docs they now just invoke node server.js, rather than remix dev. So I changed that in my code and still get the FoUC with Tailwind.

[jrestall]

Yes, the vite migration docs mention to change your package.json scripts to "dev": "node ./server.mjs", rather than using the old remix cli. You will need to follow the official vite express template and not use the remix cli.

[manzaloros]

You will need to follow the official vite express template and not use the remix cli.

Got it, I followed the Remix docs, for example using unstable_createViteServer(), (haven't checked out the express vite template) and Vite is working with my custom server, but I'm still getting a FoUC with Tailwind and Vite (even though I'm using the same configs mentioned in the Remix Vite docs for Tailwind).

[jrestall]

Could be a browser extension causing hydration issues. I've found react canary 18.3 helps if it is.

[dkkazmierczak]

Here https://remix.run/docs/en/main/future/vite#fix-up-css-imports-referenced-in-links they say that you will need to add ?url to your css imports. They showed an example I used:

-import styles from "~/styles/dashboard.css";
+import styles from "~/styles/dashboard.css?url";

export const links = () => {
  return [
    { rel: "stylesheet", href: styles }
  ];
}

and added postcss.config.mjs

export default {
  plugins: {
    tailwindcss: {},
  },
};

This has worked for me :)

[isc30]

this should be in the official documentation

[Shompi]

Absolutely