2022-07-04 — 1 min read

How to Add Tailwind Classes to Markdown Text

The typography plugin of Tailwind CSS provides a lead class. How can I add it to the first paragraph of my posts if I’m using Markdown to write the text?

Jekyll by default uses Kramdown’s GitHub Flavored Markdown (GFM) parser to convert Markdown text to HTML. According to the Kramdown docs to add CSS classes to an element, we must directly follow the block with a block inline attribute list (a left curly brace, followed by a colon, the attribute definitions, and a right curly brace):

This is our paragraph.
{: .lead}

This will be converted to the following HTML:

 <p class="lead">This is our paragraph.</p>
 

Thanks for reading! If you have any comments, additions, or corrections, feel free to reach me via e-mail.

Copyright © 2023 csm.hu
Contact