Patterns

Diagonal Stripes v1.0.8

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

Class

class	css
pattern diagonal-stripes-sm	background: repeating-linear-gradient(45deg, transparent, transparent 10px, currentColor 10px, currentColor calc(2 * 10px))
pattern diagonal-stripes-md	background: repeating-linear-gradient(45deg, transparent, transparent 25px, currentColor 25px, currentColor calc(2 * 25px))
pattern diagonal-stripes-lg	background: repeating-linear-gradient(45deg, transparent, transparent 50px, currentColor 50px, currentColor calc(2 * 50px))
pattern diagonal-stripes-xl	background: repeating-linear-gradient(45deg, transparent, transparent 100px, currentColor 100px, currentColor calc(2 * 100px))

Set basic diagonal-stripes pattern.

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

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

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

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

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