Checkerboard
This utility class displays a checkerboard pattern, useful for visualizing transparency or content areas.
Installation
npx oward-ui add checkerboardOnce the plugin is installed, import the CSS in your main Tailwind CSS file:
@import "./tailwind/checkerboard.css";Usage
Concept
The utility relies on three CSS variables:
| Variable | Role | Default value |
|---|---|---|
--checkerboard-color | Pattern color (hex, hsl, rgb...) | #eee |
--checkerboard-size | Size of one square | --spacing * 3 |
--checkerboard-alpha | Opacity (in %) | 100% |
Utility classes allow you to modify these variables (see below)
Size
The size is based on the --spacing variable which is the base spacing unit
in the Tailwind theme, by default: 0.25rem (4px). This allows matching the
pattern square size to Tailwind spacings: one checkerboard square corresponds
to size-3 by default.
Modifiers
Color
Just like border, to customize the pattern color, use checkerboard-{color} or checkerboard-{color}-{shade}.
Or via a custom attribute checkerboard-[#F00]. The color value can be in hex, hsl, rgb format...
The checkerboard has only one color, the second color is always transparent. To customize the second color, add a background-color to the element: bg-{color}.
Opacity
When defining the checkerboard color, you can adjust its opacity as follows: checkerboard-{color}/{integer} where integer is a number between 0 and 100 representing the opacity percentage.
Size
Use checkerboard-{integer} to define the size of the pattern squares.
Position
By default, the checkerboard pattern uses background-attachment: fixed so it stays fixed when scrolling.
To change this behavior, use bg-scroll or bg-local.
By default, the checkerboard pattern uses background-position: 0 0 so it starts at the top left.
To change this behavior, use bg-center, bg-top, bg-bottom, bg-left, bg-right or a combination of these classes.
Variants
For responsive variants and states (hover, focus, dark, etc.), use the usual Tailwind CSS prefixes.
Inline customization
To avoid generating additional utility classes in Tailwind, you can customize the checkerboard using inline styles with CSS variables.
<div
className="checkerboard p-10 rounded-xl border"
style={{
"--checkerboard-color": "#F00", // OR 'red', rgb(255,0,0), hsl(0, 100%, 50%)...
"--checkerboard-size": "2rem", // OR '200px', '10vw'...
"--checkerboard-alpha": "50%",
}}
/>