@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

Installation

pnpm add @unocss/preset-typography -D

Usage

// unocss.config.js
import { presetAttributify, presetUno, defineConfig } from 'unocss'
import { presetTypography } from '@unocss/preset-typography'

export default defineConfig({
  presets: [
    presetAttributify(), // required if using attributify mode
    presetUno(), // required
    presetTypography(),
  ],
})

With classes	With attributes
<article class="text-base prose prose-truegray xl:text-xl"> {{ markdown }} <p class="not-prose"> some text </p> </article>	<article text-base prose prose-truegray xl="text-xl"> {{ markdown }} <p class="not-prose"> not-prose is only available in class. </p> </article>

Highlight

• Any font size you want

  Apply any font size for body you like and prose will scale the styles for the respective HTML elements. For instance, prose text-lg has body font size 1.125rem and h1 will with scale with that size 2.25 times. See all the supported HTML elements.

• Any color you like

  Apply any color with prose-${colorName} by UnoCSS (e.g. prose-coolgray, prose-sky) since prose does not have any color by default. See all available colors. For instance, prose prose-truegray will use the respective colors for the respective HTML elements.

• Dark mode in ONE utility

  Apply typographic dark mode with prose-invert (background color needs to be handled by users). For instance, prose dark:prose-invert will use the inverted colors in the dark mode.

• Your own style, still your style

  Styles of elements not within prose will stay the same. No style resetting just like UnoCSS.

• Undo with not utility

  Apply not-prose to the elements to undo the typographic styles. For instance, <table class="not-prose"> will skip the styles by this preset for the table element (NOTE: not utility is only usable in class since it is only used in CSS selector & not scanned by UnoCSS).

Utilities

Rule	Styles by this rule
prose	See on GitHub.

Colors

Rules (color)
prose-rose
prose-pink
prose-fuchsia
prose-purple
prose-violet
prose-indigo
prose-blue
prose-sky
prose-cyan
prose-teal
prose-emerald
prose-green
prose-lime
prose-yellow
prose-amber
prose-orange
prose-red
prose-gray
prose-slate
prose-zinc
prose-neutral
prose-stone

Configurations

This preset has className and cssExtend configurations for users who like to override or extend.

The CSS declarations passed to cssExtend will

• override the built-in styles if the values are conflicting, else

• be merged deeply with built-in styles.

Type of TypographyOptions

export interface TypographyOptions {
  /**
   * The class name to use the typographic utilities.
   * To undo the styles to the elements, use it like
   * `not-${className}` which is by default `not-prose`.
   *
   * Note: `not` utility is only available in class.
   *
   * @defaultValue `prose`
   */
  className?: string

  /**
   * Extend or override CSS selectors with CSS declaration block.
   *
   * @defaultValue undefined
   */
  cssExtend?: Record<string, CSSObject>
}

Example

// unocss.config.ts
import { presetAttributify, presetUno, defineConfig } from 'unocss'
import { presetTypography } from '@unocss/preset-typography'

export default defineConfig({
  presets: [
    presetAttributify(), // required if using attributify mode
    presetUno(), // required
    presetTypography({
      className: 'markdown', // now use like `markdown markdown-gray`, `not-markdown`
      // cssExtend is an object with CSS selector as key and
      // CSS declaration block as value like writing normal CSS.
      cssExtend: {
        code: {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Acknowledgement

• TailwindCSS Typography
• WindiCSS Typography

License

MIT © 2021-Present Anthony Fu

MIT © 2021-Present Jeff Yang