Preset Wind3

O preset compacto do Tailwind CSS / Windi CSS para UnoCSS.

Código Fonte

INFO

@unocss/preset-wind e @unocss/preset-uno estão depreciados e renomeados para @unocss/preset-wind3. Este preset herda de @unocss/preset-mini.

Instalação

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

Este preset está incluído no pacote unocss, você também pode importá-lo de lá:

import { presetWind3 } from 'unocss'

Regras

O objetivo principal deste preset é fornecer compatibilidade com Tailwind CSS e Windi CSS. Deve-se notar que a compatibilidade completa pode não ser garantida. Por favor, consulte a documentação deles para uso detalhado.

Para todas as regras e presets incluídos neste preset, consulte nossa documentação interativa ou vá diretamente ao código fonte.

Recursos

Modo escuro

Por padrão, este preset gera o modo escuro baseado em classes com a variante dark:.

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

irá gerar:

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

Modo escuro baseado em media query

Para usar o modo escuro baseado em media query globalmente, você pode alterar a configuração para a variante dark::

presetWind3({
  dark: 'media'
})

Agora

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

irá gerar:

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

Modo escuro baseado em media query opcional

Para usar o modo escuro baseado em media query opcional, você pode usar a variante @dark::

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

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

Diferenças do Tailwind CSS

Aspas

O uso de aspas no template (os arquivos destinados a serem processados) não é suportado devido ao funcionamento do extrator. Por exemplo, você não poderá escrever before:content-['']. Para esses casos, você pode preferir introduzir um novo utilitário que você pode definir explicitamente, como class="before:content-empty".

background-position com valores arbitrários

O Tailwind permite usar valores personalizados para background-position usando a sintaxe simples:

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

O preset Wind irá interpretar center_top_1rem como uma cor. Use um prefixo position: para conseguir o mesmo:

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

Animações

O Tailwind CSS tem menos animações internas, nós suportamos totalmente suas regras de animação e internamente integramos o Animate.css para fornecer mais efeitos de animação.

Você pode usar o prefixo animate- para guiar o IntelliSense a encontrar rapidamente a animação que você precisa.

TIP

Não mesclamos nomes de animação conflitantes do Tailwind e Animate.css. Se você precisar usar o nome da animação do Animate.css, use animate-<name>-alt.

Por exemplo

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

Se você quiser personalizar ou modificar o efeito de animação, fornecemos itens de configuração altamente personalizáveis. Você pode modificar a duração, atraso, curva de velocidade, etc. da animação através do item de configuração.

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

Visualize a animação personalizada:

animate-custom

TIP

Você também pode adicionar category para agrupar animações para melhor gerenciamento. Isso tornará mais fácil para ferramentas downstream consumirem efeitos de animação.

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

Diferenças do Windi CSS

Breakpoints

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

Espaços na sintaxe de colchetes

Este preset usa _ em vez de , para respeitar espaço na sintaxe de colchetes.

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

Como algumas regras CSS requerem , como parte do valor, ex. grid-cols-[repeat(3,auto)]

Recursos Experimentais

WARNING

Este preset inclui recursos experimentais que podem ser alterados de forma quebradora a qualquer momento.

Media Hover

Media hover aborda o problema de hover persistente onde tocar em um alvo que inclui estilo hover em dispositivos móveis manterá esse estilo hover até tocar em outro lugar.

Como o estilo regular :hover provavelmente é usado tão amplamente, a variante usa a sintaxe @hover para distingui-la do pseudo hover regular.

A variante @hover-text-red irá gerar:

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

Opções

INFO

As opções são herdadas de @unocss/preset-mini.

dark

• Tipo: 'class' | 'media'
• Padrão: 'class'

O modo escuro pode ser configurado para usar a classe .dark ou a media query prefers-color-scheme.

attributifyPseudo

• Tipo: boolean
• Padrão: false

Habilita o suporte para pseudo seletores no modo attributify.

variablePrefix

• Tipo: string
• Padrão: 'un-'

O prefixo para variáveis CSS.

preflight

• Tipo: boolean
• Padrão: true

Habilita a geração de CSS preflight.

prefix

• Tipo: string | string[]
• Padrão: undefined

O prefixo para todas as regras de utilitários.

important

• Tipo: boolean | string
• Padrão: false

Adiciona !important a todas as regras de utilitários.

separator

• Tipo: string
• Padrão: ':'

