[{"data":1,"prerenderedAt":1002},["ShallowReactive",2],{"page-\u002Ftailwind\u002Fflex-et-grid":3,"pieces-tailwind":964,"autour-\u002Ftailwind\u002Fflex-et-grid":985,"prerequis-\u002Ftailwind\u002Fflex-et-grid":990,"plan-tailwind":992},{"id":4,"title":5,"body":6,"description":932,"extension":933,"ligne":934,"meta":935,"motsCles":936,"navigation":940,"niveau":941,"path":942,"prerequis":943,"ressources":945,"seo":954,"sources":955,"stem":962,"__hash__":963},"docs\u002Ftailwind\u002F03.flex-et-grid.md","Mise en page avec flex et grid",{"type":7,"value":8,"toc":921},"minimark",[9,14,39,43,47,194,209,212,262,266,273,340,346,350,415,420,501,508,535,539,545,650,663,673,677,684,744,750,754,808,811,815,818,860,866,876,880,917],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,26,36],"ul",{},[18,19,20,21,25],"li",{},"Aligner des éléments sur une ligne ou une colonne avec ",[22,23,24],"code",{},"flex",".",[18,27,28,29,32,33,25],{},"Créer une grille de cartes avec ",[22,30,31],{},"grid"," et ",[22,34,35],{},"grid-cols-*",[18,37,38],{},"Choisir entre flex et grid selon le besoin.",[10,40,42],{"id":41},"flex-une-ligne-ou-une-colonne","Flex : une ligne ou une colonne",[44,45,46],"p",{},"Un en-tête de site avec un logo à gauche et des liens à droite :",[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","\u003Cheader class=\"flex items-center justify-between p-4\">\n  \u003Ca href=\"\u002F\" class=\"text-xl font-bold\">Recettes\u003C\u002Fa>\n  \u003Cnav class=\"flex gap-4\">\n    \u003Ca href=\"\u002Frecettes\">Toutes\u003C\u002Fa>\n    \u003Ca href=\"\u002Fingredients\">Ingrédients\u003C\u002Fa>\n  \u003C\u002Fnav>\n\u003C\u002Fheader>\n","html","",[22,55,56,83,114,131,153,174,184],{"__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","header",[57,70,72],{"class":71},"s5iOY"," class",[57,74,75],{"class":63},"=",[57,77,79],{"class":78},"shWOn","\"flex items-center justify-between p-4\"",[57,81,82],{"class":63},">\n",[57,84,86,89,92,95,97,100,102,104,107,110,112],{"class":59,"line":85},2,[57,87,88],{"class":63},"  \u003C",[57,90,91],{"class":67},"a",[57,93,94],{"class":71}," href",[57,96,75],{"class":63},[57,98,99],{"class":78},"\"\u002F\"",[57,101,72],{"class":71},[57,103,75],{"class":63},[57,105,106],{"class":78},"\"text-xl font-bold\"",[57,108,109],{"class":63},">Recettes\u003C\u002F",[57,111,91],{"class":67},[57,113,82],{"class":63},[57,115,117,119,122,124,126,129],{"class":59,"line":116},3,[57,118,88],{"class":63},[57,120,121],{"class":67},"nav",[57,123,72],{"class":71},[57,125,75],{"class":63},[57,127,128],{"class":78},"\"flex gap-4\"",[57,130,82],{"class":63},[57,132,134,137,139,141,143,146,149,151],{"class":59,"line":133},4,[57,135,136],{"class":63},"    \u003C",[57,138,91],{"class":67},[57,140,94],{"class":71},[57,142,75],{"class":63},[57,144,145],{"class":78},"\"\u002Frecettes\"",[57,147,148],{"class":63},">Toutes\u003C\u002F",[57,150,91],{"class":67},[57,152,82],{"class":63},[57,154,156,158,160,162,164,167,170,172],{"class":59,"line":155},5,[57,157,136],{"class":63},[57,159,91],{"class":67},[57,161,94],{"class":71},[57,163,75],{"class":63},[57,165,166],{"class":78},"\"\u002Fingredients\"",[57,168,169],{"class":63},">Ingrédients\u003C\u002F",[57,171,91],{"class":67},[57,173,82],{"class":63},[57,175,177,180,182],{"class":59,"line":176},6,[57,178,179],{"class":63},"  \u003C\u002F",[57,181,121],{"class":67},[57,183,82],{"class":63},[57,185,187,190,192],{"class":59,"line":186},7,[57,188,189],{"class":63},"\u003C\u002F",[57,191,68],{"class":67},[57,193,82],{"class":63},[44,195,196,197,199,200,204,205,208],{},"La classe ",[22,198,24],{}," transforme un élément en ",[201,202,203],"strong",{},"conteneur flex"," : ses enfants se placent côte à côte, sur une même ligne. Tu connais déjà ",[22,206,207],{},"display: flex"," en CSS, c'est la même chose.",[44,210,211],{},"Les trois autres classes règlent le placement :",[213,214,215,228],"table",{},[216,217,218],"thead",{},[219,220,221,225],"tr",{},[222,223,224],"th",{},"Classe",[222,226,227],{},"Effet",[229,230,231,242,252],"tbody",{},[219,232,233,239],{},[234,235,236],"td",{},[22,237,238],{},"items-center",[234,240,241],{},"Centre les enfants verticalement (sur l'axe secondaire)",[219,243,244,249],{},[234,245,246],{},[22,247,248],{},"justify-between",[234,250,251],{},"Répartit les enfants, le premier au début et le dernier à la fin",[219,253,254,259],{},[234,255,256],{},[22,257,258],{},"gap-4",[234,260,261],{},"Ajoute un espace de 1 rem entre les enfants",[10,263,265],{"id":264},"changer-de-direction","Changer de direction",[44,267,268,269,272],{},"Par défaut, flex place les éléments en ligne. ",[22,270,271],{},"flex-col"," les empile :",[48,274,276],{"className":50,"code":275,"language":52,"meta":53,"style":53},"\u003Cul class=\"flex flex-col gap-2\">\n  \u003Cli>Farine\u003C\u002Fli>\n  \u003Cli>Œufs\u003C\u002Fli>\n  \u003Cli>Lait\u003C\u002Fli>\n\u003C\u002Ful>\n",[22,277,278,293,306,319,332],{"__ignoreMap":53},[57,279,280,282,284,286,288,291],{"class":59,"line":60},[57,281,64],{"class":63},[57,283,15],{"class":67},[57,285,72],{"class":71},[57,287,75],{"class":63},[57,289,290],{"class":78},"\"flex flex-col gap-2\"",[57,292,82],{"class":63},[57,294,295,297,299,302,304],{"class":59,"line":85},[57,296,88],{"class":63},[57,298,18],{"class":67},[57,300,301],{"class":63},">Farine\u003C\u002F",[57,303,18],{"class":67},[57,305,82],{"class":63},[57,307,308,310,312,315,317],{"class":59,"line":116},[57,309,88],{"class":63},[57,311,18],{"class":67},[57,313,314],{"class":63},">Œufs\u003C\u002F",[57,316,18],{"class":67},[57,318,82],{"class":63},[57,320,321,323,325,328,330],{"class":59,"line":133},[57,322,88],{"class":63},[57,324,18],{"class":67},[57,326,327],{"class":63},">Lait\u003C\u002F",[57,329,18],{"class":67},[57,331,82],{"class":63},[57,333,334,336,338],{"class":59,"line":155},[57,335,189],{"class":63},[57,337,15],{"class":67},[57,339,82],{"class":63},[44,341,342,345],{},[22,343,344],{},"flex-row"," est la direction par défaut, utile surtout pour la remettre sur grand écran (chapitre 4).",[10,347,349],{"id":348},"les-principales-classes-de-flex","Les principales classes de flex",[213,351,352,361],{},[216,353,354],{},[219,355,356,358],{},[222,357,224],{},[222,359,360],{},"Rôle",[229,362,363,373,390,405],{},[219,364,365,370],{},[234,366,367],{},[22,368,369],{},"flex-wrap",[234,371,372],{},"Passe à la ligne quand il n'y a plus de place",[219,374,375,387],{},[234,376,377,380,381,380,384],{},[22,378,379],{},"justify-start"," ",[22,382,383],{},"justify-center",[22,385,386],{},"justify-end",[234,388,389],{},"Répartition sur l'axe principal",[219,391,392,402],{},[234,393,394,380,397,380,399],{},[22,395,396],{},"items-start",[22,398,238],{},[22,400,401],{},"items-end",[234,403,404],{},"Alignement sur l'axe secondaire",[219,406,407,412],{},[234,408,409],{},[22,410,411],{},"flex-1",[234,413,414],{},"L'élément prend la place restante",[44,416,417,419],{},[22,418,411],{}," sert à pousser un contenu :",[48,421,423],{"className":50,"code":422,"language":52,"meta":53,"style":53},"\u003Cdiv class=\"flex gap-4\">\n  \u003Cimg src=\"\u002Fcrepes.jpg\" alt=\"Crêpes\" class=\"w-24\" \u002F>\n  \u003Cdiv class=\"flex-1\">Le texte occupe tout le reste de la largeur.\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[22,424,425,440,473,493],{"__ignoreMap":53},[57,426,427,429,432,434,436,438],{"class":59,"line":60},[57,428,64],{"class":63},[57,430,431],{"class":67},"div",[57,433,72],{"class":71},[57,435,75],{"class":63},[57,437,128],{"class":78},[57,439,82],{"class":63},[57,441,442,444,447,450,452,455,458,460,463,465,467,470],{"class":59,"line":85},[57,443,88],{"class":63},[57,445,446],{"class":67},"img",[57,448,449],{"class":71}," src",[57,451,75],{"class":63},[57,453,454],{"class":78},"\"\u002Fcrepes.jpg\"",[57,456,457],{"class":71}," alt",[57,459,75],{"class":63},[57,461,462],{"class":78},"\"Crêpes\"",[57,464,72],{"class":71},[57,466,75],{"class":63},[57,468,469],{"class":78},"\"w-24\"",[57,471,472],{"class":63}," \u002F>\n",[57,474,475,477,479,481,483,486,489,491],{"class":59,"line":116},[57,476,88],{"class":63},[57,478,431],{"class":67},[57,480,72],{"class":71},[57,482,75],{"class":63},[57,484,485],{"class":78},"\"flex-1\"",[57,487,488],{"class":63},">Le texte occupe tout le reste de la largeur.\u003C\u002F",[57,490,431],{"class":67},[57,492,82],{"class":63},[57,494,495,497,499],{"class":59,"line":133},[57,496,189],{"class":63},[57,498,431],{"class":67},[57,500,82],{"class":63},[44,502,503,504,507],{},"Ici, l'image garde sa largeur de 6 rem (",[22,505,506],{},"w-24",") et le bloc de texte occupe tout l'espace disponible.",[509,510,511],"note",{},[44,512,513,514,517,518,520,521,523,524,527,528,531,532,534],{},"L'",[201,515,516],{},"axe principal"," est la direction du conteneur : horizontal avec ",[22,519,24],{},", vertical avec ",[22,522,271],{},". ",[22,525,526],{},"justify-*"," agit sur cet axe, ",[22,529,530],{},"items-*"," sur l'autre. Quand tu passes en ",[22,533,271],{},", les deux s'inversent.",[10,536,538],{"id":537},"grid-des-lignes-et-des-colonnes","Grid : des lignes et des colonnes",[44,540,541,542,544],{},"Pour afficher les recettes en grille, ",[22,543,31],{}," est plus simple :",[48,546,548],{"className":50,"code":547,"language":52,"meta":53,"style":53},"\u003Cul class=\"grid grid-cols-3 gap-4\">\n  \u003Cli class=\"rounded-lg border p-4\">Crêpes\u003C\u002Fli>\n  \u003Cli class=\"rounded-lg border p-4\">Quiche\u003C\u002Fli>\n  \u003Cli class=\"rounded-lg border p-4\">Ratatouille\u003C\u002Fli>\n  \u003Cli class=\"rounded-lg border p-4\">Tarte aux pommes\u003C\u002Fli>\n\u003C\u002Ful>\n",[22,549,550,565,585,604,623,642],{"__ignoreMap":53},[57,551,552,554,556,558,560,563],{"class":59,"line":60},[57,553,64],{"class":63},[57,555,15],{"class":67},[57,557,72],{"class":71},[57,559,75],{"class":63},[57,561,562],{"class":78},"\"grid grid-cols-3 gap-4\"",[57,564,82],{"class":63},[57,566,567,569,571,573,575,578,581,583],{"class":59,"line":85},[57,568,88],{"class":63},[57,570,18],{"class":67},[57,572,72],{"class":71},[57,574,75],{"class":63},[57,576,577],{"class":78},"\"rounded-lg border p-4\"",[57,579,580],{"class":63},">Crêpes\u003C\u002F",[57,582,18],{"class":67},[57,584,82],{"class":63},[57,586,587,589,591,593,595,597,600,602],{"class":59,"line":116},[57,588,88],{"class":63},[57,590,18],{"class":67},[57,592,72],{"class":71},[57,594,75],{"class":63},[57,596,577],{"class":78},[57,598,599],{"class":63},">Quiche\u003C\u002F",[57,601,18],{"class":67},[57,603,82],{"class":63},[57,605,606,608,610,612,614,616,619,621],{"class":59,"line":133},[57,607,88],{"class":63},[57,609,18],{"class":67},[57,611,72],{"class":71},[57,613,75],{"class":63},[57,615,577],{"class":78},[57,617,618],{"class":63},">Ratatouille\u003C\u002F",[57,620,18],{"class":67},[57,622,82],{"class":63},[57,624,625,627,629,631,633,635,638,640],{"class":59,"line":155},[57,626,88],{"class":63},[57,628,18],{"class":67},[57,630,72],{"class":71},[57,632,75],{"class":63},[57,634,577],{"class":78},[57,636,637],{"class":63},">Tarte aux pommes\u003C\u002F",[57,639,18],{"class":67},[57,641,82],{"class":63},[57,643,644,646,648],{"class":59,"line":176},[57,645,189],{"class":63},[57,647,15],{"class":67},[57,649,82],{"class":63},[44,651,652,654,655,658,659,662],{},[22,653,31],{}," crée une ",[201,656,657],{},"grille",", ",[22,660,661],{},"grid-cols-3"," la découpe en 3 colonnes de même largeur. Les cartes se rangent de gauche à droite, puis passent à la ligne.",[44,664,665,668,669,672],{},[22,666,667],{},"grid-cols-\u003Cnombre>"," produit ",[22,670,671],{},"repeat(\u003Cnombre>, minmax(0, 1fr))"," : des colonnes égales qui se partagent la largeur.",[10,674,676],{"id":675},"étendre-une-case-sur-plusieurs-colonnes","Étendre une case sur plusieurs colonnes",[44,678,679,680,683],{},"Pour qu'une case occupe plusieurs colonnes, utilise ",[22,681,682],{},"col-span-*"," :",[48,685,687],{"className":50,"code":686,"language":52,"meta":53,"style":53},"\u003Cul class=\"grid grid-cols-3 gap-4\">\n  \u003Cli class=\"col-span-2\">Recette du jour\u003C\u002Fli>\n  \u003Cli>Autre recette\u003C\u002Fli>\n\u003C\u002Ful>\n",[22,688,689,703,723,736],{"__ignoreMap":53},[57,690,691,693,695,697,699,701],{"class":59,"line":60},[57,692,64],{"class":63},[57,694,15],{"class":67},[57,696,72],{"class":71},[57,698,75],{"class":63},[57,700,562],{"class":78},[57,702,82],{"class":63},[57,704,705,707,709,711,713,716,719,721],{"class":59,"line":85},[57,706,88],{"class":63},[57,708,18],{"class":67},[57,710,72],{"class":71},[57,712,75],{"class":63},[57,714,715],{"class":78},"\"col-span-2\"",[57,717,718],{"class":63},">Recette du jour\u003C\u002F",[57,720,18],{"class":67},[57,722,82],{"class":63},[57,724,725,727,729,732,734],{"class":59,"line":116},[57,726,88],{"class":63},[57,728,18],{"class":67},[57,730,731],{"class":63},">Autre recette\u003C\u002F",[57,733,18],{"class":67},[57,735,82],{"class":63},[57,737,738,740,742],{"class":59,"line":133},[57,739,189],{"class":63},[57,741,15],{"class":67},[57,743,82],{"class":63},[44,745,746,747,749],{},"La première case prend deux colonnes sur trois. ",[22,748,258],{}," règle l'espace entre les cases, dans les deux directions.",[10,751,753],{"id":752},"flex-ou-grid","Flex ou grid ?",[213,755,756,766],{},[216,757,758],{},[219,759,760,763],{},[222,761,762],{},"Besoin",[222,764,765],{},"Choix",[229,767,768,777,787,797],{},[219,769,770,773],{},[234,771,772],{},"Aligner quelques éléments sur une ligne (menu, barre d'outils)",[234,774,775],{},[22,776,24],{},[219,778,779,782],{},[234,780,781],{},"Empiler des éléments avec un espace régulier",[234,783,784],{},[22,785,786],{},"flex flex-col gap-*",[219,788,789,792],{},[234,790,791],{},"Une grille de cartes de même taille",[234,793,794],{},[22,795,796],{},"grid grid-cols-*",[219,798,799,802],{},[234,800,801],{},"Un contenu qui doit remplir l'espace restant",[234,803,804,32,806],{},[22,805,24],{},[22,807,411],{},[44,809,810],{},"Règle simple : flex pour une dimension (une ligne ou une colonne), grid pour deux (lignes et colonnes). Tu peux aussi les imbriquer : une grille de cartes, dont chaque carte est un conteneur flex.",[10,812,814],{"id":813},"centrer-un-élément","Centrer un élément",[44,816,817],{},"Un cas très fréquent : centrer un bloc au milieu de l'écran.",[48,819,821],{"className":50,"code":820,"language":52,"meta":53,"style":53},"\u003Cmain class=\"flex min-h-screen items-center justify-center\">\n  \u003Cp>Aucune recette trouvée.\u003C\u002Fp>\n\u003C\u002Fmain>\n",[22,822,823,839,852],{"__ignoreMap":53},[57,824,825,827,830,832,834,837],{"class":59,"line":60},[57,826,64],{"class":63},[57,828,829],{"class":67},"main",[57,831,72],{"class":71},[57,833,75],{"class":63},[57,835,836],{"class":78},"\"flex min-h-screen items-center justify-center\"",[57,838,82],{"class":63},[57,840,841,843,845,848,850],{"class":59,"line":85},[57,842,88],{"class":63},[57,844,44],{"class":67},[57,846,847],{"class":63},">Aucune recette trouvée.\u003C\u002F",[57,849,44],{"class":67},[57,851,82],{"class":63},[57,853,854,856,858],{"class":59,"line":116},[57,855,189],{"class":63},[57,857,829],{"class":67},[57,859,82],{"class":63},[44,861,862,865],{},[22,863,864],{},"min-h-screen"," donne au conteneur au moins la hauteur de l'écran, ce qui permet de centrer verticalement.",[867,868,869],"tip",{},[44,870,871,872,875],{},"Quand tu hésites sur un alignement, essaie d'abord ",[22,873,874],{},"flex items-center justify-center"," : c'est la combinaison qui centre un contenu dans les deux sens.",[10,877,879],{"id":878},"à-retenir","À retenir",[15,881,882,890,898,904,914],{},[18,883,884,886,887,889],{},[22,885,24],{}," place les enfants sur une ligne ; ",[22,888,271],{}," les empile.",[18,891,892,894,895,897],{},[22,893,526],{}," répartit sur l'axe principal, ",[22,896,530],{}," aligne sur l'axe secondaire.",[18,899,900,903],{},[22,901,902],{},"gap-*"," met un espace régulier entre les enfants, sans marges à gérer.",[18,905,906,909,910,913],{},[22,907,908],{},"grid grid-cols-3"," crée trois colonnes égales ; ",[22,911,912],{},"col-span-2"," fait occuper deux colonnes à une case.",[18,915,916],{},"Flex pour une direction, grid pour une grille ; les deux se combinent.",[918,919,920],"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":116,"links":922},[923,924,925,926,927,928,929,930,931],{"id":12,"depth":85,"text":13},{"id":41,"depth":85,"text":42},{"id":264,"depth":85,"text":265},{"id":348,"depth":85,"text":349},{"id":537,"depth":85,"text":538},{"id":675,"depth":85,"text":676},{"id":752,"depth":85,"text":753},{"id":813,"depth":85,"text":814},{"id":878,"depth":85,"text":879},"Aligner et répartir des éléments avec les classes flex et grid de Tailwind CSS 4, sur une liste de recettes.","md","tailwind",{},[24,31,248,238,937,938,369,939],"gap","grid-cols","mise en page",true,"debutant","\u002Ftailwind\u002Fflex-et-grid",[944],"\u002Ftailwind\u002Fespacements-couleurs-typographie",[946,950],{"nom":947,"url":948,"type":949},"Grafikart, TailwindCSS 4, nouvelle configuration","https:\u002F\u002Fgrafikart.fr\u002Ftutoriels\u002Ftailwindcss-v4-2265","video",{"nom":951,"url":952,"type":953,"anglais":940},"Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs","doc",{"title":5,"description":932},[956,959],{"nom":957,"url":958},"Flex, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fflex",{"nom":960,"url":961},"Grid template columns, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fgrid-template-columns","tailwind\u002F03.flex-et-grid","MNWOq16JexOPnoyUcnUO-i6vwRvvBD2sAHn6mx0gVV4",[965,969,972,973,977,981],{"path":966,"title":967,"stem":968},"\u002Ftailwind\u002Fprincipe-et-installation","Principe et installation","tailwind\u002F01.principe-et-installation",{"path":944,"title":970,"stem":971},"Espacements, couleurs et typographie","tailwind\u002F02.espacements-couleurs-typographie",{"path":942,"title":5,"stem":962},{"path":974,"title":975,"stem":976},"\u002Ftailwind\u002Fpersonnaliser-le-theme","Personnaliser le thème avec @theme","tailwind\u002F05.personnaliser-le-theme",{"path":978,"title":979,"stem":980},"\u002Ftailwind\u002Fbonnes-pratiques","Bonnes pratiques","tailwind\u002F06.bonnes-pratiques",{"path":982,"title":983,"stem":984},"\u002Ftailwind","Tailwind CSS","tailwind\u002Findex",[986,988],{"title":970,"path":944,"stem":971,"description":987,"children":-1},"Les classes de base de Tailwind CSS 4 pour espacer, colorer et mettre en forme du texte, avec l'échelle de valeurs.",{"title":975,"path":974,"stem":976,"description":989,"children":-1},"Ajouter tes couleurs, polices et seuils responsive dans le CSS avec la directive @theme de Tailwind CSS 4, et contrôler le mode sombre.",[991],{"path":944,"title":970,"ligne":934},[993,994,995,996,998,1000],{"path":966,"title":967,"niveau":941,"stem":968},{"path":944,"title":970,"niveau":941,"stem":971},{"path":942,"title":5,"niveau":941,"stem":962},{"path":974,"title":975,"niveau":997,"stem":976},"intermediaire",{"path":978,"title":979,"niveau":999,"stem":980},"avance",{"path":982,"title":983,"niveau":1001,"stem":984},"memo",1794583444133]