Утилитарные классы

Vueland UI предоставляет два взаимодополняющих слоя CSS-утилит:

• Предопределённые утилиты — готовый набор классов для отступов, цветов, типографики, лэйаута и т.д. Компилируются из SCSS и поставляются вместе с библиотекой.
• JIT-утилиты — классы с произвольными значениями, генерируемые на лету Vite-плагином @vueland/utils-jit на основе классов, фактически используемых в исходниках.

Оба слоя поддерживают адаптивные варианты и используют одну конфигурацию брейкпоинтов при наличии @vueland/utils-jit.

Те же брейкпоинты используют и компоненты сетки — CRow, CCol, CSpacer — поэтому ширина колонок и выравнивание реагируют на те же значения, что и утилитарные классы.

Предопределённые утилиты

Просто добавьте нужный класс к любому HTML-элементу или компоненту:

<div class="pa-4 text-center bg-blue text-white">
  Привет, мир!
</div>

Адаптивные варианты

Большинство утилит поддерживают адаптивные префиксы, применяющие стили начиная с указанного брейкпоинта (mobile-first):

Префикс	Минимальная ширина (по умолчанию)
(нет)	все размеры
sm:	600px
md:	960px
lg:	1280px
xl:	1920px
xxl:	2560px

<div class="pa-2 md:pa-6 lg:pa-10">
  Адаптивные отступы
</div>

JIT-утилиты (произвольные значения)

Vite-плагин @vueland/utils-jit расширяет утилитарный слой произвольными значениями в квадратных скобках:

<div class="w-[320px] h-[200px] bg-[#42b883] z-[100]">
  Произвольные значения
</div>

JIT-классы генерируются на лету — в CSS-бандл попадают только те классы, которые реально используются в исходниках.

Подключение

// vite.config.ts
import { utilsJIT } from '@vueland/utils-jit'

export default defineConfig({
  plugins: [utilsJIT()],
})

// Подключите сгенерированный файл в точке входа
import 'src/.generated/utils-jit.css'

Адаптивные JIT-классы

JIT-классы поддерживают те же адаптивные префиксы, что и предопределённые утилиты:

<div class="w-[100%] md:w-[720px] lg:w-[960px]">
  Адаптивная ширина
</div>

Варианты hover и focus

<button class="bg-[#42b883] hover:bg-[#33a06f] focus:outline-[2px]">
  Кнопка
</button>

Синхронизация брейкпоинтов между слоями

При настройке breakpoints в utilsJIT() они автоматически применяются к обоим слоям — предопределённым SCSS-утилитам и JIT-классам — без дополнительной конфигурации:

// vite.config.ts
utilsJIT({
  breakpoints: {
    xs: 0,
    sm: 600,
    md: 960,
    lg: 1280,
    xl: 1920,
    xxl: 2560,
  },
})

После этого sm:d-flex (предопределённый) и sm:w-[960px] (JIT) оба активируются ровно при 600px. Реактивный composable useDisplay в JS также использует те же значения. Подробнее — в разделе Брейкпоинты.

Разделы

Раздел	Описание
Цвета	Фон, цвет текста, hover/active-состояния
Отступы	margin, padding, gap
Типографика	Размер шрифта, насыщенность, межстрочный интервал
Текст	Выравнивание, трансформация, перенос
Flex	Flexbox-утилиты
Отображение	Значения display
Размеры	width, height, min/max
Позиционирование	position, inset, z-index
Границы	border-width, style, color
Скругление	border-radius
Тени	box-shadow (Material Design)
Прозрачность	opacity
Переполнение	overflow
Хелперы	visibility, pointer-events, object-fit и другие
Курсор	cursor