Wind4 preset

UnoCSS용 Tailwind4 CSS 컴팩트 preset. PresetWind3의 모든 기능과 호환되며 더욱 향상되었습니다.

TIP

변경사항을 이해하기 위해 이 문서를 잠시 읽어보세요

설치

pnpmyarnnpmbun

bash

pnpm add -D @unocss/preset-wind4

bash

yarn add -D @unocss/preset-wind4

bash

npm install -D @unocss/preset-wind4

bash

bun add -D @unocss/preset-wind4

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    //  ^?
  ],
})

호환성

브라우저 지원 및 호환성에 대해 알아보려면 Tailwind 호환성을 참조하세요.

테마

PresetWind4의 테마는 PresetWind3의 테마와 거의 동일하지만, 일부 테마 키가 조정되었습니다.

WARNING

PresetWind4로 전환할 때는 아래 표를 참조하여 테마 키 설정을 확인하고 적절한 조정을 하세요.

PresetWind3	PresetWind4
`fontFamily`	`font`
`fontSize`	`text`의 `fontSize` 속성으로 이동
`lineHeight`	`text`의 `lineHeight` 속성으로 이동하거나 `leading` 사용
`letterSpacing`	`text`의 `letterSpacing` 속성으로 이동하거나 `tracking` 사용
`borderRadius`	`radius`
`easing`	`ease`
`breakpoints`	`breakpoint`
`verticalBreakpoints`	`verticalBreakpoint`
`boxShadow`	`shadow`
-	`insetShadow`
`width`, `height`, `maxWidth`, `maxHeight`, `minWidth`, `minHeight`와 같은 크기 속성	`spacing` 사용으로 통합
`transitionProperty`	`property`
`gridAutoColumn`, `gridAutoRow`, `gridColumn`, `gridRow`, `gridTemplateColumn`, `gridTemplateRow`	-
`container.maxWidth`	`containers.maxWidth`
-	`defaults`

`Theme.defaults`

Theme.defaults는 reset 스타일에 적용되거나 특정 규칙의 기본값으로 사용되는 전역 기본 테마 설정입니다.

아래는 Theme.defaults의 기본값으로, 테마 설정에서 재정의할 수 있습니다.

기본값을 보려면 클릭하세요

import type { Theme } from '@unocss/preset-wind4/theme'

export const defaults: Theme['defaults'] = {
  transition: {
    duration: '150ms',
    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
  font: {
    family: 'var(--font-sans)',
    featureSettings: 'var(--font-sans--font-feature-settings)',
    variationSettings: 'var(--font-sans--font-variation-settings)',
  },
  monoFont: {
    family: 'var(--font-mono)',
    featureSettings: 'var(--font-mono--font-feature-settings)',
    variationSettings: 'var(--font-mono--font-variation-settings)',
  },
}

옵션

PresetWind4의 기본 설정은 PresetWind3과 유사하지만, 다음과 같은 중요한 변경사항이 있습니다.

리셋 스타일

PresetWind4에서는 리셋 스타일을 tailwind4와 일치시키고 내부적으로 통합했습니다. @unocss/reset 또는 normalize.css와 같은 추가 CSS 리셋 패키지를 설치할 필요가 없습니다.

import '@unocss/reset/tailwind.css'
import '@unocss/reset/tailwind-compact.css'

스위치를 통해 리셋 스타일을 활성화할지 제어하기만 하면 됩니다:

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      reset: true, 
      // ^?
    }),
  ],
})

유틸리티 리졸버

PresetWind4에서는 더 간결한 API를 제공하기 위해 postProcess 훅을 업그레이드했습니다. 이제 preset에서 utilities를 직접 사용자 정의할 수 있습니다.

예를 들어, presetRemToPx preset을 사용하여 rem을 px로 변환하려면 더 이상 이 preset을 별도로 가져올 필요가 없습니다. presetWind4가 내부적으로 이 기능을 제공하기 때문입니다.

