Tailwind CSS 46 🎨 Typography Plugin (@tailwindcss/typography / prose classes) - KandZ

Tailwind’s preflight resets every browser default. The headings lose their sizes, the paragraphs lose their margins, and the lists lose their markers. This is intentional: the reset gives the developer a blank canvas, and the utility classes paint the styles. But when the content comes from a Markdown file, a CMS, or a rich-text editor, the developer does not control the HTML. The headings, the paragraphs, and the lists are generated by the parser, and adding the utility classes to each element is impractical. The @tailwindcss/typography plugin solves this by providing the prose classes: a set of pre-designed, customizable typography defaults that style the vanilla HTML inside the container, without the developer adding a class to every element .

The plugin is the first-party plugin for the content that the developer does not control. The prose class is applied to the container, and every matching descendant — the h1, the p, the ul, the blockquote, the table, the code — receives the typographic styles. The defaults are hand-tuned by professional designers, and they include the relationships between the font sizes, the heading spacing, the code block padding, and the more . The result is a container of readable, well-spaced content, with a single class.

The plugin is customizable. The gray scale modifiers (prose-slate, prose-zinc, prose-neutral, prose-stone) change the color palette . The size modifiers (prose-sm, prose-lg, prose-xl, prose-2xl) change the overall type scale . The prose-invert modifier switches to the dark mode version, and the dark:prose-invert applies it when the dark mode is active . The element modifiers (prose-headings:, prose-a:, prose-img:) customize the individual elements directly in the HTML . The plugin is the complete typography system, and the prose class is the entry point.

This chapter covers three areas. First, why the typography plugin exists — the uncontrolled-content problem and the pre-designed defaults. Second, how to install and use it — the @plugin directive, the prose class, the gray scales, the sizes, the dark mode, and the element modifiers. Third, the customization and the integration — the not-prose class, the CSS variables, the @utility customization, and the patterns for the content-like components and the true UI islands. The chapter ends with a complete example session, a quick reference, best practices, common pitfalls, real-world examples, and diagrams showing the prose scoping.

Key point: The @tailwindcss/typography plugin provides the prose classes for styling the HTML content that the developer does not control. The prose class is applied to the container, and the descendants receive the typographic defaults. The gray scales, the sizes, the dark mode, and the element modifiers customize the result. The not-prose class undoes the prose styles for the embedded UI. The plugin is installed with the @plugin directive in Tailwind v4, and it is customizable through the @utility directive or the JavaScript config.

Why the typography plugin exists

The uncontrolled-content problem. A blog post, a documentation page, or a CMS article renders the Markdown or the rich-text HTML. The developer does not write the h1 and the p tags; the parser generates them. Adding the Tailwind classes to each element is impractical, and the classes are the implementation detail that the content editor does not know about. The prose class is the container-level solution: the class is applied once, and the descendants receive the styles. The content is the vanilla HTML, and the plugin is the style layer .

The pre-designed-defaults problem. The typography defaults are not arbitrary. The heading sizes, the paragraph spacing, the line heights, the code block padding, and the list markers are hand-tuned to look beautiful together. The developer who writes the styles from scratch must tune the relationships, and the tuning is the time-consuming. The plugin provides the defaults, and the developer overrides only the parts that need the customization .

The gray-scale problem. The typography has the color palette, and the palette must match the project’s grays. The plugin includes the five modifiers — prose-gray (the default), prose-slate, prose-zinc, prose-neutral, prose-stone — so the content can match the grays used in the rest of the project. The modifier is used with the base prose class: <article class="prose prose-slate"> .

The type-scale problem. The typography has the size, and the size must match the context. A sidebar widget needs the smaller prose-sm, and the hero section needs the larger prose-xl. The plugin includes the five sizes — prose-sm, prose-base (the default), prose-lg, prose-xl, prose-2xl — and the sizes can be combined with the breakpoint modifiers: <article class="prose md:prose-lg lg:prose-xl"> .

The dark-mode problem. The dark mode requires the different colors, and the plugin includes the hand-designed dark version for each color theme. The prose-invert class switches to the dark version, and the dark:prose-invert applies it when the dark mode is active: <article class="prose dark:prose-invert"> .

