[{"data":1,"prerenderedAt":886},["ShallowReactive",2],{"page-\u002Ftailwind\u002Fespacements-couleurs-typographie":3,"pieces-tailwind":848,"autour-\u002Ftailwind\u002Fespacements-couleurs-typographie":869,"prerequis-\u002Ftailwind\u002Fespacements-couleurs-typographie":874,"plan-tailwind":876},{"id":4,"title":5,"body":6,"description":812,"extension":813,"ligne":814,"meta":815,"motsCles":816,"navigation":821,"niveau":822,"path":823,"prerequis":824,"ressources":826,"seo":835,"sources":836,"stem":846,"__hash__":847},"docs\u002Ftailwind\u002F02.espacements-couleurs-typographie.md","Espacements, couleurs et typographie",{"type":7,"value":8,"toc":801},"minimark",[9,14,39,43,47,129,148,237,246,250,261,279,282,286,289,323,351,357,363,367,421,511,523,530,534,537,562,581,585,588,612,626,636,640,718,721,725,797],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,33,36],"ul",{},[18,19,20,21,25,26,25,29,32],"li",{},"Lire l'échelle d'espacement (",[22,23,24],"code",{},"p-4",", ",[22,27,28],{},"mt-2",[22,30,31],{},"gap-6",").",[18,34,35],{},"Choisir des couleurs et des tailles de texte dans les valeurs fournies.",[18,37,38],{},"Écrire une valeur sur mesure quand l'échelle ne suffit pas.",[10,40,42],{"id":41},"les-espacements","Les espacements",[44,45,46],"p",{},"Voici une carte de recette avec du remplissage et de la marge :",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Carticle class=\"p-4 mt-6\">\n  \u003Ch2 class=\"mb-2\">Crêpes au citron\u003C\u002Fh2>\n  \u003Cp>Prêtes en 15 minutes.\u003C\u002Fp>\n\u003C\u002Farticle>\n","html","",[22,55,56,83,105,119],{"__ignoreMap":53},[57,58,61,65,69,73,76,80],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"scfrF","\u003C",[57,66,68],{"class":67},"s5JFL","article",[57,70,72],{"class":71},"s5iOY"," class",[57,74,75],{"class":63},"=",[57,77,79],{"class":78},"shWOn","\"p-4 mt-6\"",[57,81,82],{"class":63},">\n",[57,84,86,89,91,93,95,98,101,103],{"class":59,"line":85},2,[57,87,88],{"class":63},"  \u003C",[57,90,10],{"class":67},[57,92,72],{"class":71},[57,94,75],{"class":63},[57,96,97],{"class":78},"\"mb-2\"",[57,99,100],{"class":63},">Crêpes au citron\u003C\u002F",[57,102,10],{"class":67},[57,104,82],{"class":63},[57,106,108,110,112,115,117],{"class":59,"line":107},3,[57,109,88],{"class":63},[57,111,44],{"class":67},[57,113,114],{"class":63},">Prêtes en 15 minutes.\u003C\u002F",[57,116,44],{"class":67},[57,118,82],{"class":63},[57,120,122,125,127],{"class":59,"line":121},4,[57,123,124],{"class":63},"\u003C\u002F",[57,126,68],{"class":67},[57,128,82],{"class":63},[44,130,131,132,136,137,140,141,136,144,147],{},"Le ",[133,134,135],"strong",{},"remplissage"," (",[22,138,139],{},"padding",") est l'espace à l'intérieur d'un élément. La ",[133,142,143],{},"marge",[22,145,146],{},"margin",") est l'espace à l'extérieur. Les classes se lisent en deux parties : une lettre pour le type, un nombre pour la taille.",[149,150,151,164],"table",{},[152,153,154],"thead",{},[155,156,157,161],"tr",{},[158,159,160],"th",{},"Classe",[158,162,163],{},"Effet",[165,166,167,177,191,211,227],"tbody",{},[155,168,169,174],{},[170,171,172],"td",{},[22,173,24],{},[170,175,176],{},"Remplissage sur les quatre côtés",[155,178,179,188],{},[170,180,181,184,185],{},[22,182,183],{},"px-4"," \u002F ",[22,186,187],{},"py-2",[170,189,190],{},"Remplissage horizontal \u002F vertical",[155,192,193,208],{},[170,194,195,198,199,198,202,198,205],{},[22,196,197],{},"pt-2"," ",[22,200,201],{},"pr-2",[22,203,204],{},"pb-2",[22,206,207],{},"pl-2",[170,209,210],{},"Haut, droite, bas, gauche",[155,212,213,224],{},[170,214,215,198,218,198,221],{},[22,216,217],{},"m-4",[22,219,220],{},"mx-auto",[22,222,223],{},"mt-6",[170,225,226],{},"Les mêmes idées pour la marge",[155,228,229,234],{},[170,230,231],{},[22,232,233],{},"gap-4",[170,235,236],{},"Espace entre les enfants d'un conteneur flex ou grid",[44,238,239,241,242,245],{},[22,240,220],{}," centre horizontalement un élément dont la largeur est limitée, par exemple avec ",[22,243,244],{},"max-w-md",".",[10,247,249],{"id":248},"léchelle-des-nombres","L'échelle des nombres",[44,251,252,253,256,257,260],{},"Le nombre n'est pas une valeur en pixels. Tailwind multiplie ce nombre par une unité de base, la variable ",[22,254,255],{},"--spacing",", qui vaut ",[22,258,259],{},"0.25rem"," par défaut.",[44,262,263,264,266,267,270,271,274,275,278],{},"Donc ",[22,265,24],{}," donne ",[22,268,269],{},"calc(var(--spacing) * 4)",", soit 1 rem (16 px dans un navigateur standard). ",[22,272,273],{},"p-2"," donne 0,5 rem, ",[22,276,277],{},"p-8"," donne 2 rem.",[44,280,281],{},"Cette échelle évite d'inventer des valeurs au hasard : tes espaces restent des multiples les uns des autres, et la page paraît plus régulière.",[10,283,285],{"id":284},"les-couleurs","Les couleurs",[44,287,288],{},"Les couleurs se composent d'un nom et d'une nuance de 50 (très clair) à 950 (très foncé) :",[48,290,292],{"className":50,"code":291,"language":52,"meta":53,"style":53},"\u003Cdiv class=\"bg-orange-50 text-orange-900 border border-orange-300\">\n  Astuce : sale l'eau des pâtes.\n\u003C\u002Fdiv>\n",[22,293,294,310,315],{"__ignoreMap":53},[57,295,296,298,301,303,305,308],{"class":59,"line":60},[57,297,64],{"class":63},[57,299,300],{"class":67},"div",[57,302,72],{"class":71},[57,304,75],{"class":63},[57,306,307],{"class":78},"\"bg-orange-50 text-orange-900 border border-orange-300\"",[57,309,82],{"class":63},[57,311,312],{"class":59,"line":85},[57,313,314],{"class":63},"  Astuce : sale l'eau des pâtes.\n",[57,316,317,319,321],{"class":59,"line":107},[57,318,124],{"class":63},[57,320,300],{"class":67},[57,322,82],{"class":63},[15,324,325,335,341],{},[18,326,327,330,331,32],{},[22,328,329],{},"bg-"," pour le fond (",[332,333,334],"em",{},"background",[18,336,337,340],{},[22,338,339],{},"text-"," pour la couleur du texte.",[18,342,343,346,347,350],{},[22,344,345],{},"border-"," pour la bordure (la classe ",[22,348,349],{},"border"," seule règle l'épaisseur).",[44,352,353,354,245],{},"Pour une couleur semi-transparente, ajoute une barre oblique et un pourcentage : ",[22,355,356],{},"bg-orange-500\u002F50",[358,359,360],"tip",{},[44,361,362],{},"Pour un texte lisible, associe un fond clair (50 ou 100) à un texte foncé (800 ou 900), ou l'inverse. Évite deux nuances proches.",[10,364,366],{"id":365},"la-typographie","La typographie",[48,368,370],{"className":50,"code":369,"language":52,"meta":53,"style":53},"\u003Ch1 class=\"text-3xl font-bold tracking-tight\">Mes recettes\u003C\u002Fh1>\n\u003Cp class=\"text-base leading-7 text-gray-700\">\n  Des plats simples pour la semaine.\n\u003C\u002Fp>\n",[22,371,372,393,408,413],{"__ignoreMap":53},[57,373,374,376,379,381,383,386,389,391],{"class":59,"line":60},[57,375,64],{"class":63},[57,377,378],{"class":67},"h1",[57,380,72],{"class":71},[57,382,75],{"class":63},[57,384,385],{"class":78},"\"text-3xl font-bold tracking-tight\"",[57,387,388],{"class":63},">Mes recettes\u003C\u002F",[57,390,378],{"class":67},[57,392,82],{"class":63},[57,394,395,397,399,401,403,406],{"class":59,"line":85},[57,396,64],{"class":63},[57,398,44],{"class":67},[57,400,72],{"class":71},[57,402,75],{"class":63},[57,404,405],{"class":78},"\"text-base leading-7 text-gray-700\"",[57,407,82],{"class":63},[57,409,410],{"class":59,"line":107},[57,411,412],{"class":63},"  Des plats simples pour la semaine.\n",[57,414,415,417,419],{"class":59,"line":121},[57,416,124],{"class":63},[57,418,44],{"class":67},[57,420,82],{"class":63},[149,422,423,436],{},[152,424,425],{},[155,426,427,430,433],{},[158,428,429],{},"Famille",[158,431,432],{},"Exemples",[158,434,435],{},"Rôle",[165,437,438,460,479,495],{},[155,439,440,443,457],{},[170,441,442],{},"Taille",[170,444,445,25,448,25,451,25,454],{},[22,446,447],{},"text-sm",[22,449,450],{},"text-base",[22,452,453],{},"text-xl",[22,455,456],{},"text-3xl",[170,458,459],{},"Taille du texte",[155,461,462,465,476],{},[170,463,464],{},"Graisse",[170,466,467,25,470,25,473],{},[22,468,469],{},"font-normal",[22,471,472],{},"font-medium",[22,474,475],{},"font-bold",[170,477,478],{},"Épaisseur des lettres",[155,480,481,484,492],{},[170,482,483],{},"Interligne",[170,485,486,25,489],{},[22,487,488],{},"leading-6",[22,490,491],{},"leading-7",[170,493,494],{},"Hauteur de ligne",[155,496,497,500,508],{},[170,498,499],{},"Espacement des lettres",[170,501,502,25,505],{},[22,503,504],{},"tracking-tight",[22,506,507],{},"tracking-wide",[170,509,510],{},"Écart entre les lettres",[44,512,513,514,516,517,519,520,522],{},"Chaque classe de taille règle aussi l'interligne. Par exemple ",[22,515,447],{}," vaut 0,875 rem (14 px), ",[22,518,450],{}," vaut 1 rem et ",[22,521,453],{}," vaut 1,25 rem (20 px).",[44,524,525,526,529],{},"Pour choisir toi-même l'interligne, utilise une barre oblique : ",[22,527,528],{},"text-sm\u002F6"," règle la taille et l'interligne en une seule classe.",[10,531,533],{"id":532},"coins-ombres-et-bordures","Coins, ombres et bordures",[44,535,536],{},"Trois classes rendent vite une carte plus agréable :",[48,538,540],{"className":50,"code":539,"language":52,"meta":53,"style":53},"\u003Cdiv class=\"rounded-lg border shadow-md p-4\">...\u003C\u002Fdiv>\n",[22,541,542],{"__ignoreMap":53},[57,543,544,546,548,550,552,555,558,560],{"class":59,"line":60},[57,545,64],{"class":63},[57,547,300],{"class":67},[57,549,72],{"class":71},[57,551,75],{"class":63},[57,553,554],{"class":78},"\"rounded-lg border shadow-md p-4\"",[57,556,557],{"class":63},">...\u003C\u002F",[57,559,300],{"class":67},[57,561,82],{"class":63},[15,563,564,570,575],{},[18,565,566,569],{},[22,567,568],{},"rounded-lg"," arrondit les coins.",[18,571,572,574],{},[22,573,349],{}," ajoute une bordure fine.",[18,576,577,580],{},[22,578,579],{},"shadow-md"," ajoute une ombre moyenne.",[10,582,584],{"id":583},"une-valeur-sur-mesure","Une valeur sur mesure",[44,586,587],{},"Quand l'échelle ne contient pas la valeur voulue, mets-la entre crochets :",[48,589,591],{"className":50,"code":590,"language":52,"meta":53,"style":53},"\u003Cdiv class=\"p-[5px] w-[22rem] bg-[#f5e6d3]\">...\u003C\u002Fdiv>\n",[22,592,593],{"__ignoreMap":53},[57,594,595,597,599,601,603,606,608,610],{"class":59,"line":60},[57,596,64],{"class":63},[57,598,300],{"class":67},[57,600,72],{"class":71},[57,602,75],{"class":63},[57,604,605],{"class":78},"\"p-[5px] w-[22rem] bg-[#f5e6d3]\"",[57,607,557],{"class":63},[57,609,300],{"class":67},[57,611,82],{"class":63},[44,613,614,615,618,619,622,623,245],{},"C'est une ",[133,616,617],{},"valeur arbitraire",". Pour ",[22,620,621],{},"p-[5px]",", Tailwind produit ",[22,624,625],{},"padding: 5px;",[627,628,629],"warning",{},[44,630,631,632,635],{},"N'abuse pas des crochets. Si tu écris ",[22,633,634],{},"w-[22rem]"," partout, c'est le signe qu'il faut ajouter une valeur au thème (chapitre 5), pas multiplier les exceptions.",[10,637,639],{"id":638},"un-exemple-complet","Un exemple complet",[48,641,643],{"className":50,"code":642,"language":52,"meta":53,"style":53},"\u003Carticle class=\"mx-auto max-w-md rounded-lg border bg-white p-6 shadow-md\">\n  \u003Ch2 class=\"mb-2 text-xl font-bold text-orange-700\">Crêpes au citron\u003C\u002Fh2>\n  \u003Cp class=\"text-sm leading-6 text-gray-600\">\n    Mélange la farine, les œufs et le lait, puis laisse reposer la pâte.\n  \u003C\u002Fp>\n\u003C\u002Farticle>\n",[22,644,645,660,679,694,699,709],{"__ignoreMap":53},[57,646,647,649,651,653,655,658],{"class":59,"line":60},[57,648,64],{"class":63},[57,650,68],{"class":67},[57,652,72],{"class":71},[57,654,75],{"class":63},[57,656,657],{"class":78},"\"mx-auto max-w-md rounded-lg border bg-white p-6 shadow-md\"",[57,659,82],{"class":63},[57,661,662,664,666,668,670,673,675,677],{"class":59,"line":85},[57,663,88],{"class":63},[57,665,10],{"class":67},[57,667,72],{"class":71},[57,669,75],{"class":63},[57,671,672],{"class":78},"\"mb-2 text-xl font-bold text-orange-700\"",[57,674,100],{"class":63},[57,676,10],{"class":67},[57,678,82],{"class":63},[57,680,681,683,685,687,689,692],{"class":59,"line":107},[57,682,88],{"class":63},[57,684,44],{"class":67},[57,686,72],{"class":71},[57,688,75],{"class":63},[57,690,691],{"class":78},"\"text-sm leading-6 text-gray-600\"",[57,693,82],{"class":63},[57,695,696],{"class":59,"line":121},[57,697,698],{"class":63},"    Mélange la farine, les œufs et le lait, puis laisse reposer la pâte.\n",[57,700,702,705,707],{"class":59,"line":701},5,[57,703,704],{"class":63},"  \u003C\u002F",[57,706,44],{"class":67},[57,708,82],{"class":63},[57,710,712,714,716],{"class":59,"line":711},6,[57,713,124],{"class":63},[57,715,68],{"class":67},[57,717,82],{"class":63},[44,719,720],{},"Lis-le de gauche à droite : la carte est centrée et limitée en largeur, arrondie, avec une bordure, un fond blanc, du remplissage et une ombre. Le titre est en orange foncé, gras. Le texte est petit et gris.",[10,722,724],{"id":723},"à-retenir","À retenir",[15,726,727,759,768,777,791],{},[18,728,729,25,732,735,736,739,740,25,743,25,746,25,749,25,752,25,755,758],{},[22,730,731],{},"p-",[22,733,734],{},"m-"," et ",[22,737,738],{},"gap-"," règlent les espaces ; ",[22,741,742],{},"x",[22,744,745],{},"y",[22,747,748],{},"t",[22,750,751],{},"r",[22,753,754],{},"b",[22,756,757],{},"l"," précisent le côté.",[18,760,761,762,764,765,767],{},"Le nombre multiplie ",[22,763,255],{}," (0,25 rem par défaut) : ",[22,766,24],{}," vaut 1 rem.",[18,769,770,771,25,774,245],{},"Les couleurs combinent un nom et une nuance de 50 à 950 : ",[22,772,773],{},"bg-orange-50",[22,775,776],{},"text-gray-600",[18,778,779,25,781,25,784,735,787,790],{},[22,780,339],{},[22,782,783],{},"font-",[22,785,786],{},"leading-",[22,788,789],{},"tracking-"," règlent la taille, la graisse, l'interligne et l'écart des lettres.",[18,792,793,794,796],{},"Les crochets (",[22,795,621],{},") donnent une valeur arbitraire, à utiliser avec parcimonie.",[798,799,800],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":53,"searchDepth":85,"depth":107,"links":802},[803,804,805,806,807,808,809,810,811],{"id":12,"depth":85,"text":13},{"id":41,"depth":85,"text":42},{"id":248,"depth":85,"text":249},{"id":284,"depth":85,"text":285},{"id":365,"depth":85,"text":366},{"id":532,"depth":85,"text":533},{"id":583,"depth":85,"text":584},{"id":638,"depth":85,"text":639},{"id":723,"depth":85,"text":724},"Les classes de base de Tailwind CSS 4 pour espacer, colorer et mettre en forme du texte, avec l'échelle de valeurs.","md","tailwind",{},[817,139,146,818,819,820,453,617],"espacement","gap","couleur","typographie",true,"debutant","\u002Ftailwind\u002Fespacements-couleurs-typographie",[825],"\u002Ftailwind\u002Fprincipe-et-installation",[827,831],{"nom":828,"url":829,"type":830},"Grafikart, TailwindCSS 4, nouvelle configuration","https:\u002F\u002Fgrafikart.fr\u002Ftutoriels\u002Ftailwindcss-v4-2265","video",{"nom":832,"url":833,"type":834,"anglais":821},"Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs","doc",{"title":5,"description":812},[837,840,843],{"nom":838,"url":839},"Padding, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fpadding",{"nom":841,"url":842},"Font size, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ffont-size",{"nom":844,"url":845},"Theme variables, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ftheme","tailwind\u002F02.espacements-couleurs-typographie","rQsn2OoXUjeq56BS4wxmXfIQZ7y6QD8Nlozhdp7ig40",[849,852,853,857,861,865],{"path":825,"title":850,"stem":851},"Principe et installation","tailwind\u002F01.principe-et-installation",{"path":823,"title":5,"stem":846},{"path":854,"title":855,"stem":856},"\u002Ftailwind\u002Fflex-et-grid","Mise en page avec flex et grid","tailwind\u002F03.flex-et-grid",{"path":858,"title":859,"stem":860},"\u002Ftailwind\u002Fpersonnaliser-le-theme","Personnaliser le thème avec @theme","tailwind\u002F05.personnaliser-le-theme",{"path":862,"title":863,"stem":864},"\u002Ftailwind\u002Fbonnes-pratiques","Bonnes pratiques","tailwind\u002F06.bonnes-pratiques",{"path":866,"title":867,"stem":868},"\u002Ftailwind","Tailwind CSS","tailwind\u002Findex",[870,872],{"title":850,"path":825,"stem":851,"description":871,"children":-1},"Comprendre les classes utilitaires de Tailwind CSS 4, puis l'installer avec Vite ou dans un projet Nuxt.",{"title":855,"path":854,"stem":856,"description":873,"children":-1},"Aligner et répartir des éléments avec les classes flex et grid de Tailwind CSS 4, sur une liste de recettes.",[875],{"path":825,"title":850,"ligne":814},[877,878,879,880,882,884],{"path":825,"title":850,"niveau":822,"stem":851},{"path":823,"title":5,"niveau":822,"stem":846},{"path":854,"title":855,"niveau":822,"stem":856},{"path":858,"title":859,"niveau":881,"stem":860},"intermediaire",{"path":862,"title":863,"niveau":883,"stem":864},"avance",{"path":866,"title":867,"niveau":885,"stem":868},"memo",1794583443707]