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!
