Skip to content

⛵ Replicate GitHub Flavored Markdown with Tailwind CSS components

License

Notifications You must be signed in to change notification settings

iandinwoodie/github-markdown-tailwindcss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>

favicon-32x32 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.