Layers

CSS sırası, önceliklerini etkileyecektir. Motor kuralların sırasını korurken, bazen bazı yardımcı programları sıralarını açıkça kontrol etmek için gruplamak isteyebilirsiniz.

Usage

Tailwind CSS'in üç sabit katman (base, components, utilities) sunduğunun aksine, UnoCSS katmanları istediğiniz gibi tanımlamanıza olanak tanır. Katmanı ayarlamak için, kurallarınızın üçüncü öğesi olarak metadata geçebilirsiniz:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // katmanı atlarsanız, varsayılan `default` olacaktır
  ['btn', { padding: '4px' }],
]

Bu şunu oluşturacaktır:

/* layer: default */
.btn { padding: 4px; }
/* layer: utilities */
.m-2 { margin: 0.5rem; }

Katman ayrıca her preflight üzerinde ayarlanabilir:

preflights: [
  {
    layer: 'my-layer',
    getCSS: async () => (await fetch('my-style.css')).text(),
  },
]

Ordering

Katmanların sırasını şu şekilde kontrol edebilirsiniz:

layers: {
  'components': -1,
  'default': 1,
  'utilities': 2,
  'my-layer': 3,
}

Belirtilen sıraya sahip olmayan katmanlar alfabetik olarak sıralanacaktır.

Özel CSS'nizin katmanlar arasında olmasını istediğinizde, giriş modülünüzü güncelleyebilirsiniz:

// 'uno:[layer-name].css'
import 'uno:components.css'

// 'components' ve 'utilities' olmayan katmanlar buraya geri dönecektir
import 'uno.css'

// kendi CSS'iniz
import './my-custom.css'

// "utilities" katmanı en yüksek önceliğe sahip olacaktır
import 'uno:utilities.css'

CSS Cascade Layers

CSS Cascade Layers'ı şu şekilde çıkarabilirsiniz:

outputToCssLayers: true

CSS Layer adlarını şu şekilde değiştirebilirsiniz:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // Varsayılan katman "utilities" CSS katmanına çıkarılacaktır.
    if (layer === 'default')
      return 'utilities'

    // Shortcuts katmanı "utilities" CSS katmanının "shortcuts" alt katmanına çıkarılacaktır.
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Diğer tüm katmanlar adlarını CSS katman adı olarak kullanacaktır.
  }
}

Layers using variants

Katmanlar varyantlar kullanılarak oluşturulabilir.

uno-layer-<name>: bir UnoCSS katmanı oluşturmak için kullanılabilir.

<p class="uno-layer-my-layer:text-xl">text</p>

/* layer: my-layer */
.uno-layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; }

layer-<name>: bir CSS @layer oluşturmak için kullanılabilir.

<p class="layer-my-layer:text-xl">text</p>

/* layer: default */
@layer my-layer{ .layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; } }