Wind3 preset

UnoCSS용 Tailwind CSS / Windi CSS 컴팩트 preset.

소스 코드

INFO

@unocss/preset-wind와 @unocss/preset-uno는 더 이상 사용되지 않으며 @unocss/preset-wind3로 이름이 변경되었습니다. 이 preset은 @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

이 preset은 unocss 패키지에 포함되어 있으며, 거기서도 가져올 수 있습니다:

import { presetWind3 } from 'unocss'

규칙

이 preset의 주요 목표는 Tailwind CSS와 Windi CSS와의 호환성을 제공하는 것입니다. 완전한 호환성이 보장되지 않을 수 있음을 유의해야 합니다. 자세한 사용법은 해당 문서를 참조하세요.

이 preset에 포함된 모든 규칙과 preset에 대해서는 대화형 문서를 참조하거나 직접 소스 코드로 이동하세요.

기능

다크 모드

기본적으로 이 preset은 dark: variant로 클래스 기반 다크 모드를 생성합니다.

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

다음이 생성됩니다:

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

미디어 쿼리 기반 다크 모드

대신 전역적으로 미디어 쿼리 기반 다크 모드를 사용하려면 dark: variant의 설정을 변경할 수 있습니다:

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: variant를 사용할 수 있습니다:

<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"와 같이 명시적으로 설정할 수 있는 새로운 유틸리티를 도입하는 것을 선호할 수 있습니다.

임의 값이 있는 background-position

Tailwind는 허용합니다. bare 구문을 사용하여 background-position에 사용자 정의 값을 사용할 수 있습니다:

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

Wind preset은 대신 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-<name>-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',
      },
      category: {
        custom: 'Zooming',
      },
    }
  }
})

사용자 정의 애니메이션 미리보기:

animate-custom

TIP

더 나은 관리를 위해 애니메이션을 그룹화하기 위해 category를 추가할 수도 있습니다. 이렇게 하면 다운스트림 도구가 애니메이션 효과를 소비하기가 더 쉬워집니다.

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',
      },
      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

브래킷 구문 공백

이 preset은 브래킷 구문에서 공백을 존중하기 위해 , 대신 _를 사용합니다.

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

일부 CSS 규칙이 값의 일부로 ,를 요구하기 때문입니다. 예: grid-cols-[repeat(3,auto)]

실험적 기능

WARNING

이 preset은 언제든지 breaking 방식으로 변경될 수 있는 실험적 기능을 포함합니다.

미디어 호버

미디어 호버는 모바일에서 호버 스타일을 포함하는 타겟을 탭하면 다른 곳을 탭할 때까지 해당 호버 스타일이 지속되는 sticky hover 문제를 해결합니다.

일반적인 :hover 스타일이 아마도 매우 널리 사용되기 때문에, variant는 일반적인 hover 의사와 구분하기 위해 @hover 구문을 사용합니다.

variant @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

이 preset 옵션은 @unocss/preset-mini에서 상속됩니다.

important

• 타입: boolean | string
• 기본값: false

important 옵션을 사용하면 UnoCSS의 유틸리티에 !important를 표시할지 제어할 수 있습니다. 높은 특이성을 가진 선택자가 있는 기존 CSS와 함께 UnoCSS를 사용할 때 정말 유용할 수 있습니다.

WARNING

이 옵션을 사용하면 UnoCSS에서 생성된 모든 유틸리티에 important가 적용됩니다. 특정 유틸리티에만 적용하려면 대신 important: variant를 사용할 수 있습니다.

그러나 important를 true로 설정하면 요소에 인라인 스타일을 추가하는 서드파티 JS 라이브러리를 통합할 때 일부 문제가 발생할 수 있습니다. 이러한 경우 UnoCSS의 !important 유틸리티가 인라인 스타일을 무시하여 의도한 디자인이 깨질 수 있습니다.

이를 해결하기 위해 important를 #app과 같은 ID 선택자로 설정할 수 있습니다:

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));
}