Overview:

The 🐼 PandaCSS preset for typography is a typography plugin inspired by the TailwindCSS typography plugin. It provides a set of typographic defaults to be applied to HTML that is not under your control, such as HTML generated from Markdown or content pulled from a CMS.

Features:

• Prose Recipe: The preset generates a prose recipe that adds beautiful typographic defaults to vanilla HTML.
• Multiple Sizes: You can provide 5 different sizes for the typography: sm, base, lg, xl, and 2xl.
• Lead Paragraph: Similar to TailwindCSS, there is an extra .lead class that can be applied to any element within the scope of prose to create a nice lead paragraph.
• Customizable Options: The default options can be changed according to preference.
• Colors: Colors are currently handled by CSS variables, and there is support for dark mode if the Radix Colors preset is installed.

Installation:

To install the 🐼 PandaCSS typography preset, follow these steps:

1. Add the preset to your PandaCSS configuration (panda.config.ts).
2. Use the provided typography options to customize the preset according to your needs.

Summary:

The 🐼 PandaCSS typography preset is a useful tool for adding typographic defaults to HTML that you don’t have control over. With customizable options and support for multiple sizes, it provides a convenient way to enhance the typography of your website or application.