@unocss/preset-typography

What is @unocss/preset-typography?

@unocss/preset-typography is a preset for UnoCSS that provides a set of typography-related utilities. It helps in styling text content with ease, offering a variety of features such as responsive typography, text alignment, and more.

What are @unocss/preset-typography's main functionalities?

Responsive Typography

This feature allows you to create text elements that adjust their size based on the screen size, ensuring readability across different devices.

```html
<div class="prose lg:prose-xl">
  <h1>Responsive Heading</h1>
  <p>This is a paragraph that adjusts its size based on the screen size.</p>
</div>
```

Text Alignment

This feature provides utilities for aligning text content, such as centering text within a container.

```html
<div class="prose text-center">
  <h1>Centered Heading</h1>
  <p>This paragraph is centered.</p>
</div>
```

Custom Font Styles

This feature allows you to apply custom font styles to your text content, such as using serif or sans-serif fonts.

```html
<div class="prose font-serif">
  <h1>Serif Heading</h1>
  <p>This paragraph uses a serif font style.</p>
</div>
```

Other packages similar to @unocss/preset-typography

tailwindcss-typography

tailwindcss-typography is a plugin for Tailwind CSS that provides a set of prose classes for styling rich text content. It offers similar functionalities to @unocss/preset-typography, such as responsive typography and text alignment, but is designed to work specifically with Tailwind CSS.

typography

typography is a JavaScript library that provides a comprehensive set of tools for creating beautiful typography. It offers more advanced features compared to @unocss/preset-typography, such as modular scale and vertical rhythm, but requires more configuration and setup.

styled-components

styled-components is a library for React and React Native that allows you to use component-level styles in your application. While it is not specifically focused on typography, it provides the flexibility to create custom typography styles using JavaScript and CSS-in-JS.

README

@unocss/preset-typography

Typography Preset for UnoCSS

Documentation

Please refer to the documentation.

Acknowledgement

• TailwindCSS Typography
• WindiCSS Typography

License

MIT License © 2021-PRESENT Anthony Fu

MIT License © 2021-PRESENT Jeff Yang