Автоматический вывод значения #

Поскольку Windi CSS будет генерировать только те утилиты CSS, которые вы используете, он дает возможность использовать произвольное значение в ваших классах и генерировать соответствующие стили на основе соответствующей семантики.

<!-- размеры и позиции -->
<div class="p-5px mt-[0.3px]"></div>

<!-- цвета -->
<button class="bg-hex-b2a8bb"></button>
<button class="bg-[#b2a8bb]"></button>
<button class="bg-[hsl(211.7,81.9%,69.6%)]"></button>

<!-- сетка шаблона -->
<div class="grid-cols-[auto,1fr,30px]"></div>

Это полезно, когда вы хотите отказаться от своей дизайн-системы и получить детальный контроль над некоторыми конкретными компонентами. Поддерживаются как прямой p-5px, так и явное экранирование p-[5px].

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

Числа #

p-{float} -> padding: {float/4}rem;

Размеры #

// {size} should be end with rem|em|px|vh|vw|ch|ex
p-{size} -> padding: {size};

Фракции #

w-{fraction} -> width: {fraction -> precent};

Цвета #

text-{color} -> color: rgba(...);

border-hex-{hex} -> border-color: rgba(...);

Переменные #

Вы даже можете передавать имена переменных, что очень полезно в сочетании с переменными css.

bg-${variableName}

Шаблоны сетки #

grid-cols-[auto,1fr,30px]