Typography preset for PandaCSS, inspired by TailwindCSS Typography, for beautiful and consistent text styling.
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:
- Add the preset to your PandaCSS configuration (panda.config.ts).
- 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.
