[{"data":1,"prerenderedAt":843},["ShallowReactive",2],{"page-\u002Ftailwind\u002Fbonnes-pratiques":3,"pieces-tailwind":806,"autour-\u002Ftailwind\u002Fbonnes-pratiques":827,"prerequis-\u002Ftailwind\u002Fbonnes-pratiques":831,"plan-tailwind":833},{"id":4,"title":5,"body":6,"description":774,"extension":775,"ligne":776,"meta":777,"motsCles":778,"navigation":782,"niveau":783,"path":784,"prerequis":785,"ressources":787,"seo":795,"sources":796,"stem":804,"__hash__":805},"docs\u002Ftailwind\u002F06.bonnes-pratiques.md","Bonnes pratiques",{"type":7,"value":8,"toc":761},"minimark",[9,14,36,40,44,125,128,132,184,191,296,300,308,365,376,380,386,415,418,431,435,442,445,471,482,485,509,513,516,567,574,580,584,590,613,620,632,636,639,658,680,684,687,715,718,722,757],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,26,29],"ul",{},[18,19,20,21,25],"li",{},"Réutiliser des styles avec des composants plutôt qu'avec ",[22,23,24],"code",{},"@apply",".",[18,27,28],{},"Écrire des classes qui seront bien détectées, même quand elles varient.",[18,30,31,32,35],{},"Utiliser ",[22,33,34],{},"@source"," pour dire à Tailwind où chercher.",[10,37,39],{"id":38},"le-problème-de-la-répétition","Le problème de la répétition",[41,42,43],"p",{},"La même liste de classes apparaît souvent dans plusieurs endroits :",[45,46,51],"pre",{"className":47,"code":48,"language":49,"meta":50,"style":50},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ca class=\"rounded-full bg-orange-500 px-5 py-2 font-semibold text-white hover:bg-orange-600\">Voir\u003C\u002Fa>\n\u003Ca class=\"rounded-full bg-orange-500 px-5 py-2 font-semibold text-white hover:bg-orange-600\">Lire\u003C\u002Fa>\n\u003Ca class=\"rounded-full bg-orange-500 px-5 py-2 font-semibold text-white hover:bg-orange-600\">Cuisiner\u003C\u002Fa>\n","html","",[22,52,53,85,105],{"__ignoreMap":50},[54,55,58,62,66,70,73,77,80,82],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"scfrF","\u003C",[54,63,65],{"class":64},"s5JFL","a",[54,67,69],{"class":68},"s5iOY"," class",[54,71,72],{"class":60},"=",[54,74,76],{"class":75},"shWOn","\"rounded-full bg-orange-500 px-5 py-2 font-semibold text-white hover:bg-orange-600\"",[54,78,79],{"class":60},">Voir\u003C\u002F",[54,81,65],{"class":64},[54,83,84],{"class":60},">\n",[54,86,88,90,92,94,96,98,101,103],{"class":56,"line":87},2,[54,89,61],{"class":60},[54,91,65],{"class":64},[54,93,69],{"class":68},[54,95,72],{"class":60},[54,97,76],{"class":75},[54,99,100],{"class":60},">Lire\u003C\u002F",[54,102,65],{"class":64},[54,104,84],{"class":60},[54,106,108,110,112,114,116,118,121,123],{"class":56,"line":107},3,[54,109,61],{"class":60},[54,111,65],{"class":64},[54,113,69],{"class":68},[54,115,72],{"class":60},[54,117,76],{"class":75},[54,119,120],{"class":60},">Cuisiner\u003C\u002F",[54,122,65],{"class":64},[54,124,84],{"class":60},[41,126,127],{},"Avant de chercher une astuce, demande-toi si c'est vraiment un problème. Les solutions ci-dessous suivent l'ordre conseillé par la documentation de Tailwind.",[10,129,131],{"id":130},"les-solutions-de-la-meilleure-à-la-dernière","Les solutions, de la meilleure à la dernière",[133,134,135,148],"table",{},[136,137,138],"thead",{},[139,140,141,145],"tr",{},[142,143,144],"th",{},"Situation",[142,146,147],{},"Solution",[149,150,151,160,168,176],"tbody",{},[139,152,153,157],{},[154,155,156],"td",{},"Le même élément dans une boucle",[154,158,159],{},"Écris-le une fois, dans la boucle",[139,161,162,165],{},[154,163,164],{},"Quelques éléments dans un seul fichier",[154,166,167],{},"Modifie-les ensemble (multi-curseur)",[139,169,170,173],{},[154,171,172],{},"Le même élément dans plusieurs fichiers",[154,174,175],{},"Un composant",[139,177,178,181],{},[154,179,180],{},"Un cas très simple, sans structure",[154,182,183],{},"Une classe CSS personnalisée",[41,185,186,187,190],{},"La boucle d'abord : en Vue, ",[22,188,189],{},"v-for"," écrit la liste de classes une seule fois.",[45,192,197],{"className":193,"code":194,"filename":195,"language":196,"meta":50,"style":50},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ctemplate>\n  \u003Cul class=\"grid gap-4 md:grid-cols-3\">\n    \u003Cli v-for=\"recette in recettes\" :key=\"recette.id\"\n        class=\"rounded-lg border p-4 shadow-md\">\n      {{ recette.titre }}\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n","app\u002Fpages\u002Frecettes\u002Findex.vue","vue",[22,198,199,208,224,247,260,266,276,286],{"__ignoreMap":50},[54,200,201,203,206],{"class":56,"line":57},[54,202,61],{"class":60},[54,204,205],{"class":64},"template",[54,207,84],{"class":60},[54,209,210,213,215,217,219,222],{"class":56,"line":87},[54,211,212],{"class":60},"  \u003C",[54,214,15],{"class":64},[54,216,69],{"class":68},[54,218,72],{"class":60},[54,220,221],{"class":75},"\"grid gap-4 md:grid-cols-3\"",[54,223,84],{"class":60},[54,225,226,229,231,234,236,239,242,244],{"class":56,"line":107},[54,227,228],{"class":60},"    \u003C",[54,230,18],{"class":64},[54,232,233],{"class":68}," v-for",[54,235,72],{"class":60},[54,237,238],{"class":75},"\"recette in recettes\"",[54,240,241],{"class":68}," :key",[54,243,72],{"class":60},[54,245,246],{"class":75},"\"recette.id\"\n",[54,248,250,253,255,258],{"class":56,"line":249},4,[54,251,252],{"class":68},"        class",[54,254,72],{"class":60},[54,256,257],{"class":75},"\"rounded-lg border p-4 shadow-md\"",[54,259,84],{"class":60},[54,261,263],{"class":56,"line":262},5,[54,264,265],{"class":60},"      {{ recette.titre }}\n",[54,267,269,272,274],{"class":56,"line":268},6,[54,270,271],{"class":60},"    \u003C\u002F",[54,273,18],{"class":64},[54,275,84],{"class":60},[54,277,279,282,284],{"class":56,"line":278},7,[54,280,281],{"class":60},"  \u003C\u002F",[54,283,15],{"class":64},[54,285,84],{"class":60},[54,287,289,292,294],{"class":56,"line":288},8,[54,290,291],{"class":60},"\u003C\u002F",[54,293,205],{"class":64},[54,295,84],{"class":60},[10,297,299],{"id":298},"préférer-un-composant","Préférer un composant",[41,301,302,303,307],{},"Quand le même bloc sert dans plusieurs fichiers, fais-en un ",[304,305,306],"strong",{},"composant"," : un fichier qui contient à la fois le HTML et ses classes.",[45,309,312],{"className":193,"code":310,"filename":311,"language":196,"meta":50,"style":50},"\u003Ctemplate>\n  \u003Ca class=\"rounded-full bg-orange-500 px-5 py-2 font-semibold text-white hover:bg-orange-600\">\n    \u003Cslot \u002F>\n  \u003C\u002Fa>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FBoutonPrincipal.vue",[22,313,314,322,336,349,357],{"__ignoreMap":50},[54,315,316,318,320],{"class":56,"line":57},[54,317,61],{"class":60},[54,319,205],{"class":64},[54,321,84],{"class":60},[54,323,324,326,328,330,332,334],{"class":56,"line":87},[54,325,212],{"class":60},[54,327,65],{"class":64},[54,329,69],{"class":68},[54,331,72],{"class":60},[54,333,76],{"class":75},[54,335,84],{"class":60},[54,337,338,340,343,347],{"class":56,"line":107},[54,339,228],{"class":60},[54,341,342],{"class":64},"slot",[54,344,346],{"class":345},"st2BK"," \u002F",[54,348,84],{"class":60},[54,350,351,353,355],{"class":56,"line":249},[54,352,281],{"class":60},[54,354,65],{"class":64},[54,356,84],{"class":60},[54,358,359,361,363],{"class":56,"line":262},[54,360,291],{"class":60},[54,362,205],{"class":64},[54,364,84],{"class":60},[41,366,367,368,371,372,375],{},"Dans une page, tu écris ",[22,369,370],{},"\u003CBoutonPrincipal>Voir\u003C\u002FBoutonPrincipal>",". Pour changer le bouton partout, tu modifies un seul fichier. Dans Nuxt, les composants de ",[22,373,374],{},"app\u002Fcomponents\u002F"," sont importés automatiquement.",[10,377,379],{"id":378},"et-apply","Et @apply ?",[41,381,382,383,385],{},"La directive ",[22,384,24],{}," copie des classes utilitaires dans une règle CSS à toi :",[45,387,391],{"className":388,"code":389,"language":390,"meta":50,"style":50},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default",".bouton-principal {\n  @apply rounded-full bg-orange-500 px-5 py-2 font-semibold text-white;\n}\n","css",[22,392,393,401,410],{"__ignoreMap":50},[54,394,395,398],{"class":56,"line":57},[54,396,397],{"class":68},".bouton-principal",[54,399,400],{"class":60}," {\n",[54,402,403,407],{"class":56,"line":87},[54,404,406],{"class":405},"sOnC1","  @apply",[54,408,409],{"class":60}," rounded-full bg-orange-500 px-5 py-2 font-semibold text-white;\n",[54,411,412],{"class":56,"line":107},[54,413,414],{"class":60},"}\n",[41,416,417],{},"Elle sert surtout à styler un code que tu ne contrôles pas, comme les classes d'une bibliothèque tierce. Pour tes propres éléments, un composant est préférable : tu gardes la structure et le style au même endroit, sans nommer de classe ni retourner chercher le CSS.",[419,420,421],"note",{},[41,422,423,424,427,428,25],{},"Dans la page « Reusing styles », la documentation de Tailwind recommande les boucles, puis les composants. Pour un cas simple, elle propose une classe CSS écrite dans ",[22,425,426],{},"@layer components",", qui s'appuie sur les variables du thème comme ",[22,429,430],{},"var(--color-violet-500)",[10,432,434],{"id":433},"les-classes-dynamiques-ne-sont-pas-détectées","Les classes dynamiques ne sont pas détectées",[41,436,437,438,441],{},"Tailwind ne fait pas tourner ton code. Il ",[304,439,440],{},"lit les fichiers comme du texte"," et cherche les mots qui ressemblent à des classes. Une classe qu'il ne voit pas écrite en entier n'est pas générée.",[41,443,444],{},"Ce code est faux :",[45,446,448],{"className":47,"code":447,"language":49,"meta":50,"style":50},"\u003Cdiv class=\"text-{{ erreur ? 'red' : 'green' }}-600\">\u003C\u002Fdiv>\n",[22,449,450],{"__ignoreMap":50},[54,451,452,454,457,459,461,464,467,469],{"class":56,"line":57},[54,453,61],{"class":60},[54,455,456],{"class":64},"div",[54,458,69],{"class":68},[54,460,72],{"class":60},[54,462,463],{"class":75},"\"text-{{ erreur ? 'red' : 'green' }}-600\"",[54,465,466],{"class":60},">\u003C\u002F",[54,468,456],{"class":64},[54,470,84],{"class":60},[41,472,473,474,477,478,481],{},"Les chaînes ",[22,475,476],{},"text-red-600"," et ",[22,479,480],{},"text-green-600"," n'existent nulle part dans le fichier. Tailwind ne les génère pas et le texte reste sans couleur.",[41,483,484],{},"Écris toujours les noms complets :",[45,486,488],{"className":47,"code":487,"language":49,"meta":50,"style":50},"\u003Cdiv class=\"{{ erreur ? 'text-red-600' : 'text-green-600' }}\">\u003C\u002Fdiv>\n",[22,489,490],{"__ignoreMap":50},[54,491,492,494,496,498,500,503,505,507],{"class":56,"line":57},[54,493,61],{"class":60},[54,495,456],{"class":64},[54,497,69],{"class":68},[54,499,72],{"class":60},[54,501,502],{"class":75},"\"{{ erreur ? 'text-red-600' : 'text-green-600' }}\"",[54,504,466],{"class":60},[54,506,456],{"class":64},[54,508,84],{"class":60},[10,510,512],{"id":511},"correspondre-une-propriété-à-des-classes-entières","Correspondre une propriété à des classes entières",[41,514,515],{},"Pour un composant dont la couleur change selon une propriété, associe chaque valeur à ses classes complètes :",[45,517,521],{"className":518,"code":519,"language":520,"meta":50,"style":50},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","const variantes = {\n  orange: \"bg-orange-600 hover:bg-orange-500\",\n  vert: \"bg-green-600 hover:bg-green-500\",\n}\n\u002F\u002F puis : variantes[couleur]\n","ts",[22,522,523,536,547,557,561],{"__ignoreMap":50},[54,524,525,528,531,534],{"class":56,"line":57},[54,526,527],{"class":405},"const",[54,529,530],{"class":68}," variantes",[54,532,533],{"class":405}," =",[54,535,400],{"class":60},[54,537,538,541,544],{"class":56,"line":87},[54,539,540],{"class":60},"  orange: ",[54,542,543],{"class":75},"\"bg-orange-600 hover:bg-orange-500\"",[54,545,546],{"class":60},",\n",[54,548,549,552,555],{"class":56,"line":107},[54,550,551],{"class":60},"  vert: ",[54,553,554],{"class":75},"\"bg-green-600 hover:bg-green-500\"",[54,556,546],{"class":60},[54,558,559],{"class":56,"line":249},[54,560,414],{"class":60},[54,562,563],{"class":56,"line":262},[54,564,566],{"class":565},"sd6ml","\u002F\u002F puis : variantes[couleur]\n",[41,568,569,570,573],{},"Évite la construction par morceaux, comme ",[22,571,572],{},"`bg-${couleur}-600`"," : les classes finales n'apparaissent jamais en entier.",[575,576,577],"warning",{},[41,578,579],{},"Si une couleur ou un style n'apparaît pas alors que la classe te semble correcte, cherche d'abord une classe assemblée à la volée.",[10,581,583],{"id":582},"source-indiquer-où-chercher","@source : indiquer où chercher",[41,585,586,587,589],{},"Tailwind analyse automatiquement les fichiers de ton projet. Pour qu'il lise aussi un dossier qu'il ignore, comme une bibliothèque installée, utilise ",[22,588,34],{}," :",[45,591,593],{"className":388,"code":592,"language":390,"meta":50,"style":50},"@import \"tailwindcss\";\n@source \"..\u002Fnode_modules\u002F@acmecorp\u002Fui-lib\";\n",[22,594,595,606],{"__ignoreMap":50},[54,596,597,600,603],{"class":56,"line":57},[54,598,599],{"class":405},"@import",[54,601,602],{"class":75}," \"tailwindcss\"",[54,604,605],{"class":60},";\n",[54,607,608,610],{"class":56,"line":87},[54,609,34],{"class":405},[54,611,612],{"class":60}," \"..\u002Fnode_modules\u002F@acmecorp\u002Fui-lib\";\n",[41,614,615,616,619],{},"Le chemin est relatif au fichier CSS. À l'inverse, ",[22,617,618],{},"@source not"," exclut un dossier :",[45,621,623],{"className":388,"code":622,"language":390,"meta":50,"style":50},"@source not \"..\u002Fsrc\u002Fcomponents\u002Flegacy\";\n",[22,624,625],{"__ignoreMap":50},[54,626,627,629],{"class":56,"line":57},[54,628,34],{"class":405},[54,630,631],{"class":60}," not \"..\u002Fsrc\u002Fcomponents\u002Flegacy\";\n",[10,633,635],{"id":634},"forcer-une-classe-source-inline","Forcer une classe : @source inline",[41,637,638],{},"Si une classe n'apparaît nulle part en entier dans ton code (par exemple lue depuis une base de données), force-la :",[45,640,642],{"className":388,"code":641,"language":390,"meta":50,"style":50},"@source inline(\"underline\");\n@source inline(\"{hover:,}bg-red-{50,{100..900..100},950}\");\n",[22,643,644,651],{"__ignoreMap":50},[54,645,646,648],{"class":56,"line":57},[54,647,34],{"class":405},[54,649,650],{"class":60}," inline(\"underline\");\n",[54,652,653,655],{"class":56,"line":87},[54,654,34],{"class":405},[54,656,657],{"class":60}," inline(\"{hover:,}bg-red-{50,{100..900..100},950}\");\n",[41,659,660,661,664,665,668,669,672,673,676,677,25],{},"La deuxième ligne génère ",[22,662,663],{},"bg-red-50",", ",[22,666,667],{},"bg-red-100"," à ",[22,670,671],{},"bg-red-900"," par pas de 100, ",[22,674,675],{},"bg-red-950",", et leurs versions ",[22,678,679],{},"hover:",[10,681,683],{"id":682},"désactiver-la-détection-automatique","Désactiver la détection automatique",[41,685,686],{},"Pour tout déclarer toi-même, par exemple avec plusieurs feuilles de style :",[45,688,690],{"className":388,"code":689,"language":390,"meta":50,"style":50},"@import \"tailwindcss\" source(none);\n@source \"..\u002Fadmin\";\n@source \"..\u002Fshared\";\n",[22,691,692,701,708],{"__ignoreMap":50},[54,693,694,696,698],{"class":56,"line":57},[54,695,599],{"class":405},[54,697,602],{"class":75},[54,699,700],{"class":60}," source(none);\n",[54,702,703,705],{"class":56,"line":87},[54,704,34],{"class":405},[54,706,707],{"class":60}," \"..\u002Fadmin\";\n",[54,709,710,712],{"class":56,"line":107},[54,711,34],{"class":405},[54,713,714],{"class":60}," \"..\u002Fshared\";\n",[41,716,717],{},"Chaque feuille ne contient alors que les classes de ses dossiers.",[10,719,721],{"id":720},"à-retenir","À retenir",[15,723,724,727,732,739,747],{},[18,725,726],{},"Une classe répétée n'est pas toujours un problème : une boucle règle déjà beaucoup de cas.",[18,728,729,730,25],{},"Pour réutiliser entre fichiers, fais un composant plutôt que ",[22,731,24],{},[18,733,734,735,738],{},"Tailwind lit le texte des fichiers : écris les noms de classes complets, jamais assemblés (",[22,736,737],{},"text-${x}-600",").",[18,740,741,743,744,746],{},[22,742,34],{}," ajoute un dossier à analyser, ",[22,745,618],{}," en exclut un.",[18,748,749,752,753,756],{},[22,750,751],{},"@source inline(...)"," force la génération d'une classe, et ",[22,754,755],{},"source(none)"," désactive la détection automatique.",[758,759,760],"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);}html pre.shiki code .st2BK, html code.shiki .st2BK{--shiki-light:#82071E;--shiki-light-font-style:italic;--shiki-default:#FFA198;--shiki-default-font-style:italic;--shiki-dark:#FFA198;--shiki-dark-font-style:italic}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}",{"title":50,"searchDepth":87,"depth":107,"links":762},[763,764,765,766,767,768,769,770,771,772,773],{"id":12,"depth":87,"text":13},{"id":38,"depth":87,"text":39},{"id":130,"depth":87,"text":131},{"id":298,"depth":87,"text":299},{"id":378,"depth":87,"text":379},{"id":433,"depth":87,"text":434},{"id":511,"depth":87,"text":512},{"id":582,"depth":87,"text":583},{"id":634,"depth":87,"text":635},{"id":682,"depth":87,"text":683},{"id":720,"depth":87,"text":721},"Éviter la répétition avec des composants, comprendre pourquoi les classes dynamiques échouent et contrôler la détection avec @source.","md","tailwind",{},[306,24,426,779,34,780,781,755],"classe dynamique","@source inline","détection des classes",true,"avance","\u002Ftailwind\u002Fbonnes-pratiques",[786],"\u002Ftailwind\u002Fpersonnaliser-le-theme",[788,792],{"nom":789,"url":790,"type":791,"anglais":782},"Documentation de Tailwind CSS, réutiliser les styles (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Freusing-styles","doc",{"nom":793,"url":794,"type":791,"anglais":782},"Documentation de Tailwind CSS, détection des classes (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fdetecting-classes-in-source-files",{"title":5,"description":774},[797,799,801],{"nom":798,"url":790},"Reusing styles, Documentation de Tailwind CSS (en anglais)",{"nom":800,"url":794},"Detecting classes in source files, Documentation de Tailwind CSS (en anglais)",{"nom":802,"url":803},"Functions and directives, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ffunctions-and-directives","tailwind\u002F06.bonnes-pratiques","ayBWiUFy3FYvYimWpgt14k9EijqoLwlvPd1utPFbhEM",[807,811,815,819,822,823],{"path":808,"title":809,"stem":810},"\u002Ftailwind\u002Fprincipe-et-installation","Principe et installation","tailwind\u002F01.principe-et-installation",{"path":812,"title":813,"stem":814},"\u002Ftailwind\u002Fespacements-couleurs-typographie","Espacements, couleurs et typographie","tailwind\u002F02.espacements-couleurs-typographie",{"path":816,"title":817,"stem":818},"\u002Ftailwind\u002Fflex-et-grid","Mise en page avec flex et grid","tailwind\u002F03.flex-et-grid",{"path":786,"title":820,"stem":821},"Personnaliser le thème avec @theme","tailwind\u002F05.personnaliser-le-theme",{"path":784,"title":5,"stem":804},{"path":824,"title":825,"stem":826},"\u002Ftailwind","Tailwind CSS","tailwind\u002Findex",[828,830],{"title":820,"path":786,"stem":821,"description":829,"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.",null,[832],{"path":786,"title":820,"ligne":776},[834,836,837,838,840,841],{"path":808,"title":809,"niveau":835,"stem":810},"debutant",{"path":812,"title":813,"niveau":835,"stem":814},{"path":816,"title":817,"niveau":835,"stem":818},{"path":786,"title":820,"niveau":839,"stem":821},"intermediaire",{"path":784,"title":5,"niveau":783,"stem":804},{"path":824,"title":825,"niveau":842,"stem":826},"memo",1794583444512]