Ricky:
Iâm still a beginner with this stuff, so I might not be the best person to advise here!
However, the most likely reason for your problems, and a misunderstanding I also had when I started with Tailwind, is that this CSS utility framework doesnât actually work within the Markdown field!
Tailwind is incredibly useful for rapid prototyping of the structure and layout of your website, but it does nothing to HTML output from a Markdown field. In fact, one of Tailwindâs key features is that it comes with no pre-set typography at all. So all the type styling has to be built up from a zero base, rather than hacking it down from the frameworkâs pre-set defaults.
The good news is that since I wrote my âBeginnerâs Guideâ post, Tailwind has added a first-party Typography plugin which adds âsensible typography styles to any vanilla HTMLâ. There are good instructions for installing this plugin, and using its default styles, in the pluginâs Read Me file.
However, customising these âsensibleâ styles seems quite complex (and intimidating) to me, and to some degree I think this defeats Tailwindâs original USP. But if youâre happy with Tailwindâs default typography styles, this is a super-simple way to go.
Thereâs an excellent demo and explanation for all of the above in Tailwindâs âLive Demoâ page.
The alternative approach, and the one that Iâve been experimenting with during these many months of coronavirus lockdown, is to write a custom stylesheet to target the HTML elements rendered by the Markdown field. There are good instructions for this in Tailwindâs docs, Extracting Components, in the âExtracting component classes with @applyâ section.
Typically, this means writing nested CSS that looks something like this:
/* default spacing */
.markdown {
& > * {
@apply mt-2;
@screen sm {
@apply mt-4;
}
}
}
/* over-ride for headings */
.markdown {
& > h1,
& > h2,
& > h3 {
@apply mt-6;
@screen sm {
@apply mt-9;
}
}
}
Since I started out with Kirby because I loved the simplicity and power of its Markdown field and KirbyTags, Iâve persevered with this approach.
And Iâm super-happy with what Iâve been able to achieve by Pushing the limits of Markdown and just one image KirbyTag.
But itâs taken me months of experimentation, and Iâve ended up with a large custom stylesheet thatâs miles away from the simplicity Iâd expected from Tailwind.
I hope this helps!