O separador para variantes.

safelist

• Tipo: string[]
• Padrão: []

Lista de classes que serão sempre incluídas no CSS final.

blocklist

• Tipo: string[]
• Padrão: []

Lista de classes que serão sempre excluídas do CSS final.

alias

• Tipo: Record<string, string>
• Padrão: {}

Aliases para regras de utilitários.

shortcuts

• Tipo: Record<string, string | string[]>
• Padrão: {}

Atalhos para combinações de regras de utilitários.

theme

• Tipo: Record<string, any>
• Padrão: {}

Configuração do tema.

rules

• Tipo: Rule[]
• Padrão: []

Regras personalizadas.

variants

• Tipo: Variant[]
• Padrão: []

Variantes personalizadas.

preprocessors

• Tipo: Preprocessor[]
• Padrão: []

Pré-processadores personalizados.

postprocessors

• Tipo: Postprocessor[]
• Padrão: []

Pós-processadores personalizados.

autocomplete

• Tipo: AutocompleteOptions
• Padrão: {}

Opções de autocompletar.

layers

• Tipo: Record<string, number>
• Padrão: {}

Camadas personalizadas.

sortLayers

• Tipo: boolean
• Padrão: false

Ordena as camadas por ordem.

minify

• Tipo: boolean
• Padrão: false

Minifica o CSS gerado.

devtools

• Tipo: boolean
• Padrão: false

Habilita as ferramentas de desenvolvimento.

presets

• Tipo: Preset[]
• Padrão: []

Presets adicionais.

transformers

• Tipo: Transformer[]
• Padrão: []

Transformadores personalizados.

extractors

• Tipo: Extractor[]
• Padrão: []

Extratores personalizados.

configDeps

• Tipo: string[]
• Padrão: []

Dependências de configuração.

configFile

• Tipo: string
• Padrão: undefined

Arquivo de configuração.

configRoot

• Tipo: string
• Padrão: undefined

Diretório raiz da configuração.

configResolve

• Tipo: boolean
• Padrão: true

Resolve a configuração.

configWatch

• Tipo: boolean
• Padrão: true

Observa a configuração.

configWatchOptions

• Tipo: WatchOptions
• Padrão: {}

Opções de observação da configuração.

configResolveOptions

• Tipo: ResolveOptions
• Padrão: {}

Opções de resolução da configuração.

configResolveDirs

• Tipo: string[]
• Padrão: []

Diretórios de resolução da configuração.

configResolveExtensions

• Tipo: string[]
• Padrão: []

Extensões de resolução da configuração.

configResolveMainFields

• Tipo: string[]
• Padrão: []

Campos principais de resolução da configuração.

configResolveAlias

• Tipo: Record<string, string>
• Padrão: {}

Aliases de resolução da configuração.

configResolveDedupe

• Tipo: boolean
• Padrão: true

Deduplica a resolução da configuração.

configResolvePreserveSymlinks

• Tipo: boolean
• Padrão: false

Preserva links simbólicos na resolução da configuração.

configResolvePackageFilter

• Tipo: (pkg: any) => boolean
• Padrão: undefined

Filtro de pacotes na resolução da configuração.

configResolvePathFilter

• Tipo: (path: string) => boolean
• Padrão: undefined

Filtro de caminhos na resolução da configuração.

configResolveFileFilter

• Tipo: (file: string) => boolean
• Padrão: undefined

Filtro de arquivos na resolução da configuração.

configResolveDirFilter

• Tipo: (dir: string) => boolean
• Padrão: undefined

Filtro de diretórios na resolução da configuração.

configResolveModuleFilter

• Tipo: (module: any) => boolean
• Padrão: undefined

Filtro de módulos na resolução da configuração.

configResolvePackageFilter

• Tipo: (pkg: any) => boolean
• Padrão: undefined

Filtro de pacotes na resolução da configuração.

configResolvePathFilter

• Tipo: (path: string) => boolean
• Padrão: undefined

Filtro de caminhos na resolução da configuração.

configResolveFileFilter

• Tipo: (file: string) => boolean
• Padrão: undefined

Filtro de arquivos na resolução da configuração.

configResolveDirFilter

• Tipo: (dir: string) => boolean
• Padrão: undefined

Filtro de diretórios na resolução da configuração.

configResolveModuleFilter

• Tipo: (module: any) => boolean
• Padrão: undefined

Filtro de módulos na resolução da configuração.