Theme

Дизайн-слой prosto без привязки к фреймворку: токены Tailwind CSS v4 и рецепты классов.

Ни Vue, ни DOM — только строки классов и CSS-переменные. Пакет можно взять в React, в Svelte или в обычной вёрстке.

Установка

npm i @prleasing/theme

yarn add @prleasing/theme

pnpm install @prleasing/theme

Токены

@import '@prleasing/theme/style';
@import 'tailwindcss';

Внутри — reset.css, набор @theme static с переменными и @utility для типографики. После этого доступны классы вида p-2xl, rounded-lg, text-primary-text, body-md.

Группы переменных: --spacing-*, --radius-*, --text-*, --color-*, --font-weight-*, --leading-*, --tracking-*, --breakpoint-*.

Брейкпоинтов пять: lg и tablet (790px), xl (1024px), 2xl (1430px), 3xl (1920px). Тема объявляет --breakpoint-*: initial, поэтому дефолтных sm: и md: из Tailwind не существует — классы с ними остаются валидными строками и просто никогда не применяются.

Рецепты

Рецепт — это функция, которая по пропсам отдаёт строку классов для каждой части компонента.

import { button } from '@prleasing/theme';

const ui = button({ appearance: 'primary', size: 'md' });

ui.root(); // 'gap-lg rounded-lg bg-brand-primary …'
ui.icon();
ui.text();

Каждый рецепт лежит отдельным модулем, поэтому можно импортировать только нужное:

import { button } from '@prleasing/theme/button';

Построено на tailwind-variants: slots — части компонента, variants — визуальный API.

Важно: content.files

Классы существуют только внутри рецептов, поэтому Tailwind должен видеть этот пакет при сканировании. Иначе половина стилей просто не сгенерируется — без единой ошибки в сборке.

export default {
	content: {
		files: ['./src/**/*.{vue,ts}', './node_modules/@prleasing/theme/**/*.mjs']
	}
};

В Nuxt это делает @prleasing/nuxt-module — руками ничего добавлять не нужно.

Версия tailwind-variants

Зависимость закреплена на ~3.2.2 намеренно. В 3.3.0 сломана изоляция рецептов: слот-функции возвращали классы последнего вызова, а не собственных пропсов, из-за чего соседние экземпляры компонентов перетирали стили друг другу. Проверяется тестом test/recipes.test.ts.