The element-modifier problem. The house style may require the links in the brand color, the images with the border radius, or the headings with the underline. The element modifiers apply the Tailwind utilities to the specific elements: <article class="prose prose-a:text-blue-600 prose-img:rounded-xl prose-headings:underline"> . The modifiers are the supported customization channel, and they avoid the custom CSS.

The trade-off. The prose class is the broad stroke. It styles every matching descendant, and the embedded components — the buttons, the cards, the interactive demos — inherit the prose styles, which may be the wrong. The not-prose class is the escape hatch, and the element modifiers are the fine-tuning. The trade-off is between the convenience of the container-level styling and the precision of the component-level control.

a. Installing and using the plugin

The plugin is installed with the package manager, and it is registered with the @plugin directive in Tailwind v4.

npm install -D @tailwindcss/typography

The @plugin directive is added to the CSS file:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

The prose class is applied to the container:

<article class="prose">
  <h1>Article Title</h1>
  <p>Article content...</p>
</article>

The h1, the p, and the other descendants receive the typographic defaults. The plugin is the first-party, and the installation is the two steps .

The gray scales. The five modifiers change the color palette:

Class	The gray scale
`prose-gray`	The default
`prose-slate`	The slate
`prose-zinc`	The zinc
`prose-neutral`	The neutral
`prose-stone`	The stone

The modifier is used with the base prose class: <article class="prose prose-stone"> .

The sizes. The five modifiers change the type scale:

Class	The body font size
`prose-sm`	0.875rem (14px)
`prose-base`	1rem (16px) — the default
`prose-lg`	1.125rem (18px)
`prose-xl`	1.25rem (20px)
`prose-2xl`	1.5rem (24px)

The modifier is used with the base prose class, and it can be combined with the breakpoints: <article class="prose md:prose-lg lg:prose-xl"> .

The dark mode. The prose-invert class switches to the dark version, and the dark:prose-invert applies it when the dark mode is active:

<article class="prose dark:prose-invert">

The dark version is hand-designed for each color theme, and the prose-invert is the switch .

b. The element modifiers

The element modifiers customize the individual elements directly in the HTML. The syntax is prose-element:utility.

<article class="prose prose-headings:underline prose-a:text-blue-600 prose-img:rounded-xl">

The prose-headings:underline underlines the headings, the prose-a:text-blue-600 makes the links blue, and the prose-img:rounded-xl rounds the images. The modifiers are the supported customization channel, and they avoid the custom CSS .

The complete list of the element modifiers:

The modifier	The target
`prose-headings:`	The h1, h2, h3, h4, th
`prose-lead:`	The `[class~="lead"]`
`prose-h1:`	The h1
`prose-h2:`	The h2
`prose-h3:`	The h3
`prose-h4:`	The h4
`prose-p:`	The p
`prose-a:`	The a
`prose-blockquote:`	The blockquote
`prose-figure:`	The figure
`prose-figcaption:`	The figcaption
`prose-strong:`	The strong
`prose-em:`	The em
`prose-kbd:`	The kbd
`prose-code:`	The code
`prose-pre:`	The pre
`prose-ol:`	The ol
`prose-ul:`	The ul
`prose-li:`	The li
`prose-table:`	The table
`prose-thead:`	The thead
`prose-tr:`	The tr
`prose-th:`	The th
`prose-td:`	The td
`prose-img:`	The img
`prose-video:`	The video
`prose-hr:`	The hr

The stacking with the other modifiers: the other modifier comes first. The hover:prose-a:text-blue-500 is the hover state of the links, and the prose-a:text-blue-600 is the base .

The not-prose class. The embedded UI — the buttons, the cards, the interactive demos — should not receive the prose styles. The not-prose class undoes the prose styles for the content inside:

<article class="prose">
  <h1>Article Title</h1>
  <p>Article content...</p>
  <div class="not-prose">
    <button>Interactive button</button>
  </div>
  <p>More content...</p>
</article>

The prose styles stop at the not-prose boundary, and the embedded UI styles itself from zero. The two caveats: the prose region cannot be nested inside the not-prose block, and the island loses all the typographic defaults .

