Anyone using Tailwindcss? How do I style markdown chunks like page.content?

I'm using tailwindcss for the first time and really enjoying most of it however when I get to big chunks of markdown I'm ending up with big chunks of unstyled text. Basic things like link styles, paragraphs and font size are sorely missing.

I'm partially getting around this by using the typography plugin and spanning a lot of prose this mostly works but I can't target specific layouts and I have to use the same prose style everywhere.

I think (but not tried) I can add css classes to the markdown within grav but then users need to know tailwind and markdown which is not really workable.

Any other ideas?

There are a number of ways that you could inject or override styles or classes into your rendered markdown. Could you give an example of what you are trying to style?

I think my biggest issues were down to removing the prose line height from some places (but not univerally) and adding styling to some anchor links within my text without overriding all link styles.

The easiest thing to do is insert some custom css into the head of your page that uses css selectors to identify the elements you want to style.

I don't know the structure of your html - but if your content area has an id to refer to, like id="content", you could add something like this:

#content ol {
  color: red;
}

this will style all of the ordered lists in your content block with a text color of red.

If you don't have an id but can determine the structure - you can define css path to the element.

body > main > article > ol {
  color: red;
}

Hi @Ptarmic, there will be big news related to a Grav Tailwind-based theme soon(ish) with Grav Premium… maybe even in just a few weeks at https://getgrav.org/ 🎉