import { createRemToPxResolver } from '@unocss/preset-wind4/utils'
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      utilityResolver: createRemToPxResolver() 
    }),
  ],
})

더 많은 리졸버 세트를 사용자 정의하여 utilities를 처리하고 원하는 CSS를 출력할 수 있습니다.

구체적인 구현 방법은 postProcess 또는 presetWind4 테스트 케이스를 참조하세요

테마 Preflight

테마 CSS 변수를 생성하는 방법을 선택하세요.

presetWind4가 설치된 UnoCSS 엔진은 유틸리티를 파싱할 때 테마에 대한 의존성을 자동으로 수집하고 마지막에 CSS 변수를 생성합니다.

true: 테마 키를 완전히 생성.
false: 테마 키 비활성화. (권장하지 않음 ⚠️)
'on-demand': 사용될 때만 테마 키 생성. -> ✅ (기본값)

생성된 CSS

PresetWind4의 출력에서 두 개의 새로운 레이어가 추가되었습니다: theme와 cssvar-property.

레이어 이름	설명	순서
`cssvar-property`	`@property`로 정의된 CSS 속성	-200
`theme`	테마 관련 CSS 변수	-150

`cssvar-property` 레이어

더 나은 성능과 더 작은 크기를 달성하기 위해 많은 규칙에서 @property를 사용하여 CSS 속성을 정의했습니다.

예를 들어, text-op-xx, bg-op-xx 등과 같은 일반적으로 사용되는 유틸리티.

css

@property --un-text-opacity {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

`theme` 레이어

테마 관련 CSS 변수를 theme 레이어에 배치하여 재정의하고 직접 사용하기 쉽게 만들었습니다. 포괄적이거나 필요에 따라 생성될 수 있습니다. 항상 테마 설정에서 가져옵니다.

css

:root,
:host {
  --spacing: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}

다른 Preset과의 호환성

PresetWind4는 PresetWind3를 향상시키고 호환됩니다. 다른 패키지들이 원래 PresetWind3용으로 개발되었기 때문에 함께 사용할 때 일부 문제가 발생할 수 있습니다. 알려진 문제는 다음과 같습니다:

presetWebFonts

PresetWind4와 함께 presetWebFonts를 사용할 때 fontFamily 테마 키는 더 이상 지원되지 않습니다. 다음과 같이 조정하세요:

import { defineConfig, presetWebFonts, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    presetWebFonts({
      themeKey: 'font', 
      // ^?
    }),
  ],
})

presetLegacyCompat

presetWind4에서는 더 나은 색상 대비와 색상 인식을 지원하기 위해 oklch 색상 모델을 사용합니다. 따라서 presetLegacyCompat과 호환되지 않으며 함께 사용하는 것을 권장하지 않습니다.

자세한 내용은 호환성 섹션을 참조하세요.

transformDirectives

transformDirectives는 PresetWind4와 잘 작동하지 않습니다. 알려진 문제가 있으므로 주의해서 사용하세요.

WARNING

@property가 있는 규칙을 처리하기 위해 @apply를 사용할 때, 다른 레이어 레벨 간에 충돌이 발생할 수 있습니다.

Wind4 preset ​

설치 ​

호환성 ​

테마 ​

Theme.defaults ​

옵션 ​

리셋 스타일 ​

유틸리티 리졸버 ​

테마 Preflight ​

생성된 CSS ​

cssvar-property 레이어 ​

theme 레이어 ​

다른 Preset과의 호환성 ​

presetWebFonts ​

presetLegacyCompat ​

transformDirectives ​

Wind4 preset

설치

호환성

테마

`Theme.defaults`

옵션

리셋 스타일

유틸리티 리졸버

테마 Preflight

생성된 CSS

`cssvar-property` 레이어

`theme` 레이어

다른 Preset과의 호환성

presetWebFonts

presetLegacyCompat

transformDirectives