c. The customization

The @utility customization. In Tailwind v4, the prose styles can be customized with the @utility directive, without the JavaScript config:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@utility prose-pink {
  @apply prose;
  & > * {
    --tw-prose-body: var(--color-pink-800);
    --tw-prose-headings: var(--color-pink-900);
  }
}

The prose-pink utility applies the prose base and overrides the CSS variables for the body and the headings. The pattern is the CSS-first customization, and it produces the same result as the JavaScript config .

The JavaScript config. The tailwind.config.js can still be used with the @config directive, and the theme.extend.typography key customizes the prose styles:

module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        maincolors: {
          css: {
            '--tw-prose-headings': theme('colors.dark'),
            '--tw-prose-body': theme('colors.midup'),
          },
        },
      }),
    },
  },
};

The custom theme is applied with the prose-maincolors class .

The CSS variables. The prose styles are driven by the CSS variables — the --tw-prose-body, the --tw-prose-headings, the --tw-prose-links, the --tw-prose-bold, the --tw-prose-quote-borders, the --tw-prose-code — and the customization overrides them. The prose-invert switches to the --tw-prose-invert-* variables, so the dark mode is the separate set of the values .

The content-like components. The inline CTAs, the affiliate links, and the emphasized links are the content-like components, and the cleanest approach is to design them to cooperate with the prose styles. They inherit the link color and the underline, and they differentiate with the weight or the accent border. The “swim with the current” approach avoids the CSS conflict, and the components read as the native to the article .

The true UI islands. The product comparison cards, the interactive demos, and the forms are the true UI islands, and the not-prose class sandboxes them. The prose styles stop at the boundary, and the island styles itself. The pattern is the third tier, and it is the sledgehammer that should be used only when the first two tiers do not apply .

Complete Example Session

<!-- ============================================
     PART 1: THE BASIC PROSE
     ============================================ -->

<article class="prose">
  <h1>Article Title</h1>
  <p>This is the article content. It is styled with the prose defaults.</p>
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <blockquote>
    <p>A quote from the article.</p>
  </blockquote>
</article>


<!-- ============================================
     PART 2: THE GRAY SCALE
     ============================================ -->

<article class="prose prose-slate">
  <h1>Slate Article</h1>
  <p>The prose-slate modifier changes the gray scale to the slate.</p>
</article>


<!-- ============================================
     PART 3: THE SIZE
     ============================================ -->

<article class="prose prose-lg">
  <h1>Large Article</h1>
  <p>The prose-lg modifier changes the type scale to the large.</p>
</article>

<article class="prose md:prose-lg lg:prose-xl">
  <h1>Responsive Article</h1>
  <p>The size changes at the breakpoints.</p>
</article>


<!-- ============================================
     PART 4: THE DARK MODE
     ============================================ -->

<article class="prose dark:prose-invert">
  <h1>Dark Mode Article</h1>
  <p>The prose-invert class switches to the dark version.</p>
</article>


<!-- ============================================
     PART 5: THE ELEMENT MODIFIERS
     ============================================ -->

<article class="prose prose-headings:underline prose-a:text-blue-600 prose-img:rounded-xl">
  <h1>Styled Article</h1>
  <p>The headings are underlined. <a href="#">The links are blue</a>.</p>
  <img src="image.jpg" alt="An image" />
</article>


<!-- ============================================
     PART 6: THE NOT-PROSE
     ============================================ -->

<article class="prose">
  <h1>Article Title</h1>
  <p>Article content...</p>
  <div class="not-prose">
    <button class="rounded bg-blue-500 px-4 py-2 text-white">
      Interactive button
    </button>
  </div>
  <p>More content...</p>
</article>


<!-- ============================================
     PART 7: THE COMBINATION
     ============================================ -->

<article class="prose prose-slate prose-lg dark:prose-invert prose-headings:underline prose-a:text-blue-600">
  <h1>Complete Article</h1>
  <p>The article combines the gray scale, the size, the dark mode, and the element modifiers.</p>
</article>


<!-- ============================================
     PART 8: THE THEME INVERT
     ============================================ -->

<article class="prose dark:prose-invert">
  <h1>Dark Mode</h1>
  <p>The prose-invert switches the colors to the dark version.</p>
  <a href="#">The link color is the dark version.</a>
</article>


<!-- ============================================
     PART 9: THE CONTENT-LIKE COMPONENT
     ============================================ -->

<article class="prose">
  <p>
    For more information, read the
    <a href="#" class="font-bold underline">documentation</a>.
  </p>
  <div class="not-prose">
    <a href="#" class="inline-flex items-center rounded-lg border-2 border-stone-900 bg-white px-4 py-2 font-semibold text-stone-900 hover:bg-stone-100">
      Get started
    </a>
  </div>
</article>


<!-- ============================================
     PART 10: THE COMPLETE CONFIGURATION
     ============================================ -->

<!-- The CSS file -->
<style type="text/tailwindcss">
  @import "tailwindcss";
  @plugin "@tailwindcss/typography";

  @utility prose-pink {
    @apply prose;
    & > * {
      --tw-prose-body: var(--color-pink-800);
      --tw-prose-headings: var(--color-pink-900);
      --tw-prose-links: var(--color-pink-600);
    }
  }
</style>

<!-- The HTML -->
<article class="prose-pink dark:prose-invert">
  <h1>Custom Pink Article</h1>
  <p>The article uses the custom pink prose theme.</p>
  <a href="#">The links are the pink.</a>
</article>

The ten parts show the basic prose, the gray scale, the size, the dark mode, the element modifiers, the not-prose, the combination, the theme invert, the content-like component, and the complete configuration.

Quick Reference

The Plugin Installation

Step	The command
Install	`npm install -D @tailwindcss/typography`
The v4 directive	`@plugin "@tailwindcss/typography";`
The v3 config	`plugins: [require('@tailwindcss/typography')]`
The custom class name	`@plugin "@tailwindcss/typography" { className: wysiwyg; }`

The Gray Scales

The class	The palette
`prose-gray`	The default
`prose-slate`	The slate
`prose-zinc`	The zinc
`prose-neutral`	The neutral
`prose-stone`	The stone

The Sizes

The class	The body size
`prose-sm`	0.875rem
`prose-base`	1rem
`prose-lg`	1.125rem
`prose-xl`	1.25rem
`prose-2xl`	1.5rem

The Dark Mode

The class	The effect
`prose-invert`	The dark version
`dark:prose-invert`	The dark version in the dark mode
`dark:prose-invert` with `@custom-variant`	The class-based dark mode

The Element Modifiers

The modifier	The target
`prose-headings:`	The h1, h2, h3, h4, th
`prose-a:`	The a
`prose-img:`	The img
`prose-code:`	The code
`prose-pre:`	The pre
`prose-blockquote:`	The blockquote
`prose-ul:`	The ul
`prose-ol:`	The ol
`prose-li:`	The li
`prose-table:`	The table

The Customization

The approach	The syntax
The `@utility`	`@utility prose-pink { @apply prose; ... }`
The JavaScript config	`theme.extend.typography`
The CSS variables	`--tw-prose-body`, `--tw-prose-headings`

Best Practices

✅ Do This:

<!-- Use the prose class on the container -->
<article class="prose">...</article>                                      <!-- ✅ -->
<!-- Combine the gray scale and the size -->
<article class="prose prose-slate prose-lg">...</article>                   <!-- ✅ -->
<!-- Use the dark mode with the invert -->
<article class="prose dark:prose-invert">...</article>                      <!-- ✅ -->
<!-- Use the element modifiers for the house style -->
<article class="prose prose-a:text-blue-600">...</article>                  <!-- ✅ -->
<!-- Use the not-prose for the embedded UI -->
<div class="not-prose"><button>...</button></div>                           <!-- ✅ -->
<!-- Design the content-like components to cooperate -->
<a class="font-bold underline">...</a>                                      <!-- ✅ -->
<!-- Use the @utility for the custom theme -->
@utility prose-pink { @apply prose; ... }                                   <!-- ✅ -->

❌ Don’t Do This:

