Patterns

Diagonal Lines v1.0.8

Utilities for sets an element's background diagonal-lines pattern.

Class

class	css
pattern diagonal-lines-sm	background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%); background-size: 10px 10px
pattern diagonal-lines-md	background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%); background-size: 25px 25px
pattern diagonal-lines-lg	background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%); background-size: 50px 50px
pattern diagonal-lines-xl	background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%); background-size: 100px 100px

Set basic diagonal-lines pattern.

<!-- Example -->
<y class="pattern diagonal-lines-sm ... h-32 w-full">
  ...
</y>

Set pattern with color by using text-{color} utility. (See Text Color).

<!-- Example -->
<y class="pattern diagonal-lines-sm text-amber-400 ... h-32 w-full">
  ...
</y>

Set pattern clipping with text.

TEXT

<!-- Example -->
<y class="pattern diagonal-lines-sm clip-text text-red-500">
  <y>
    TEXT
  </y>
</y>

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.