jupyter-book / mystmd

Command line tools for working with MyST Markdown.
https://mystmd.org/guide
MIT License
219 stars 64 forks source link

Load tailwind CSS classes when they are used within directives and page content #1617

Open choldgraf opened 3 weeks ago

choldgraf commented 3 weeks ago

There are some directives that can have CSS classes attached directly to them. For example:

:::{div}
:class: someclass
:::

We build the default MyST themes with TailwindCSS which means that we should be able to use the Tailwind CSS classes by attaching them to directives and page content like the above.

However, the relevant CSS classes are only loaded based on the HTML theme / config, and this means that classes defined purely in page content won't be detected and loaded.

Suggested enhancement

When building HTML assets, take a pass through the page content and see if any HTML classes have been added there. If they are, load the relevant classes from Tailwind at build time so that they work.