<!-- Don't forget the base prose class with the modifier -->
<article class="prose-slate">...</article>  <!-- the missing prose -->       // ❌
<!-- Don't use the prose for the UI components -->
<div class="prose"><button>...</button></div>  <!-- the wrong scope -->      // ❌
<!-- Don't nest the prose inside the not-prose -->
<div class="not-prose"><article class="prose">...</article></div>           // ❌
<!-- Don't stack the !important utilities -->
<p class="!mt-0 !mb-0">...</p>  <!-- the skipped tier -->                    // ❌
<!-- Don't use the prose for the interactive demos -->
<div class="prose"><InteractiveDemo /></div>  <!-- the UI island -->        // ❌
<!-- Don't customize with the arbitrary CSS without the variables -->
.prose p { margin: 0; }  <!-- the plugin variable is the better -->         // ❌

Common Pitfalls

The pitfall	The why	The fix
The modifier is ignored	The missing base `prose`	Add the `prose` class
The dark mode is not working	The missing `dark:prose-invert`	Add the class
The UI inherits the prose	The missing `not-prose`	Wrap the UI
The nesting is broken	The `prose` inside the `not-prose`	Restructure
The customization is not applied	The wrong variable	Use the `--tw-prose-*` variables
The `@plugin` is not found	The missing installation	`npm install -D @tailwindcss/typography`
The size is not changing	The modifier is stacked wrong	The base `prose` first

Real-World Examples

1. The Basic Article

<article class="prose">...</article>

2. The Slate Article

<article class="prose prose-slate">...</article>

3. The Large Article

<article class="prose prose-lg">...</article>

4. The Dark Mode

<article class="prose dark:prose-invert">...</article>

5. The Element Modifiers

<article class="prose prose-a:text-blue-600 prose-img:rounded-xl">...</article>

6. The Not-Prose

<div class="not-prose"><button>...</button></div>

7. The Combination

<article class="prose prose-slate prose-lg dark:prose-invert">...</article>

8. The Custom Theme

@utility prose-pink { @apply prose; ... }

9. The Responsive Size

<article class="prose md:prose-lg lg:prose-xl">...</article>

10. The Complete

<article class="prose prose-slate prose-lg dark:prose-invert prose-a:text-blue-600">...</article>

Visual

The Prose Scoping

┌──────────────────────────────────────────────────────────────┐
│  THE PROSE SCOPING                                           │
│                                                              │
│  <article class="prose">                                     │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  The prose class is on the container.                │    │
│  │                                                       │    │
│  │  ┌────────────────────────────────────────────────┐  │    │
│  │  │  <h1>  ← the heading styles                    │  │    │
│  │  │  <p>   ← the paragraph styles                  │  │    │
│  │  │  <ul>  ← the list styles                       │  │    │
│  │  │  <code> ← the code styles                      │  │    │
│  │  └────────────────────────────────────────────────┘  │    │
│  │                                                       │    │
│  │  The descendants receive the typographic defaults.   │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
│  <div class="not-prose">                                     │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  The prose styles STOP at the boundary.              │    │
│  │                                                       │    │
│  │  <button>  ← the button styles itself                │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

The Element Modifiers

┌──────────────────────────────────────────────────────────────┐
│  THE ELEMENT MODIFIERS                                       │
│                                                              │
│  <article class="prose prose-a:text-blue-600 prose-img:rounded-xl">│
│                                                              │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  prose-a:    → the <a> elements receive the utility  │    │
│  │  prose-img:  → the <img> elements receive the utility│    │
│  │  prose-headings: → the h1, h2, h3, h4, th            │    │
│  │  prose-p:    → the <p> elements                      │    │
│  │  prose-code: → the <code> elements                   │    │
│  │  prose-pre:  → the <pre> elements                    │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
│  The modifier is applied to the container, and the plugin    │
│  applies the utility to the matching descendants.            │
│                                                              │
└──────────────────────────────────────────────────────────────┘

The Dark Mode

