https://github.com/iandinwoodie/github-markdown-tailwindcss

⛵ Replicate GitHub Flavored Markdown with Tailwind CSS components
https://github.com/iandinwoodie/github-markdown-tailwindcss

css github-flavored-markdown github-markdown hugo markdown tailwind tailwind-css tailwindcss

Last synced: 2 months ago
JSON representation

⛵ Replicate GitHub Flavored Markdown with Tailwind CSS components

• Host: GitHub
• URL: https://github.com/iandinwoodie/github-markdown-tailwindcss
• Owner: iandinwoodie
• License: mit
• Created: 2019-08-09T05:47:18.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-28T17:03:16.000Z (almost 4 years ago)
• Last Synced: 2024-09-26T01:54:39.841Z (4 months ago)
• Topics: css, github-flavored-markdown, github-markdown, hugo, markdown, tailwind, tailwind-css, tailwindcss
• Language: CSS
• Homepage:
• Size: 9.77 KB
• Stars: 117
• Watchers: 6
• Forks: 20
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
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

```html

Header


Header

```

## ![favicon-32x32](https://user-images.githubusercontent.com/20260845/62817975-cd02ea00-bb0d-11e9-9553-077e509cf3f5.png) 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

```html



  {{ .Content }}



```


## 🕊️ 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

```bash

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](https://github.com/adamwathan) (the creator of Tailwind CSS). He first publicized this idea in a [comment](https://github.com/tailwindcss/discuss/issues/243#issuecomment-481175230) on an issue in the Tailwind CSS discussion repository.