Patterns

Horizontal Lines v1.0.8

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


Class

classcss
pattern
horizontal-lines-sm
background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);

background-size: 10px 10px
pattern
horizontal-lines-md
background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);

background-size: 25px 25px
pattern
horizontal-lines-lg
background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);

background-size: 50px 50px
pattern
horizontal-lines-xl
background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);

background-size: 100px 100px
Note: Utility customizing is unavailable.

Usage

Set basic horizontal-lines pattern.

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

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

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

Set pattern clipping with text.

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

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled