Logo Windi CSS

Создайте свой плагин

Вы можете легко создать плагин через интерфейс windicss. Windicss построен на основе TypeScript, поэтому мы настоятельно рекомендуем вам использовать Typescript для создания плагинов, он даст вам хорошую поддержку типов и советы по завершению, конечно, если вы хотите использовать JavaScript, он также поддерживается.

Добавление статических утилит

Основное использование 

plugin(({ addUtilities }) => {
  addUtilities({
    '.aspect-none': {
      'position': 'static',
      'paddingBottom': '0',
      '> *': {
        position: 'static',
        height: 'auto',
        width: 'auto',
        top: 'auto',
        right: 'auto',
        bottom: 'auto',
        left: 'auto',
      },
    },
  })
})

Добавление динамических утилит

Основное использование 

addDynamic('filter', ({ Utility, Style }) => {
  return Utility.handler
    .handleStatic(Style('filter'))
    .createProperty(['-webkit-filter', 'filter'])
})

Добавление компонентов 

plugin(({ addComponents }) => {
  addComponents({
    '.btn': {
      padding: '.5rem 1rem',
      borderRadius: '.25rem',
      fontWeight: '600',
    },
    '.btn-blue': {
      'backgroundColor': '#3490dc',
      'color': '#fff',
      '&:hover': {
        backgroundColor: '#2779bd',
      },
    },
  })
})

Добавление вариантов

Изменение селекторов 

plugin(addVariant('pointer-group-hover', ({ modifySelectors }) => {
  return modifySelectors(({ className }) => {
    return `.no-touch .group:hover .${className}`
  })
}))

Добавление базовых стилей 

plugin(({ addBase, theme }) => {
  addBase({
    h1: { fontSize: theme('fontSize.2xl') },
    h2: { fontSize: theme('fontSize.xl') },
    h3: { fontSize: theme('fontSize.lg') },
  })
})

Прочие инструменты

CSS Escape

e()

Ручной префикс

prefix()

Получить пользовательские варианты

variants()

Получить тему пользователя

theme()

Получить конфигурацию пользователя

config()