[Lume] How to configure TailwindCSS to work with Markdown ?

Context

Following the Lume’s documentation, I have set up this configuration :

• posts content written in Markdown
• templating with Nunjucks
• styling with TailwindCSS

Problem

Posts doesn’t display as I expected, it looks like there is no css.

I inspect the HTML rendered in the browser, and I realize that all is right : the html tags are present, and they correspond to the markdown.

But… all of it is displayed the same ! No CSS.

Explanation : the TailwindCSS preflight

The documentation of TailwindCSS tells that a reset is applied. Among tags normalized by the preflight : h1, etc. The TailwindCSS philosophy should be to set manually some classes to create the wanted style.

We should do something like this :

<h1 class="text-xl">My title</h1>

Solutions

Solution 1 : typography-plugin

Use the typography-plugin of TailwindCSS and apply the prose class to render any markdown content.

<!-- example from Tailwind documentation -->
<article class="prose">
  {{ markdown }}
</article>

<!-- example applied to Lume -->
<article class="prose">
  {{ content | safe }}
</article>

This is the solution I implemented.

Solution 2

cf. https://tailwindcss.com/docs/plugins#adding-base-styles.

We can set the configuration to apply certain specific styles to certain tags. I did not try it. It would be interesting in order not to install the typography-plugin.

const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(function ({ addBase, theme }) {
      addBase({
        "h1": { fontSize: theme("fontSize.2xl") },
        "h2": { fontSize: theme("fontSize.xl") },
        "h3": { fontSize: theme("fontSize.lg") },
      });
    }),
  ],
};

Epilogue

I submitted to Lume’s maintainer a pull-request to add these details to the documentation.