Функции #

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

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

Используйте произвольные значения в своих классах и генерируйте соответствующие стили.

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

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

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

Вариантные группы #

Примените утилиты для одного и того же варианта, сгруппировав их в скобках.

<div class="bg-white dark:hover:(bg-gray-800 font-medium text-white)"/>

<div class="bg-white dark:hover:bg-gray-800 dark:hover:font-medium dark:hover:text-white"/>

Адаптивный дизайн #

Расширенные отзывчивые контрольные точки.

<div class="p-1 md:p-2 <lg:p-3"></div>

Важный префикс #

Добавляйте к любым классам-утилитам префикс !, чтобы сделать их как !important.

<div class="text-red-400 !text-green-300">Зеленый</div>

Ярлыки #

Создавайте компоненты и утилиты быстро и повторно.

export default {
  theme: {
    /* ... */
  },
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
}

<div class="btn hover:btn-green"></div>

Темный режим #

<div class="text-black dark:text-white"></div>

RTL #

<div class="text-green-400 rtl:(text-red-400 text-right)"></div>

Директивы #

Полностью поддерживаются директивы @apply, @screen подобные Tailwind.

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
  padding-top: 1rem;
}

Визуальный анализатор #

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