guidance on using MyST with Next.js and Theme UI

[andersy005]

i'm currently working on a project that uses MyST with Next.js and i'm looking to transition from Tailwind CSS to Theme UI for styling. i'm using myst-to-react to render MyST content in my Next.js app but i'm unsure if there any best practices or potential issues i should be aware of before going down this rabbit hole of using Theme UI instead of Tailwind CSS

my current setup consists of:

• Next.js for the overall application structure
• myst-to-react for rendering the MyST AST content
• Theme-UI for styling (transitioning from the default tailwind CSS approrach)

import { Box, ThemeUIProvider } from 'theme-ui'
import theme from '../theme'
import { MyST, DEFAULT_RENDERERS } from 'myst-to-react'
import { ThemeProvider, ReferencesProvider } from '@myst-theme/providers'

export default function MySTRender({ data }) {
  const { mdast, frontmatter, references } = data

  return (
    <ThemeUIProvider theme={theme}>
      <ReferencesProvider references={references} frontmatter={frontmatter}>
        <ThemeProvider renderers={DEFAULT_RENDERERS}>
          <Box sx={{ maxWidth: '800px', margin: 'auto', padding: 3 }}>
            <MyST ast={mdast.children} />
          </Box>
        </ThemeProvider>
      </ReferencesProvider>
    </ThemeUIProvider>
  )
}

my questions are:

1. is this Next.js/Theme UI approach viable with just the styling changes, or would i need to write my own theme package similar to the default themes in https://github.com/jupyter-book/myst-theme/tree/main/themes?

2. are there any best practices or potential issues i should be aware of when using Theme UI instead of Tailwind CSS with MyST?

I've found some past issues with pointers to other examples that use Tailwind CSS ¹ but i haven't found much information other styling frameworks. any advice, links to projects i can use as templates, or pointers to documentation or examples for using MyST with alternative styling solutions would be greatly appreciated.

Ccing @katamartin and @Shane98c who are interested in this as well.

Footnotes

1. https://github.com/jupyter-book/myst-theme/issues/258 ↩