Ярлыки

Это обычное дело, когда вы работаете с одним и тем же набором утилит несколько раз. Мы предоставили эту функцию «ярлыков», позволяющую вам давать комбинации имен утилит, которые вы можете использовать везде внутри вашего приложения без необходимости дублировать себя.

Просто добавив поле shortcuts в ваши конфигурации:

windi.config.js

export default {
  theme: {
    /* ... */
  },
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
}

Конфиг

CSS

Синтаксис CSS-in-JS также поддерживается для сложных утилит.

windi.config.js

export default {
  theme: {
    /* ... */
  },
  shortcuts: {
    'btn': {
      'color': 'white',
      '@apply': 'py-2 px-4 font-semibold rounded-lg',
      '&:hover': {
        '@apply': 'bg-green-700',
        'color': 'black',
      },
    },
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
}

Конфиг

CSS

Утилита, добавленная этой конфигурацией, также может быть напрямую связана с вариантом, например sm: btn. Функция этой функции аналогична директиве @apply, она объединяет все утилиты в один стиль.

Ярлыки #

Ярлыки