┌──────────────────────────────────────────────────────────────┐
│  THE DARK MODE                                               │
│                                                              │
│  <article class="prose dark:prose-invert">                   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  The light mode:                                     │    │
│  │    --tw-prose-body: the dark gray                    │    │
│  │    --tw-prose-headings: the black                    │    │
│  │    --tw-prose-links: the blue                        │    │
│  │                                                       │    │
│  │  The dark mode:                                      │    │
│  │    --tw-prose-invert-body: the light gray            │    │
│  │    --tw-prose-invert-headings: the white             │    │
│  │    --tw-prose-invert-links: the light blue           │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
│  The prose-invert switches to the invert variables.          │
│                                                              │
└──────────────────────────────────────────────────────────────┘

The Customization

┌──────────────────────────────────────────────────────────────┐
│  THE CUSTOMIZATION                                           │
│                                                              │
│  THE @utility APPROACH:                                      │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  @utility prose-pink {                               │    │
│  │    @apply prose;                                     │    │
│  │    & > * {                                           │    │
│  │      --tw-prose-body: var(--color-pink-800);         │    │
│  │      --tw-prose-headings: var(--color-pink-900);     │    │
│  │    }                                                 │    │
│  │  }                                                   │    │
│  │                                                       │    │
│  │  The custom utility applies the prose base and       │    │
│  │  overrides the CSS variables.                        │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
│  THE USAGE:                                                  │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  <article class="prose-pink">                        │    │
│  │    ...                                               │    │
│  │  </article>                                          │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
The plugin	`@tailwindcss/typography`
The class	`prose`
The gray scales	`prose-gray`, `prose-slate`, `prose-zinc`, `prose-neutral`, `prose-stone`
The sizes	`prose-sm`, `prose-base`, `prose-lg`, `prose-xl`, `prose-2xl`
The dark mode	`prose-invert`, `dark:prose-invert`
The element modifiers	`prose-a:`, `prose-img:`, `prose-headings:`
The not-prose	The undo class
The installation	`@plugin "@tailwindcss/typography";`
The customization	The `@utility` or the JavaScript config

Key takeaways:

The typography plugin styles the HTML content that the developer does not control. The prose class is applied to the container, and the descendants receive the hand-tuned typographic defaults. The plugin is the solution for the Markdown, the CMS, and the rich-text content .
The gray scales, the sizes, and the dark mode are the modifier classes. The prose-slate, the prose-lg, and the prose-invert customize the palette, the type scale, and the dark mode. The modifiers are used with the base prose class .
The element modifiers customize the individual elements. The prose-a:text-blue-600, the prose-img:rounded-xl, and the prose-headings:underline apply the Tailwind utilities to the specific elements. The modifiers are the supported customization channel .
The not-prose class undoes the prose styles. The embedded UI — the buttons, the cards, the interactive demos — should not inherit the prose styles. The not-prose class sandboxes them, and the prose styles stop at the boundary .
The content-like components should cooperate with the prose. The inline CTAs and the affiliate links inherit the link color and the underline, and they differentiate with the weight or the accent border. The “swim with the current” approach avoids the CSS conflict .
The plugin is installed with the @plugin directive in Tailwind v4. The @plugin "@tailwindcss/typography"; line registers the plugin, and the @import "tailwindcss"; imports the framework. The JavaScript config is the legacy path .
The customization uses the CSS variables or the JavaScript config. The --tw-prose-body, the --tw-prose-headings, and the other variables control the colors. The @utility directive customizes the prose in the CSS-first mode, and the theme.extend.typography customizes it in the JavaScript config .
The typography plugin is the first-party plugin for the content. The prose class is the entry point, and the modifiers, the dark mode, and the element modifiers are the customization. The result is the beautiful typographic defaults for the content the developer does not control.

Remember: The @tailwindcss/typography plugin provides the prose classes for the HTML content the developer does not control. The prose class styles the descendants, the gray scales and the sizes customize the palette and the type scale, the prose-invert handles the dark mode, and the element modifiers customize the individual elements. The not-prose class undoes the prose for the embedded UI. The plugin is installed with the @plugin directive, and it is customized with the CSS variables or the JavaScript config. The result is the readable, well-spaced content with a single class, which is the foundation of the typography for the Markdown, the CMS, and the rich-text.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!