Checkerboard

Installation

Tailwind 4

Importer le CSS dans le fichier CSS Tailwind principal :

@import '../components/tailwind/checkerboard/style.css';

Ou utiliser la directive @config dans le fichier CSS Tailwind principal, puis suivre les instructions pour Tailwind 3 ci-dessous :

@config "../../tailwind.config.js";

La première méthode est recommandée pour Tailwind 4.

Tailwind 3

Importer le plugin wrapper depuis le fichier components/tailwind/checkerboard/index.ts dans la configuration Tailwind :

import { checkerboard } from './src/components/tailwind/checkerboard';
 
const tailwindConfig = {
  // configuration Tailwind
  plugins: [, /* ... autres plugins */ checkerboard],
};
 
export default tailwindConfig;

Utilisation

Principe

L’utilitaire repose sur trois variables CSS :

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

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.

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%',
  }}
/>