• Stars
    star
    117
  • Rank 301,828 (Top 6 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

⛵ Replicate GitHub Flavored Markdown with Tailwind CSS components

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.