Patterns
Checks v1.0.8
Utilities for sets an element's background checks pattern.
Class
class | css | |
---|---|---|
pattern checks-sm | background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor); background-position: 0 0, 10px 10px; background-size: calc(2 * 10px) calc(2 * 10px) | |
pattern checks-md | background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor); background-position: 0 0, 25px 25px; background-size: calc(2 * 25px) calc(2 * 25px) | |
pattern checks-lg | background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor); background-position: 0 0, 50px 50px; background-size: calc(2 * 50px) calc(2 * 50px) | |
pattern checks-xl | background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor); background-position: 0 0, 100px 100px; background-size: calc(2 * 100px) calc(2 * 100px) |
Usage
Set basic checks pattern.
<!-- Example -->
<y class="pattern checks-sm ... h-32 w-full">
...
</y>
Set pattern with color by using text-{color}
utility. (See Text Color).
<!-- Example -->
<y class="pattern checks-sm text-amber-400 ... h-32 w-full">
...
</y>
Set pattern clipping with text.
<!-- Example -->
<y class="pattern checks-sm clip-text text-red-500">
<y>
TEXT
</y>
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |