3 ms·
I solved this issue for myself last night using CSS selectors. My goal was to replicate Github Flavored Markdown styling using Tailwind on Hugo generated html.
by iandinwoodie 7y ago
I solved this issue for myself last night using CSS selectors. My goal was to replicate Github Flavored Markdown styling using Tailwind on Hugo generated html. Here is the repo for the stylesheet for anyone who is interested: https://github.com/iandinwoodie/github-markdown-tailwindcss https://github.com/iandinwoodie/github-markdown-tailwindcss
The generated content is wrapped in a div with the class "markdown" (defined in the repo above). So it looks like:
<div class="markdown">{{ .Content }}</div>
I wrapped up the stylesheet around 2AM this morning, but I plan on expanding the README and un-nesting the class (it was nested for postcss-nesting).
I am just starting a personal site and it is still very much under construction, but I do have a Markdown example page publicly available that I have been using to test the styles. Here is the link in case anyone wants to take a look at the end result: https://iandinwoodie.github.io/blog/markdown-syntax-guide/ https://iandinwoodie.github.io/blog/markdown-syntax-guide/
- dinkleberg 7y agoVery cool, thanks for sharing the link. I think this is how I'll do it as well.
- adamwathan 7y agoCreator of Tailwind here, that's exactly what I would recommend too. Here are the markdown styles for my own personal website for example: https://gist.github.com/adamwathan/d257699f16ec7cc1b002b5fb7f81f35c https://gist.github.com/adamwathan/d257699f16ec7cc1b002b5fb7...