Logo Windi CSS

排版

工具类

ClassBody 字体大小
prose-sm0.875rem (14px)
prose1rem (16px)
prose-lg1.125rem (18px)
prose-xl1.25rem (20px)
prose-2xl1.5rem (24px)
Class链接颜色
prose-redred.600
prose-yellowyellow.600
prose-greengreen.600
prose-blueblue.600
prose-indigoindigo.600
prose-purplepurple.600
prose-pinkpink.600

基本用法

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

现在你可以使用 prose 工具类 (或者其中一种可变修饰) 来设置包裹 HTML 元素的样式：

<article class="prose">
  <h1>Styled heading!</h1>
  <blockquote>Very useful for styling markdown content!</blockquote>
</article>

禁用大小调节器

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

自定义配置

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