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

Поскольку 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;

p-2.5

p-3.2

{}

.p-2\.5 {
  padding: 0.625rem;
}
.p-3\.2 {
  padding: 0.8rem;
}

Размеры #

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

xxxxxxxxxx

p-3px

p-4rem

{}

.p-3px {
  padding: 3px;
}
.p-4rem {
  padding: 4rem;
}

Фракции #

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

xxxxxxxxxx

w-9/12

{}

.w-9\/12 {
  width: 75%;
}

Цвета #

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

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

xxxxxxxxxx

text-cyan-400

border-hex-6dd1c7

{}

.border-hex-6dd1c7 {
  --tw-border-opacity: 1;
  border-color: rgba(109, 209, 199, var(--tw-border-opacity));
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgba(34, 211, 238, var(--tw-text-opacity));
}

Переменные #

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

bg-${variableName}

xxxxxxxxxx

bg-$test-variable

{}

.bg-\$test-variable {
  background-color: var(--test-variable);
}

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

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

xxxxxxxxxx

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

{}

.grid-cols-\[auto\2c 1fr\2c 30px\] {
  grid-template-columns: auto 1fr 30px;
}