@virage-ui/tailwind-config NPM

@virage-ui/tailwind-config

Конфигурация tailwindcss для VirageUI

базовый конфиг `@virage-ui/tailwind-config/base`

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

// tailwind.config.ts

import base from "@virage-ui/tailwind-config/base"

/** @type {import('tailwindcss').Config} */
export default {
   ...
   presets: [
       base
   ]
}

Список плагинов

внешние

tailwindcss-animated
@shrutibalasa/tailwind-grid-auto-fit
@yaredfall/tw-grid-auto-fill
@tailwindcss/container-queries
tailwind-scrollbar
внутренние
plugins/hover-and-focus-tweaks
plugins/hover-type
plugins/selectors
plugins/radius-themer
plugins/theming
Описание плагинов
plugins/selectors
несколько незамысловатых селекторов
direct-children:
not-last:
not-first:

`plugins/hover-type`

селекторы по медиа запросу поддержки тача и указателя

по умолчанию классы применяются для любого устройства

touch: - только для устройств без указателя
pointer: - только для устройств без тача

`plugins/hover-and-focus-tweaks`

селекторы для работы с hover и focus состояниями

hover: - оверрайд дефолтного hover, который не срабатывает на тач устройствах
vanilla-hover: - нативный hover, который срабатывает на тач устройствах
highlight: - объединение селекторов hover: и focus-visible:
focus-visible-within:* - смесь нативных селекторов focus-visible и focus-within
highlight-within:* - объединение селекторов hover: и focus-visible-within:
* - требует директиву v-focus-visible-within

`plugins/radius-themer`

простая темизация скругления элементов

базовая конфигурация:

   rounded-none: 0px
   rounded-sm: 2px
   rounded: 4px
   rounded-md: 6px
   rounded-lg: 8px
   rounded-xl: 12px
   rounded-2xl: 16px
   rounded-full: 9999px

кастомизация выполняется путем указания аттрибута на элементе radius="{multiply}", где вместо {multiply} может быть значение 1, 1.5 или 2. Радиус скругления элемента и всех его потомков будет увеличен в соответствующее количество раз относительно базовой конфигурации.