Checkerboard

🫧

Installation

npx shadcn@latest add https://ui.oward.dev/r/registry.json checkerboard

Une fois le plugin installé, importer le CSS dans le fichier CSS Tailwind principal :

@import "../styles/checkerboard/style.css";

Utilisation

Principe

L’utilitaire repose sur trois variables CSS :

Variable	Rôle	Valeur par défaut
`--checkerboard-color`	Couleur du motif (hex, hsl, rbg...)	`#eee`
`--checkerboard-size`	Taille d’une case	`--spacing * 3`
`--checkerboard-alpha`	Opacité (en %)	`100%`

Des classes utilitaire permettent de modifier ces variables (voir ci-dessous)

La taille

La taille est basée sur la variable --spacing qui est l'unité de base d'espacement dans le thème Tailwind, par défaut : 0.25rem (4px). Cela permet de faire correspondre la taille des cases du motif aux espacements de Tailwind : une case du damier correspond à size-3 par default.

Les modificateurs

Couleur

Tout comme border, pour personnaliser la couleur du motif, utiliser checkerboard-{color} ou checkerboard-{color}-{shade}. Ou via un custom-attribute checkerboard-[#F00]. La valeur de la couleur peut être au format hex, hsl, rgb...

Le damier n'a qu'une couleur, la deuxième couleur est toujours transparente. Pour personnaliser la seconde couleur, il faut ajouter un background-color sur l'élément : bg-{color}.

Opacité

En définissant la couleur du checkerboard on peut ajuster l'opacité de celle-ci de la manière suivante checkerboard-{color}/{integer} où integer est un nombre entre 0 et 100 qui représente le pourcentage d'opacité.

Taille

Utiliser checkerboard-{integer} pour définir la taille des cases du motif.

Position

Par défault le motif du damier est en background-attachement: fixed pour qu'il reste fixe lors du scroll. Pour modifier ce comportement, utiliser bg-scroll ou bg-local.

Par défault le motif du damier est en background-position: 0 0 pour qu'il commence en haut à gauche. Pour modifier ce comportement, utiliser bg-center, bg-top, bg-bottom, bg-left, bg-right ou une combinaison de ces classes.

Variants

Pour les variantes responsive et les états (hover, focus, dark, etc.), utiliser les préfixes habituels de Tailwind CSS.

Passez votre curseur au-dessus

Personnalisation inline

Pour éviter de générer des classes utilitaires supplémentaires dans Tailwind, vous pouvez personnaliser le damier en utilisant des styles inline avec les variables CSS.

<div
  className="checkerboard p-10 rounded-xl border"
  style={{
    "--checkerboard-color": "#F00", // OU 'red', rgb(255,0,0), hsl(0, 100%, 50%)...
    "--checkerboard-size": "2rem", // OU '200px', '10vw'...
    "--checkerboard-alpha": "50%",
  }}
/>