keystatic [Remix] Admin UI not loading styles

Hi. First of all, thanks for this fantastic tool!

I am using it on a new Remix project. But, even though I make sure that my root.tsx layout is not loading any CSS, sometimes the styles do not load when accessing the Admin UI. I am trying to figure out what could be the problem and, most importantly, how to solve it.

My root.tsx file:

import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

export default function Root() {
  return (
    <html lang="pt" dir="ltr">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

I recorded my screen showing the issue when I hit cmd + R to refresh the page:

https://github.com/Thinkmill/keystatic/assets/19230/0c9e2b6a-ac4f-476e-bb32-2bbc29246975

Can someone help me fix it? I would appreciate any help. Thanks!

Dec 08 '23 23:12 willian

Hey!

I had this exact issue and it was due to the Grammarly Chrome extension, which was messing up the Keystatic Admin UI style injection 🙃

Disabling Grammarly on that domain fixed the issue immediatley.

Jan 22 '24 04:01 simonswiss

@willian does disabling the Grammarly extension resolve the issue?

Apr 04 '24 07:04 jossmac

Hey, I'm also having issues with Tailwind styles resets from the @tailwindcss/forms sneaking into the admin ui. I'm using the plugin for the rest of my Remix project, so the disabling isn't really an option (I've checked without the plugin and then it works). Any suggestions on how to work with this?

Seems my research wasn't thorough enough. On the plugin page I've found this snippet:

plugins: [
  require("@tailwindcss/forms")({
    // strategy: 'base', // only generate global styles
    strategy: 'class', // only generate classes
  }),
],

Generating only classes and applying them (form-*) to the form input elements as needed does not interfere with the admin ui. I'm still interested if there is an intended way of achieving the same thing though.

Jul 23 '24 13:07 Apsysikal