Using Tailwind CSS classes

Neuron provides Semantic UI already, however you can use other CSS toolkits as well. Tailwind in particular is a note-worthy one as it allows you to style elements using pre-defined semantically defined classes.

First, activate Tailwind using twind/shim, in your head.html (see Custom JavaScript and CSS):

<script crossorigin="anonymous" src=",npm/twind/observe/observe.umd.min.js"></script>
<script type="text/javascript">
      mode: 'silent',  // Behave well with semantic UI classes
      preflight: () => {
        return {
           // Custom styles based on selectors go here (use the selector in Markdown; see below)
           ".my-highlight": twind.apply("bg-yellow-100 text-green-500 font-bold p-2"
<!-- End of Twind script -->

That’s it; now you can use any of the Tailwind CSS classes in your Markdown files. Here’s an example:

## Highlights of the day:

:::{.rounded .shadow-2xl .border-2 .border-solid .border-pink-400 .text-xl .mb-4}
- Drank a [new]{.my-highlight} type of *coffee*
- Hacked a new feature to my pet project
- Enjoyed doing nothing in particular

Random bits:
- These are not styled like the above div.

Live example

See (the pink box)