Logo Windi CSS

Typography

Утилиты

КлассРазмер шрифта основного текста
prose-sm0.875rem (14px)
prose1rem (16px)
prose-lg1.125rem (18px)
prose-xl1.25rem (20px)
prose-2xl1.5rem (24px)
КлассЦвет ссылки
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>Стилизованный заголовок!</h1>
  <blockquote>Очень полезно для стилизации содержимого уценки!</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'),
    // ...
  ],
}