Borders

Dissect Opacity

Utilities for sets opacity to bottom border on each child elements of its parent.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
dissect-opacity-0	--dissect-opacity: 0
dissect-opacity-25	--dissect-opacity: .25
dissect-opacity-50	--dissect-opacity: .5
dissect-opacity-75	--dissect-opacity: .75
dissect-opacity-100	--dissect-opacity: 1

Usage

Set dissect-x-{value} and dissect-y-{value} borders with color opacity to 50%.

<div class="dissect-y-4 dissect-shade-amber-4 dissect-opacity-50">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .dissect-y-4,
    .dissect-shade-amber-4,
    .dissect-opacity-50;
}

SCSS

Set dissect-x-{value} and dissect-y-{value} borders with color opacity to 25%.

<div class="dissect-y-4 dissect-shade-amber-4 dissect-opacity-25">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .dissect-y-4,
    .dissect-shade-amber-4,
    .dissect-opacity-25;
}

SCSS