Tailwind styles aren't loaded for Keystatic UI custom components in Astro

Hi!

I've been trying to setup a Footnote custom mark component, as written here. There's a sample repo using Next, but I had an issue getting the same result for Astro.

Basic idea is adding a custom component with tailwind classes:

// keystatic.config.tsx

// config.collections.<name>.schema
content: fields.markdoc({
  label: "Text",
  components: {
    Footnote: mark({
      label: "Footnote",
      icon: <SuperscriptIcon />,
      className: "align-super text-xs",
      schema: {},
    }),
  },
}),

But when the text is marked in UI, styles aren't applied, because Keystatic Astro component has no idea about the styles file.

How I think this can be fixed

(some steps can be automated by keystatic integration, others might need user input)

1. Add "keystatic.config.tsx" to tailwind content config, so the custom component styles are picked up into global css
2. Add a custom Astro component, like so:

---
// src/components/MyKeystatic.astro

import Keystatic from '@keystatic/astro/internal/keystatic-astro-page.astro';
import "styles/globals.css";

export const prerender = false;
---

<div class="bg-blue-500 text-black">Custom Keystatic component with Tailwind</div>
<Keystatic />

3. Expand integration with option to provide custom Astro component, like so:

// /node_modules/@keystatic/astro/dist/keystatic-astro.js

function keystatic(options) {
  return {
    name: 'keystatic',
    hooks: {
      'astro:config:setup': ({
        ...
        const astroPage = options.astroPage ?? '@keystatic/astro/internal/keystatic-astro-page.astro'
        logger.info(`Using ${astroPage} as Keystatic component`)
...

4. Configure Astro integration:

// astro.config.mjs

integrations: [
    markdoc(),
    keystatic({ astroPage: "src/components/MyKeystatic.astro" }),
    tailwind(),
]

As a result, tailwind CSS styles are loaded and applied to custom components in the editor UI.

If this approach makes sense — I'll gladly open a PR. Thanks!

Start by inspecting the Keystatic Astro integration and the internal keystatic-astro-page.astro entry point, then review keystatic.config.tsx, src/components/MyKeystatic.astro, and astro.config.mjs from the report. Reproduce the custom mark with Tailwind classes and confirm the styles are loaded and applied in the Keystatic editor UI.