Logo Windi CSS

Начиная

Windi CSS - это CSS-фреймворк нового поколения, ориентированный на утилиты.

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

Почему именно Windi CSS?

Цитата автора должна проиллюстрировать его мотивацию к созданию Windi CSS:

Когда мой проект стал больше и в нем было около десятков компонентов, начальное время компиляции достигло 3с, а горячие обновления заняли более 1с с Tailwind CSS.
- @voorjaar

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

Основное использование

Все утилиты из Tailwind CSS поддерживаются в Windi CSS без какой-либо дополнительной настройки.

Вы можете использовать служебные классы в своих компонентах и таблицах стилей как обычно:

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">
  <img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">Эрин Линдфорд</p>
      <p class="text-gray-500 font-medium">Инженер по продукту</p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)">
      Сообщение
    </button>
  </div>
</div>

Только используемые вами утилиты будут генерировать соответствующий CSS.

Интеграции

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

Функции

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