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)) |
Usage
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>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |