Today we’re announcing the next version of the Tailwind CSS Typography plugin, which brings easy dark
mode support, a brand new customization API, and the
not-prose
class I wasn’t sure we’d ever figure out how
to support.
Today we’re announcing the next version of the Tailwind CSS Typography plugin, which brings easy dark
mode support, a brand new customization API, and the
not-prose
class I wasn’t sure we’d ever figure out how
to support.
For a full tour of everything that’s new, check out the official release video on our YouTube channel.
Tailwind CSS Typography v0.5 is designed for Tailwind CSS v3.0, so make sure you’re on the latest version of Tailwind, then install the new plugin release from npm:
npm install -D @tailwindcss/typography@latest
To learn more about everything the plugin provides, check out our update typography plugin documentation.
We’ve added a prose-invert
class you can use to
easily swap out your typography colors in dark mode:
<body class="bg-white dark:bg-gray-900">
<article class="prose dark:prose-invert">
{{ markdown }}
</article>
</body>
The dark themes are hand-crafted by our expert design team, and automatically adapt to whatever gray scale you’re using.
Tailwind CSS v3.0 ships with five different sets of grays by default, and the updated typography plugin includes classes for each one, making it easy to match your typography to the rest of your site:
<article class="prose prose-slate">
{{ markdown }}
</article>
We’ve simplified how we define color themes internally too, which makes it easier to add your own if you need to.
Check out the documentation to learn more.
We’ve added tons of modifiers you can use to tweak specific elements in your prose styles, directly in your HTML:
<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">
{{ markdown }}
</article>
This makes it easy to do things like style links to match your brand, add a border radius to images, and tons more.
Check out the element modifiers documentation to learn more.
Ever needed to stick some non-content HTML in the middle of your
content? Now you can wrap that with not-prose
to make
sure the prose styles don’t interfere with it:
<article class="prose">
<h1>My Heading</h1>
<p>...</p>
<div class="not-prose">
<!-- Some HTML that needs to be prose-free -->
</div>
<p>...</p>
<!-- ... -->
</article>
Ready to try it out? Check out the typography plugin documentation to learn more and get started.
(The post Effortless Typography, Even in Dark Mode appeared first on Tailwind CSS Blog.)
Read more https://tailwindcss.com/blog/tailwindcss-typography-v0-5