Patterns
Vertical Lines v1.0.8
Utilities for sets an element's background vertical-lines pattern.
Class
| class | css | |
|---|---|---|
| pattern vertical-lines-sm | background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent); background-size: 10px 10px | |
| pattern vertical-lines-md | background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent); background-size: 25px 25px | |
| pattern vertical-lines-lg | background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent); background-size: 50px 50px | |
| pattern vertical-lines-xl | background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent); background-size: 100px 100px |
Usage
Set basic vertical-lines pattern.
<!-- Example -->
<y class="pattern vertical-lines-sm ... h-32 w-full">
...
</y>Set pattern with color by using text-{color} utility. (See Text Color).
<!-- Example -->
<y class="pattern vertical-lines-sm text-amber-400 ... h-32 w-full">
...
</y>Set pattern clipping with text.
<!-- Example -->
<y class="pattern vertical-lines-sm clip-text text-red-500">
<y>
TEXT
</y>
</y>Variant
Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.