Replicate GitHub Flavored Markdown with Tailwind CSS components
To use, include the provided style sheet (markdown.css) and add the markdown
class to any elemen
8175
t that you wish to render as Github Flavored Markdown (GFM).
<!-- Rendered in default Tailwind style -->
<h1>Header</h1>
<!-- Rendered in GFM style -->
<h1 class="markdown">Header</h1>
You can use this style sheet to style your generated Hugo content. To do so,
wrap your content with an element that contains the markdown class.
<div class="markdown">
{{ .Content }}
</div>For those of you who wish to have the class rules nested I have provided a
simple python script (nest.py) to generate a style sheet with nesting
(markdown-nested.css). The nesting script just applies a very simple
reformatting.
python nest.py- Report issues
- Open pull requests with improvements
- Spread the word
The idea to use the @apply directive to create rules for a Markdown class was concieved by @adamwathan (the creator of Tailwind CSS). He first publicized this idea in a comment on an issue in the Tailwind CSS discussion repository.