Preset Wind4

O preset compacto do Tailwind4 CSS para UnoCSS. É compatível com todos os recursos do PresetWind3 e os aprimora ainda mais.

Código Fonte

TIP

Você pode gastar um pouco de tempo lendo este documento para entender as mudanças

Instalação

pnpm

pnpm add -D @unocss/preset-wind4

yarn

yarn add -D @unocss/preset-wind4

npm

npm install -D @unocss/preset-wind4

bun

bun add -D @unocss/preset-wind4

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

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

Compatibilidade

Consulte a Compatibilidade do Tailwind para aprender sobre suporte e compatibilidade do navegador.

Tema

O tema do PresetWind4 é quase idêntico ao tema do PresetWind3, mas algumas chaves de tema foram ajustadas.

WARNING

Observe ao mudar para o PresetWind4, consulte a tabela abaixo para verificar sua configuração de chave de tema e fazer os ajustes apropriados.

PresetWind3	PresetWind4
fontFamily	font
fontSize	Movido para a propriedade fontSize em text
lineHeight	Movido para a propriedade lineHeight em text ou use leading
letterSpacing	Movido para a propriedade letterSpacing em text ou use tracking
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
Propriedades de tamanho como width, height, maxWidth, maxHeight, minWidth, minHeight	Unificado para usar spacing
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults é uma configuração de tema padrão global que será aplicada aos estilos de reset ou usada como valores padrão para certas regras.

Abaixo estão os valores padrão para Theme.defaults, que você pode sobrescrever em sua configuração de tema.

Clique para ver os valores padrão

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

Opções

A configuração básica do PresetWind4 é semelhante ao PresetWind3, com as seguintes mudanças importantes.

Estilos de Reset

No PresetWind4, alinhamos os estilos de reset com o tailwind4 e os integramos internamente. Você não precisa instalar nenhum pacote CSS reset adicional como @unocss/reset ou normalize.css.

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

Você só precisa controlar se deseja habilitar os estilos de reset através de um switch:

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

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

Resolvedor de Utilitários

No PresetWind4, atualizamos o hook postProcess para fornecer uma API mais concisa. Agora você pode personalizar diretamente utilities no preset.

Por exemplo, se você quiser usar o preset presetRemToPx para converter rem para px, não precisa mais importar este preset separadamente, pois o presetWind4 fornece essa funcionalidade internamente.

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

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

Você pode personalizar mais conjuntos de resolvedores para processar utilities e gerar o CSS que deseja.

Para métodos de implementação específicos, consulte postProcess ou o caso de teste do presetWind4

Pré-voo do Tema

Escolha como gerar variáveis CSS do tema.

O motor UnoCSS com presetWind4 instalado coletará automaticamente as dependências do tema ao analisar utilitários e gerará variáveis CSS no final.

• true: Gera chaves de tema completamente.
• false: Desativa chaves de tema. (Não recomendado ⚠️)
• 'on-demand': Gera chaves de tema apenas quando usadas. -> ✅ (Por padrão)

CSS Gerado

Na saída do PresetWind4, duas novas camadas foram adicionadas: theme e cssvar-property.

Nome da Camada	Descrição	ordem
cssvar-property	Propriedades CSS definidas por @property	-200
theme	Variáveis CSS relacionadas ao tema	-150

Camada cssvar-property

Usamos @property para definir propriedades CSS em muitas regras para obter melhor desempenho e tamanho menor.

Por exemplo, utilitários comumente usados como text-op-xx, bg-op-xx, e assim por diante.

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

Camada theme

Colocamos variáveis CSS relacionadas ao tema na camada theme para facilitar a sobrescrita e uso direto. Pode ser abrangente ou sob demanda. Sempre vem da sua configuração de tema.

: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;
  /* ... */
}

Compatibilidade com Outros Presets

PresetWind4 aprimora e é compatível com PresetWind3. Como outros pacotes foram originalmente desenvolvidos para PresetWind3, alguns problemas podem surgir ao usá-los juntos. Problemas conhecidos incluem:

presetWebFonts

Ao usar presetWebFonts com PresetWind4, a chave de tema fontFamily não é mais suportada. Por favor, faça o seguinte ajuste:

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

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

presetLegacyCompat

No presetWind4, usamos o modelo de cor oklch para suportar melhor contraste de cor e percepção de cor. Portanto, não é compatível com presetLegacyCompat e não é recomendado usar junto.

Por favor, consulte a seção Compatibilidade para mais informações.

transformDirectives

transformDirectives não funciona bem com PresetWind4. Existem alguns problemas conhecidos, então use com cautela.

WARNING

• Quando usando @apply para processar regras que têm @property, podem ocorrer conflitos entre diferentes níveis de camada.