Typography

Utilities

ClassBody font size
prose-sm0.875rem (14px)
prose1rem (16px)
prose-lg1.125rem (18px)
prose-xl1.25rem (20px)
prose-2xl1.5rem (24px)
ClassLink color
prose-redred.600
prose-yellowyellow.600
prose-greengreen.600
prose-blueblue.600
prose-indigoindigo.600
prose-purplepurple.600
prose-pinkpink.600

Basic Usage

// windi.config.js
export default {
  theme: {
    // ...
  },
  plugins: [
    require('windicss/plugin/typography'),
    // ...
  ],
}

Disabling size modifiers

// windi.config.js
export default {
  theme: {
    // ...
  },
  plugins: [
    require('windicss/plugin/typography')({
      modifiers: ['sm', 'lg'],
    }),
    // ...
  ],
}

Customization

// windi.config.js
export default {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            a: {
              'color': '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      },
    },
  },
  plugins: [
    require('windicss/plugin/typography'),
    // ...
  ],
}