How to configure Tailwind with Remix in SPA mode

[snow grail]

I have looked up how to setup Tailwind with Remix ( https://tailwindcss.com/docs/guides/remix) and that's fine. And I saw there is a way to use Remix in SPA mode ( https://remix.run/docs/en/main/future/spa-mode ). But setting up Tailwind assumes you're using Remix with SSR mode it looks like, none of the CSS is working or being included. It took a long time but i got it figured out and figured I'd share.

1. Setup Remix in SPA mode https://remix.run/docs/en/main/future/spa-mode
2. Follow https://tailwindcss.com/docs/guides/vite (NOT the Remix guide yet)
3. Modify the /app/root.tsx to import Tailwind now ( Step 5 of https://tailwindcss.com/docs/guides/remix ) but include a "?url" at the end like this:

import type { LinksFunction } from "@remix-run/node";
import stylesheet from "~/tailwind.css?url";

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

4. Create a /postcss.config.js at the root where package.json is, containing the following:

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

5. Run npm run dev
6. Profit.

Thanks to ( #1207010713995055214 message ) for helping me figure out this puzzle!

[ruby perch]

Here is an example repo :
https://github.com/ugmurthy/remix-spa

[versed bluff]

Thank you so much for this post, it helped me a lot ❤️