Пресет Wind3

Компактный пресет Tailwind CSS / Windi CSS для UnoCSS.

Исходный код

INFO

@unocss/preset-wind и @unocss/preset-uno устарели и переименованы в @unocss/preset-wind3. Этот пресет наследуется от @unocss/preset-mini.

Установка

pnpm

pnpm add -D @unocss/preset-wind3

yarn

yarn add -D @unocss/preset-wind3

npm

npm install -D @unocss/preset-wind3

bun

bun add -D @unocss/preset-wind3

import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
  ],
})

TIP

Этот пресет включен в пакет unocss, вы также можете импортировать его оттуда:

import { presetWind3 } from 'unocss'

Правила

Основная цель этого пресета - обеспечить совместимость с Tailwind CSS и Windi CSS. Следует отметить, что полная совместимость не гарантирована. Пожалуйста, обратитесь к их документации для подробного использования.

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

Функции

Темный режим

По умолчанию этот пресет генерирует темный режим на основе классов с вариантом dark:.

<div class="dark:bg-red:10" />

сгенерирует:

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

Темный режим на основе медиа-запросов

Чтобы использовать темный режим на основе медиа-запросов глобально, вы можете изменить конфигурацию для варианта dark::

presetWind3({
  dark: 'media'
})

Теперь

<div class="dark:bg-red:10" />

сгенерирует:

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

Темный режим с согласием пользователя

Чтобы использовать темный режим с согласием пользователя на основе медиа-запросов, вы можете использовать вариант @dark::

<div class="@dark:bg-red:10" />

@media (prefers-color-scheme: dark) {
  .\@dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

Различия с Tailwind CSS

Кавычки

Использование кавычек в шаблоне (файлах, предназначенных для обработки) не поддерживается из-за особенностей работы экстрактора. Например, вы не сможете написать before:content-['']. Для таких случаев вы можете предпочесть создать новую утилиту, которую можно явно установить, например, class="before:content-empty".

Положение фона с произвольными значениями

Tailwind позволяет использовать пользовательские значения для background-position, используя простой синтаксис:

<div class="bg-[center_top_1rem]"></div>

Пресет Wind будет интерпретировать center_top_1rem как цвет. Используйте префикс position:, чтобы достичь того же результата:

<div class="bg-[position:center_top_1rem]"></div>

Анимации

Tailwind CSS имеет меньше встроенных анимаций, мы полностью поддерживаем его правила анимации и внутренне интегрируем Animate.css, чтобы предоставить больше эффектов анимации.

Вы можете использовать префикс animate-, чтобы быстро найти нужную анимацию с помощью IntelliSense.

TIP

Мы не объединяем конфликтующие имена анимаций из Tailwind и Animate.css. Если вам нужно использовать имя анимации из Animate.css, пожалуйста, используйте animate-<n>-alt.

Например

Tailwind CSS	Animate.css
animate-bounce	animate-bounce-alt

Если вы хотите настроить или изменить эффект анимации, мы предоставляем высоко настраиваемые элементы конфигурации. Вы можете изменить длительность, задержку, кривую скорости и другие параметры анимации через элемент конфигурации.

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      durations: {
        custom: '1s',
      },
      timingFns: {
        custom: 'cubic-bezier(0.4,0,.6,1)',
      },
      properties: {
        custom: { 'transform-origin': 'center' },
      },
      counts: {
        custom: 'infinite',
      },
    }
  }
})

Предварительный просмотр пользовательской анимации:

animate-custom

TIP

Вы также можете добавить category, чтобы группировать анимации для лучшего управления. Это облегчит использование эффектов анимации для нижестоящих инструментов.

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      // ...
      category: {
        custom: 'Zooming',
      },
    }
  }
})

Различия с Windi CSS

Точки останова

Windi CSS	UnoCSS
<sm:p-1	lt-sm:p-1
@lg:p-1	at-lg:p-1
>xl:p-1	xl:p-1

Синтаксис скобок с пробелами

Этот пресет использует _ вместо , для обозначения пробела в синтаксисе скобок.

Windi CSS	UnoCSS
grid-cols-[1fr,10px,max-content]	grid-cols-[1fr_10px_max-content]

Поскольку некоторые правила CSS требуют , как части значения, например, grid-cols-[repeat(3,auto)]

Экспериментальные функции

WARNING

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

Медиа-наведение

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

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

Вариант @hover-text-red выведет:

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover {
    --un-text-opacity: 1;
    color: rgb(248 113 113 / var(--un-text-opacity));
  }
}

Опции

INFO

Эти опции наследуются от @unocss/preset-mini.

important

• Тип: boolean | string
• По умолчанию: false

Опция important позволяет контролировать, должны ли утилиты UnoCSS быть отмечены как !important. Это может быть очень полезно при использовании UnoCSS с существующим CSS, которое имеет высокоспецифичные селекторы.

WARNING

Использование этой опции приведет к применению важного к всем утилитам, генерируемым UnoCSS. Вы можете использовать вариант important: вместо этого, если вы хотите применить его только к конкретным утилитам.

Однако, установка important в true может вызвать некоторые проблемы при интеграции с третьими библиотеками JS, которые добавляют встроенные стили к вашим элементам. В таких случаях, вы можете установить важное значение на селектор ID, например, #app:

import presetWind3 from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3({
      important: '#app',
    }),
  ],
})

Эта конфигурация добавит заданный селектор к началу всех ваших утилит, эффективно увеличивая их специфичность без фактического делая их !important.

Утилита dark:bg-blue выведет:

#app :is(.dark .dark\:bg-blue) {
  --un-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--un-bg-opacity));
}