How should I use Tailwind to style my Nuxt Content-powered blog?
I'm all set up with the Nuxt Content module to fetch and list my blog entries. All was fine and dandy, right? Well when I opened one of the entries, they were practically devoid of styles.
The problem stems from writing articles in Markdown which gets converted to standard HTML tags. These tags are stripped of most styles by Tailwind. As an example, the h1 tags look just like p tags, and a tags lose a visual indication that they are, in fact, links.
One solution would be to use Tailwind classes inside my .md files. For some things, this approach seems reasonable for the same reasons I like Tailwind in the first place.
Unfortunately, it really breaks down the simplicity and clarity of Markdown. Paragraphs that are easy to read and write in the .md file quickly become overrun like good old-fashioned mark-up. I don't want to have to add a tag around every paragraph just because I want actual padding between paragraphs.
You can do the same thing with standard css and class names with Span Texts but that has the exact same issues.
I could use Block Components. This gives me full HTML+Tailwind control once again over styling the content. But again,
::paragraph
do I really want to write and see this for every paragraph in?
::
I just want my paragraphs to have padding I can specify. All my links to have an underline. My titles to look different from the rest of my content.
Finally, my searching and scouring yielded fruit: I stumbed across Prose components. These are the components that Nuxt Content transforms Markdown into. Instead of a standard a tag, it will use a ProseA component.
The key to customizing them is to overwrite them by adding a ProseTag to components/content.
Here's my finally, mercifully, beautifully padded ProseP.vue
<template>
<p class='mb-md'><slot /></p>
</template>
Is it annoying to duplicate all the ones I need? Yes. Will I forget to keep them updated as Nuxt updates? Certainly.
Did you choose a different approach? Let me know!