Index - Tailwindcss — ContextQMD

import { adamwathan } from "@/app/blog/authors"; import { Example, Figure } from "@/components/example.tsx"; import Link from "next/link"; import { YouTubeVideo } from "@/components/media"; import card from "./card.jpg";

export const meta = { title: "Effortless Typography, Even in Dark Mode", description: Today we're announcing the next version of the Tailwind CSS Typography plugin, which brings easy dark mode support and a brand new customization API., date: "2021-12-17T18:50:00.000Z", authors: [adamwathan], image: card, excerpt: ( <> Today we're announcing the next version of the{" "} <Link href="https://v3.tailwindcss.com/docs/typography-plugin">Tailwind CSS Typography plugin</Link>, 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.

Easy dark mode support

We've added a prose-invert class you can use to easily swap out your typography colors in dark mode:

html

<!-- [!code word:dark\:prose-invert] -->
<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.

Pick your gray scale

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:

html

<!-- [!code word:prose-slate] -->
<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.

HTML-based customization API

We've added tons of modifiers you can use to tweak specific elements in your prose styles, directly in your HTML:

html

<!-- [!code word:prose-headings\:underline] -->
<!-- [!code word:prose-img\:rounded-xl] -->
<!-- [!code word:prose-a\:text-blue-600] -->
<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.

Undo prose styles

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:

html

<!-- [!code word:not-prose] -->
<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.