This content originally appeared on DEV Community and was authored by Oz Ertas
Tailwind CSS comes with "an opinionated set of base styles" called Preflight. A helpful CSS reset built on top of modern-normalize.
Margins, headings, lists, and many others get stripped from their defaults. Thus, achieving cross-browser consistency and an easier adaptation of your design system.
It all sounds helpful, until you need those defaults to style a markdown post.
In comes @tailwindcss/typography, a plugin with sensible typographic styles. It adds a set of prose classes to style content blocks like the one you are reading.
You can install it via npm or yarn:
# Using npm
npm install @tailwindcss/typography
# Using Yarn
yarn add @tailwindcss/typography
Then add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/typography'),
// ...
],
}
Finally, you can use the prose class to apply the markdown styling:
<article class="prose lg:prose-xl">
<h1>Welcome to Mars!</h1>
<p>
Although life on Mars is perfect in every single way, you might have some questions.
</p>
<p>
Of course there’s air! Just don’t breathe it. And, with the crazy gravity situation, everyone can dunk!
</p>
<!-- ... -->
</article>
More information about the prose class and its modifiers can be found at the repository.
This content originally appeared on DEV Community and was authored by Oz Ertas
Oz Ertas | Sciencx (2021-11-16T22:51:58+00:00) How to style markdown with Tailwind CSS. Retrieved from https://www.scien.cx/2021/11/16/how-to-style-markdown-with-tailwind-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.