Skip to content
⛵ Replicate GitHub Flavored Markdown with Tailwind CSS components
CSS Python
Branch: master
Clone or download
Latest commit ffa7577 Aug 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Added python script to generate nested rules. Aug 10, 2019
LICENSE Initial commit Aug 9, 2019
README.md Fixed typos. Aug 10, 2019
markdown.css Added missing line terminator. Aug 10, 2019
nest.py Updated script to prevent adding unnecessary whitespace. Aug 10, 2019

README.md

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.

You can’t perform that action at this time.