Le vocabulaire de base

Ouvrez la maquette d'une interface existante et mesurez les marges intérieures de ses encadrés : 12, 16, 15, 20, 14, 24 pixels. Personne n'a décidé de ce 15, ni de ce 14. Ils sont apparus parce qu'un jour un texte débordait de deux pixels, et qu'un padding: 15px a réglé le problème plus vite qu'une réflexion sur la grille. Multipliés par deux ans de correctifs, ces écarts d'un ou deux pixels produisent une interface que tout le monde trouve vaguement bancale sans pouvoir dire pourquoi.

Tailwind rend ce dérapage difficile, parce qu'il ne vous propose pas de continuum de valeurs mais une échelle. p-3 vaut 12 pixels, p-4 en vaut 16, et il n'y a rien entre les deux. Le premier réflexe, face à un besoin de 15 pixels, est de chercher comment forcer la valeur. Le bon réflexe est de choisir 16 : dans 95 % des cas, aucun utilisateur ne verra la différence, et vous venez de gagner une interface régulière. Cette leçon présente le vocabulaire de base, mais son vrai sujet est là — savoir quand rester dans l'échelle et quand en sortir.

Les espacements

Une seule unité gouverne toute la grille : 1 vaut 0.25rem, soit 4 pixels dans une configuration par défaut. Multipliez par le nombre écrit dans la classe.