Create a default CSS that can get people up and running

[rowanc1]

Right now the CSS is generated through tailwind, which allows you to have a single bundle as well as configure it from your own application. This is a lot for folks who are new to the JS ecosystem and just want a css file on page.

We could auto generate/build the css when we release @myst-theme/styles and then people can throw that on the page and have a good onboarding experience.

See also: jupyter/papyri#314

[Mikodin]

@rowanc1 I am in this exact scenario. I am using import { MyST, DEFAULT_RENDERERS } from "myst-to-react"; and have zero styling on my articles. I am also using Tailwind in my application, but am having trouble figuring out how to include the styles y'all have.

Would you be open to expanding on how I can use the default styles?

[rowanc1]

Adding this line to your tailwind config should pull in all the relevant styles:

https://github.com/executablebooks/myst-theme/blob/feat/updates/themes/book/tailwind.config.js#L5

That is coming from here:
https://github.com/executablebooks/myst-theme/blob/feat/updates/styles/index.js#L4

This is telling the tailwind css compiler to look at the packages and pull in their styles directly.

There are also theme extensions, primarily used for the grids:
https://github.com/executablebooks/myst-theme/blob/feat/updates/styles/index.js#L19

These can be included in your config with:
https://github.com/executablebooks/myst-theme/blob/feat/updates/themes/article/tailwind.config.js#L7

Finally, you will also have to import some other specific styles in your base tailwind css:
https://github.com/executablebooks/myst-theme/blob/feat/updates/themes/book/styles/app.css
These include some specific styles to control the prose, figure containers, and jupyter outputs. You can also selectively add each if you would like (see the index.css)

Hopefully that helps, if you are using tailwind already, figuring out this approach is probably the way to go. The outcome of this issue is hopefully a better readme, which I would love help on! :)

[HaudinFlorence]

@rowanc1. Hello. I am trying to use myst-to-react components in a custom react app and I am also not able to get the style. I tried the fix above (hopefully I was able to make it properly). For instance trying to use an admonition component, all the classes are well here if I check with the inspector of the browser but the style is not applied. I tried this configuration in my app for the tailwing.config.js:

const mystTheme = require('@myst-theme/styles');

module.exports = {
  darkMode: 'class',
  content: mystTheme.content,
  theme: {
    extend: mystTheme.themeExtensions,
  },
  plugins: [require('@tailwindcss/typography')],
  safelist: mystTheme.safeList,
};

Hoping that it makes sense. Thanks for any advice or help.

[agoose77]

Hi @HaudinFlorence, you might find it useful to look at jupyterlab-myst, which uses myst-to-react:

• tailwind.config.js
• package.json (building the CSS)

Tailwind builds app.css that gets included via base.css. Some of this is JLab specific, but you'll see how we spit out the tailwind stylesheet for consumption in our top-level style module.

[HaudinFlorence]

@agoose77 Thanks for the advice. I manage to get the admonition component with the proper style. I am now encountering troubles with the math component rendering and most particularly the use of node.html that seems undefined plus some trouble related probably to katex. But that may be unrelated to the topics of this issue.

[agoose77]

@HaudinFlorence do you perhaps have a GitHub repo that I could take a look at?

[HaudinFlorence]

@agoose77 Thanks for proposing to have a look. Here is my repo https://github.com/HaudinFlorence/simple-myst-react-app (the github pages is not updated with respect to the last changes using myst-to-react). The repo is at a early stage and I may have missed lots of crucial points. I also took the jupyter lab tailwind configuration as it was. And not directly related, I am also wondering why is myst-demo package archived ? Many thanks.

[agoose77]

@HaudinFlorence the myst-demo you're referring to is probably https://github.com/executablebooks/myst-demo, which was associated with our older markdown-it based MyST JS tools. The new JS development work has its own demo here