Fondations

Espacement

Base 4px

Tailwind utilise une base de 4px (1 unité = 4px). Chaque valeur est un multiple de 4. Respecter cette grille à tous les niveaux — ne jamais utiliser de valeurs arbitraires comme p-[17px].

p-0.5

1px

Offset icônes, micro-ajustements

p-1

4px

Gap entre icône et texte dans un badge

p-1.5

6px

Padding interne des petits badges

p-2

8px

Padding vertical des inputs sm, boutons icon-only

p-3

12px

Boutons sm, cellules de tableau compactes, padding nav items

p-4

16px

Boutons md, cards petites, padding vertical card header

p-5

20px

Champs de formulaire, sidebar nav items

p-6

24px

Card header/body/footer, sections de page

p-8

32px

Blocks de démonstration, sections principales

p-10

40px

Main content padding horizontal (px-10)

p-12

48px

Sections verticales dans les minisites

p-16

64px

Hero sections, grandes séparations visuelles

✓ Toujours utiliser les valeurs de l'échelle Tailwind (multiples de 4px)

✓ p-4 (16px) est l'unité de base — penser en multiples

✗ Pas de valeurs arbitraires (p-[13px], mt-[7px]…)

✗ Pas de px/py différents s'il est possible d'utiliser p

Usage dans les composants

Référence rapide par composant. Ces valeurs sont fixes — ne pas les adapter au cas par cas.

Boutons

btn-xs

px-2 py-1

btn-sm

px-3 py-2

btn

px-4 py-2.5

btn-lg

px-6 py-3

Cards

Card Header

px-6 py-4

Card body content

px-6 py-4

Card footer

px-6 py-4 bg-gray-50

Formulaires

Entre champs de formulaire space-y-5 (20px)

Label → input mb-1 (4px)

Help text → input mt-1 (4px)

Padding input px-3 py-2 (DaisyUI)

Tableaux

Cellule standard px-4 py-3

Table compact (table-sm) px-3 py-2

Thead padding px-4 py-3

Hover row bg-mc-green-50

Contexte	Padding/Margin	px value
Main content horizontal	px-10	40px
Card header / body / footer	px-6 py-4	24px / 16px
Sidebar nav items	px-3 py-1.5	12px / 6px
Entre groupes sidebar	mb-5	20px
Entre items sidebar	mb-0.5	2px
Sections de page (ds-section)	mb-12	48px
Divider vertical (ds-divider)	my-10	40px
Contenu max-width	max-w-4xl	896px
Demo block padding	p-8	32px

Gap & grilles flex/grid

Valeurs de gap à utiliser dans les layouts flex et grid. Chaque valeur a un contexte d'usage précis.

gap-1

4px

Entre icône et texte inline

gap-2

8px

Entre boutons dans un groupe, entre badges

gap-3

12px

Entre éléments d'un toolbar

gap-4

16px

Grille de cards 4col, entre items de formulaire horizontal

gap-5

20px

Grille swatches couleurs, entre blocs de contenu

gap-6

24px

Grille 2-3col principale, layout page avec sidebar

gap-8

32px

Séparation sections majeures

<!-- Toolbar avec boutons -->
<div class="flex items-center gap-2">
  <button class="btn btn-primary btn-sm">Créer</button>
  <button class="btn btn-ghost btn-sm">Exporter</button>
</div>

<!-- Grille 3 colonnes de cards -->
<div class="grid grid-cols-3 gap-6">
  <div class="card">...</div>
  ...
</div>

<!-- Formulaire vertical -->
<form class="space-y-5">
  <fieldset class="fieldset">...</fieldset>
  <fieldset class="fieldset">...</fieldset>
</form>

<!-- Flex layout page avec sidebar filtres -->
<div class="flex gap-6">
  <aside class="w-64">...</aside>
  <main class="flex-1">...</main>
</div>

Border radius

Valeurs fixes par type de composant. Cohérence avec les tokens DaisyUI définis dans le thème.

rounded

4px

Boutons, inputs, badges

rounded-md

6px

Cards petites, selects

rounded-lg

8px

Cards, modals, demo blocks

rounded-xl

12px

Hero sections publiques

rounded-full

∞

Badges pill, avatars, toggles

✓ rounded pour les éléments inline (badges, tags, boutons si nécessaire)

✓ rounded-lg pour les cards, panels, modals et blocks de contenu

✓ rounded-full pour les avatars, badges pill et indicateurs de statut circulaires

✗ Pas de valeurs arbitraires de border-radius

✗ rounded-xl uniquement dans les contextes publics (minisites, hero) — jamais dans les apps