github-markdown-tailwindcss
Replicate GitHub Flavored Markdown with Tailwind CSS components
🔩 Usage
To use, include the provided style sheet (markdown.css
) and add the markdown
class to any element that you wish to render as Github Flavored Markdown (GFM).
Example
<!-- Rendered in default Tailwind style -->
<h1>Header</h1>
<!-- Rendered in GFM style -->
<h1 class="markdown">Header</h1>
Working with Hugo
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.
Example
<div class="markdown">
{{ .Content }}
</div>
🕊️ Nesting
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.
Using the Nest Script
python nest.py
👬 Contribution
- Report issues
- Open pull requests with improvements
- Spread the word
📖 References
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.