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: 7 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 (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-28T17:03:16.000Z (about 4 years ago)
- Last Synced: 2024-09-26T01:54:39.841Z (8 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
```
##  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.