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

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

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

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

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

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

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

html

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

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

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

Префикс

Минимальная ширина (по умолчанию)

(нет)

все размеры

sm:

600px

md:

960px

lg:

1280px

xl:

1920px

xxl:

2560px

html

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

JIT-утилиты

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

html

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

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

Он также может генерировать проектные статические или параметризованные утилиты вроде flex-center и grid-cols-3 через defineRule.

Подключение

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

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

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

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

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

html

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

Варианты hover и focus

html

<button class="bg-[#42b883] hover:bg-[#33a06f] focus:px-[24px]">Кнопка</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 useBreakpoints в JS также использует те же значения. Подробнее — в разделе Брейкпоинты.