Tailwind installed - what's the latest in styling markdown?

support
1

So I got Tailwind installed with Hugo (see link) and did my theme layout.

However, MD files now render just as text without any styling.

I am aware there is @tailwind/typography - so do I need to add every single markdown style element with @apply ? I do need mainly H, line breaks and images sizing.

2

I ran into something similar and I did end up with a handful of @apply's for p and a couple of header tags. But mainly I used custom shortcodes to get some styling in.

3

I’m thinking of a range of @apply strings. Will do some experimenting. Are you aware of any list that can be shared?

Another way would be to design you theme first completely, then “build it” and use that as your hugo theme without any tailwind anymore.

For now I will stick to apply. I found a type a ‘shortcut’ in this tailwind Hugo theme:

Update:
It sort of works, probably need more fine tuning. I removed some lines, now It looks like:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply text-gray-800;
}

h1, h2, h3, h4, h5, h6, strong {
  @apply text-gray-900;
}

article > p, ul, ol {
  @apply text-lg tracking-wide;
}

article > div, p, ul, ol, pre:not(:last-child) {
  @apply mb-6;
}

article > h1 {
  @apply text-6xl my-8 font-bold ;
}

article > h2 {
  @apply text-5xl my-8 font-bold;
}

article > h3 {
  @apply text-4xl my-8 font-bold;
}

article > h4{
  @apply text-3xl my-8 font-bold ;
}

article > h5 {
  @apply text-2xl my-8 font-bold ;
}

article > h6 {
  @apply text-xl my-8 font-bold ;
}
4

Well, seems easiest and most flexible is the .inner HTML wrapper. Will keep that in mine once things work.

5

With that plugin you only need one or more prose classes on the wrapper element + custom config if needed.