[{"data":1,"prerenderedAt":910},["ShallowReactive",2],{"page-\u002Ftailwind\u002Fpersonnaliser-le-theme":3,"pieces-tailwind":869,"autour-\u002Ftailwind\u002Fpersonnaliser-le-theme":891,"prerequis-\u002Ftailwind\u002Fpersonnaliser-le-theme":896,"plan-tailwind":900},{"id":4,"title":5,"body":6,"description":837,"extension":838,"ligne":839,"meta":840,"motsCles":841,"navigation":76,"niveau":844,"path":845,"prerequis":846,"ressources":848,"seo":857,"sources":858,"stem":867,"__hash__":868},"docs\u002Ftailwind\u002F05.personnaliser-le-theme.md","Personnaliser le thème avec @theme",{"type":7,"value":8,"toc":825},"minimark",[9,14,32,36,44,121,147,151,158,274,285,289,336,349,359,363,377,441,457,463,467,477,507,514,518,525,570,583,587,590,621,624,628,638,659,668,745,748,760,775,779,821],[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",{},"Déclarer tes propres couleurs, polices et seuils avec ",[22,23,24],"code",{},"@theme",".",[18,27,28],{},"Remplacer les valeurs par défaut au lieu de les compléter.",[18,30,31],{},"Piloter le mode sombre avec une classe ou un attribut.",[10,33,35],{"id":34},"où-se-règle-le-thème","Où se règle le thème",[37,38,39,40,43],"p",{},"Avec Tailwind CSS 4, le thème se configure dans ton fichier CSS, juste après l'import. Plus besoin d'un fichier ",[22,41,42],{},"tailwind.config.js"," par défaut.",[45,46,52],"pre",{"className":47,"code":48,"filename":49,"language":50,"meta":51,"style":51},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default","@import \"tailwindcss\";\n\n@theme {\n  --color-mint-500: oklch(0.72 0.11 178);\n}\n","app\u002Fassets\u002Fcss\u002Fmain.css","css","",[22,53,54,71,78,86,115],{"__ignoreMap":51},[55,56,59,63,67],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"sOnC1","@import",[55,64,66],{"class":65},"shWOn"," \"tailwindcss\"",[55,68,70],{"class":69},"scfrF",";\n",[55,72,74],{"class":57,"line":73},2,[55,75,77],{"emptyLinePlaceholder":76},true,"\n",[55,79,81,83],{"class":57,"line":80},3,[55,82,24],{"class":61},[55,84,85],{"class":69}," {\n",[55,87,89,93,96,100,103,106,109,112],{"class":57,"line":88},4,[55,90,92],{"class":91},"sIXEE","  --color-mint-500",[55,94,95],{"class":69},": ",[55,97,99],{"class":98},"s5iOY","oklch",[55,101,102],{"class":69},"(",[55,104,105],{"class":98},"0.72",[55,107,108],{"class":98}," 0.11",[55,110,111],{"class":98}," 178",[55,113,114],{"class":69},");\n",[55,116,118],{"class":57,"line":117},5,[55,119,120],{"class":69},"}\n",[37,122,123,124,126,127,131,132,135,136,139,140,143,144,25],{},"La directive ",[22,125,24],{}," déclare des ",[128,129,130],"strong",{},"variables de thème"," : des variables CSS que Tailwind transforme en classes. Ici, ",[22,133,134],{},"--color-mint-500"," rend disponibles ",[22,137,138],{},"bg-mint-500",", ",[22,141,142],{},"text-mint-500"," et ",[22,145,146],{},"fill-mint-500",[10,148,150],{"id":149},"le-nom-de-la-variable-décide-de-la-classe","Le nom de la variable décide de la classe",[37,152,153,154,157],{},"Le début du nom, appelé ",[128,155,156],{},"espace de noms",", indique quelles classes sont créées :",[159,160,161,174],"table",{},[162,163,164],"thead",{},[165,166,167,171],"tr",{},[168,169,170],"th",{},"Variable",[168,172,173],{},"Classes créées",[175,176,177,197,213,226,239,249,262],"tbody",{},[165,178,179,185],{},[180,181,182],"td",{},[22,183,184],{},"--color-*",[180,186,187,139,190,139,193,196],{},[22,188,189],{},"bg-",[22,191,192],{},"text-",[22,194,195],{},"border-"," avec cette couleur",[165,198,199,204],{},[180,200,201],{},[22,202,203],{},"--font-*",[180,205,206,139,209,212],{},[22,207,208],{},"font-sans",[22,210,211],{},"font-display","... (famille de police)",[165,214,215,220],{},[180,216,217],{},[22,218,219],{},"--text-*",[180,221,222,225],{},[22,223,224],{},"text-xl","... (taille de texte)",[165,227,228,233],{},[180,229,230],{},[22,231,232],{},"--breakpoint-*",[180,234,235,236],{},"les préfixes responsive comme ",[22,237,238],{},"sm:",[165,240,241,246],{},[180,242,243],{},[22,244,245],{},"--spacing",[180,247,248],{},"l'unité de base des espacements",[165,250,251,256],{},[180,252,253],{},[22,254,255],{},"--radius-*",[180,257,258,261],{},[22,259,260],{},"rounded-sm","...",[165,263,264,269],{},[180,265,266],{},[22,267,268],{},"--shadow-*",[180,270,271,261],{},[22,272,273],{},"shadow-md",[37,275,276,277,280,281,284],{},"Si tu écris ",[22,278,279],{},"--color-tomate-600",", tu obtiens ",[22,282,283],{},"bg-tomate-600",". Tu choisis le nom, Tailwind fabrique les classes.",[10,286,288],{"id":287},"ajouter-une-police-et-un-seuil","Ajouter une police et un seuil",[45,290,292],{"className":47,"code":291,"language":50,"meta":51,"style":51},"@theme {\n  --font-display: \"Satoshi\", \"sans-serif\";\n  --breakpoint-3xl: 120rem;\n}\n",[22,293,294,300,317,332],{"__ignoreMap":51},[55,295,296,298],{"class":57,"line":58},[55,297,24],{"class":61},[55,299,85],{"class":69},[55,301,302,305,307,310,312,315],{"class":57,"line":73},[55,303,304],{"class":91},"  --font-display",[55,306,95],{"class":69},[55,308,309],{"class":65},"\"Satoshi\"",[55,311,139],{"class":69},[55,313,314],{"class":65},"\"sans-serif\"",[55,316,70],{"class":69},[55,318,319,322,324,327,330],{"class":57,"line":80},[55,320,321],{"class":91},"  --breakpoint-3xl",[55,323,95],{"class":69},[55,325,326],{"class":98},"120",[55,328,329],{"class":61},"rem",[55,331,70],{"class":69},[55,333,334],{"class":57,"line":88},[55,335,120],{"class":69},[37,337,338,339,341,342,345,346,25],{},"La première ligne crée la classe ",[22,340,211],{},". La seconde crée le préfixe ",[22,343,344],{},"3xl:",", utilisable comme ",[22,347,348],{},"3xl:grid-cols-6",[37,350,351,352,355,356,358],{},"Tu peux aussi changer un seuil existant, par exemple ",[22,353,354],{},"--breakpoint-2xl: 100rem;",". Garde la même unité (la ",[22,357,329],{},") pour tous les seuils, sinon l'ordre des classes générées peut se mélanger.",[10,360,362],{"id":361},"ajouter-ou-remplacer","Ajouter ou remplacer",[37,364,365,366,368,369,372,373,376],{},"Par défaut, ",[22,367,24],{}," complète le thème existant : ",[22,370,371],{},"bg-red-500"," marche toujours. Pour repartir de zéro, vide d'abord l'espace de noms avec ",[22,374,375],{},"initial"," :",[45,378,380],{"className":47,"code":379,"language":50,"meta":51,"style":51},"@theme {\n  --color-*: initial;\n  --color-white: #fff;\n  --color-tomate: #d6402b;\n  --color-creme: #f5e6d3;\n}\n",[22,381,382,388,400,412,424,436],{"__ignoreMap":51},[55,383,384,386],{"class":57,"line":58},[55,385,24],{"class":61},[55,387,85],{"class":69},[55,389,390,393,396,398],{"class":57,"line":73},[55,391,392],{"class":91},"  --color-",[55,394,395],{"class":69},"*: ",[55,397,375],{"class":98},[55,399,70],{"class":69},[55,401,402,405,407,410],{"class":57,"line":80},[55,403,404],{"class":91},"  --color-white",[55,406,95],{"class":69},[55,408,409],{"class":98},"#fff",[55,411,70],{"class":69},[55,413,414,417,419,422],{"class":57,"line":88},[55,415,416],{"class":91},"  --color-tomate",[55,418,95],{"class":69},[55,420,421],{"class":98},"#d6402b",[55,423,70],{"class":69},[55,425,426,429,431,434],{"class":57,"line":117},[55,427,428],{"class":91},"  --color-creme",[55,430,95],{"class":69},[55,432,433],{"class":98},"#f5e6d3",[55,435,70],{"class":69},[55,437,439],{"class":57,"line":438},6,[55,440,120],{"class":69},[37,442,443,444,139,447,143,450,453,454,456],{},"Il ne reste alors que ",[22,445,446],{},"bg-white",[22,448,449],{},"bg-tomate",[22,451,452],{},"bg-creme",". Les couleurs par défaut comme ",[22,455,371],{}," disparaissent.",[458,459,460],"note",{},[37,461,462],{},"Remplacer toutes les couleurs impose une charte stricte à l'équipe. En revanche, tu perds les nuances prêtes à l'emploi. À réserver aux projets qui ont une vraie identité visuelle.",[10,464,466],{"id":465},"changer-lunité-despacement","Changer l'unité d'espacement",[37,468,469,470,472,473,476],{},"L'unité de base des espacements est la variable ",[22,471,245],{},", qui vaut ",[22,474,475],{},"0.25rem"," par défaut. Tu peux la modifier :",[45,478,480],{"className":47,"code":479,"language":50,"meta":51,"style":51},"@theme {\n  --spacing: 1px;\n}\n",[22,481,482,488,503],{"__ignoreMap":51},[55,483,484,486],{"class":57,"line":58},[55,485,24],{"class":61},[55,487,85],{"class":69},[55,489,490,493,495,498,501],{"class":57,"line":73},[55,491,492],{"class":91},"  --spacing",[55,494,95],{"class":69},[55,496,497],{"class":98},"1",[55,499,500],{"class":61},"px",[55,502,70],{"class":69},[55,504,505],{"class":57,"line":80},[55,506,120],{"class":69},[37,508,509,510,513],{},"Avec cette valeur, ",[22,511,512],{},"p-4"," donnerait 4 px au lieu de 1 rem. Cette réécriture est rare : change-la seulement si tu sais ce que tu fais.",[10,515,517],{"id":516},"utiliser-une-variable-existante-inline","Utiliser une variable existante : inline",[37,519,520,521,524],{},"Une police chargée par une autre variable CSS peut poser problème. Ajoute le mot ",[22,522,523],{},"inline"," pour que la classe utilise directement la valeur :",[45,526,528],{"className":47,"code":527,"language":50,"meta":51,"style":51},"@import \"tailwindcss\";\n\n@theme inline {\n  --font-sans: var(--font-inter);\n}\n",[22,529,530,538,542,549,566],{"__ignoreMap":51},[55,531,532,534,536],{"class":57,"line":58},[55,533,62],{"class":61},[55,535,66],{"class":65},[55,537,70],{"class":69},[55,539,540],{"class":57,"line":73},[55,541,77],{"emptyLinePlaceholder":76},[55,543,544,546],{"class":57,"line":80},[55,545,24],{"class":61},[55,547,548],{"class":69}," inline {\n",[55,550,551,554,556,559,561,564],{"class":57,"line":88},[55,552,553],{"class":91},"  --font-sans",[55,555,95],{"class":69},[55,557,558],{"class":98},"var",[55,560,102],{"class":69},[55,562,563],{"class":91},"--font-inter",[55,565,114],{"class":69},[55,567,568],{"class":57,"line":117},[55,569,120],{"class":69},[37,571,572,573,575,576,578,579,582],{},"Avec ",[22,574,523],{},", la classe ",[22,577,208],{}," produit ",[22,580,581],{},"font-family: var(--font-inter);",". Sans lui, la valeur peut se résoudre de façon inattendue, à cause de la manière dont les variables CSS se transmettent dans l'arbre HTML.",[10,584,586],{"id":585},"utiliser-tes-variables-en-css","Utiliser tes variables en CSS",[37,588,589],{},"Les variables de thème sont de vraies variables CSS. Tu peux les lire dans ton propre CSS :",[45,591,593],{"className":47,"code":592,"language":50,"meta":51,"style":51},".bandeau {\n  background-color: var(--color-mint-500);\n}\n",[22,594,595,602,617],{"__ignoreMap":51},[55,596,597,600],{"class":57,"line":58},[55,598,599],{"class":98},".bandeau",[55,601,85],{"class":69},[55,603,604,607,609,611,613,615],{"class":57,"line":73},[55,605,606],{"class":98},"  background-color",[55,608,95],{"class":69},[55,610,558],{"class":98},[55,612,102],{"class":69},[55,614,134],{"class":91},[55,616,114],{"class":69},[55,618,619],{"class":57,"line":80},[55,620,120],{"class":69},[37,622,623],{},"C'est utile pour une règle qui ne se réduit pas à une classe.",[10,625,627],{"id":626},"piloter-le-mode-sombre","Piloter le mode sombre",[37,629,365,630,633,634,637],{},[22,631,632],{},"dark:"," suit le réglage du système. Pour le déclencher avec une classe ",[22,635,636],{},"dark"," posée sur la page, redéfinis la variante :",[45,639,641],{"className":47,"code":640,"filename":49,"language":50,"meta":51,"style":51},"@import \"tailwindcss\";\n@custom-variant dark (&:where(.dark, .dark *));\n",[22,642,643,651],{"__ignoreMap":51},[55,644,645,647,649],{"class":57,"line":58},[55,646,62],{"class":61},[55,648,66],{"class":65},[55,650,70],{"class":69},[55,652,653,656],{"class":57,"line":73},[55,654,655],{"class":61},"@custom-variant",[55,657,658],{"class":69}," dark (&:where(.dark, .dark *));\n",[37,660,661,662,664,665,667],{},"Les classes ",[22,663,632],{}," s'appliquent alors quand ",[22,666,636],{}," est présente sur l'élément ou sur l'un de ses parents :",[45,669,673],{"className":670,"code":671,"language":672,"meta":51,"style":51},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Chtml class=\"dark\">\n  \u003Cbody>\n    \u003Cdiv class=\"bg-white dark:bg-black\">...\u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[22,674,675,695,705,727,736],{"__ignoreMap":51},[55,676,677,680,683,686,689,692],{"class":57,"line":58},[55,678,679],{"class":69},"\u003C",[55,681,672],{"class":682},"s5JFL",[55,684,685],{"class":98}," class",[55,687,688],{"class":69},"=",[55,690,691],{"class":65},"\"dark\"",[55,693,694],{"class":69},">\n",[55,696,697,700,703],{"class":57,"line":73},[55,698,699],{"class":69},"  \u003C",[55,701,702],{"class":682},"body",[55,704,694],{"class":69},[55,706,707,710,713,715,717,720,723,725],{"class":57,"line":80},[55,708,709],{"class":69},"    \u003C",[55,711,712],{"class":682},"div",[55,714,685],{"class":98},[55,716,688],{"class":69},[55,718,719],{"class":65},"\"bg-white dark:bg-black\"",[55,721,722],{"class":69},">...\u003C\u002F",[55,724,712],{"class":682},[55,726,694],{"class":69},[55,728,729,732,734],{"class":57,"line":88},[55,730,731],{"class":69},"  \u003C\u002F",[55,733,702],{"class":682},[55,735,694],{"class":69},[55,737,738,741,743],{"class":57,"line":117},[55,739,740],{"class":69},"\u003C\u002F",[55,742,672],{"class":682},[55,744,694],{"class":69},[37,746,747],{},"Un petit script ou un bouton ajoute ou retire cette classe. Pour utiliser un attribut à la place, écris :",[45,749,751],{"className":47,"code":750,"language":50,"meta":51,"style":51},"@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));\n",[22,752,753],{"__ignoreMap":51},[55,754,755,757],{"class":57,"line":58},[55,756,655],{"class":61},[55,758,759],{"class":69}," dark (&:where([data-theme=dark], [data-theme=dark] *));\n",[761,762,763],"tip",{},[37,764,765,767,768,771,772,25],{},[22,766,655],{}," sert aussi à inventer tes variantes. Par exemple ",[22,769,770],{},"@custom-variant theme-midnight (&:where([data-theme=\"midnight\"] *));"," crée ",[22,773,774],{},"theme-midnight:bg-black",[10,776,778],{"id":777},"à-retenir","À retenir",[15,780,781,790,803,809,815],{},[18,782,783,784,786,787,25],{},"Le thème se règle dans le CSS avec ",[22,785,24],{},", après ",[22,788,789],{},"@import \"tailwindcss\";",[18,791,792,793,139,796,139,799,802],{},"Le début du nom de la variable (",[22,794,795],{},"--color-",[22,797,798],{},"--font-",[22,800,801],{},"--breakpoint-",") détermine les classes créées.",[18,804,805,808],{},[22,806,807],{},"--color-*: initial;"," retire les couleurs par défaut avant d'ajouter les tiennes.",[18,810,811,814],{},[22,812,813],{},"@theme inline"," fait utiliser la valeur directement, utile pour référencer une autre variable.",[18,816,817,820],{},[22,818,819],{},"@custom-variant dark"," permet de piloter le mode sombre par une classe ou un attribut.",[822,823,824],"style",{},"html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}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 .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}",{"title":51,"searchDepth":73,"depth":80,"links":826},[827,828,829,830,831,832,833,834,835,836],{"id":12,"depth":73,"text":13},{"id":34,"depth":73,"text":35},{"id":149,"depth":73,"text":150},{"id":287,"depth":73,"text":288},{"id":361,"depth":73,"text":362},{"id":465,"depth":73,"text":466},{"id":516,"depth":73,"text":517},{"id":585,"depth":73,"text":586},{"id":626,"depth":73,"text":627},{"id":777,"depth":73,"text":778},"Ajouter tes couleurs, polices et seuils responsive dans le CSS avec la directive @theme de Tailwind CSS 4, et contrôler le mode sombre.","md","tailwind",{},[24,842,184,203,232,813,655,843],"variable de thème","mode sombre manuel","intermediaire","\u002Ftailwind\u002Fpersonnaliser-le-theme",[847],"\u002Ftailwind\u002Fetats-et-responsive",[849,853],{"nom":850,"url":851,"type":852},"Grafikart, TailwindCSS 4, nouvelle configuration","https:\u002F\u002Fgrafikart.fr\u002Ftutoriels\u002Ftailwindcss-v4-2265","video",{"nom":854,"url":855,"type":856,"anglais":76},"Documentation de Tailwind CSS, thème (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ftheme","doc",{"title":5,"description":837},[859,861,864],{"nom":860,"url":855},"Theme variables, Documentation de Tailwind CSS (en anglais)",{"nom":862,"url":863},"Functions and directives, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ffunctions-and-directives",{"nom":865,"url":866},"Dark mode, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fdark-mode","tailwind\u002F05.personnaliser-le-theme","b4EOOFgNrKFTxf29c38UWNaCA4ks0mgjHlIi3WwHc-0",[870,874,878,882,883,887],{"path":871,"title":872,"stem":873},"\u002Ftailwind\u002Fprincipe-et-installation","Principe et installation","tailwind\u002F01.principe-et-installation",{"path":875,"title":876,"stem":877},"\u002Ftailwind\u002Fespacements-couleurs-typographie","Espacements, couleurs et typographie","tailwind\u002F02.espacements-couleurs-typographie",{"path":879,"title":880,"stem":881},"\u002Ftailwind\u002Fflex-et-grid","Mise en page avec flex et grid","tailwind\u002F03.flex-et-grid",{"path":845,"title":5,"stem":867},{"path":884,"title":885,"stem":886},"\u002Ftailwind\u002Fbonnes-pratiques","Bonnes pratiques","tailwind\u002F06.bonnes-pratiques",{"path":888,"title":889,"stem":890},"\u002Ftailwind","Tailwind CSS","tailwind\u002Findex",[892,894],{"title":880,"path":879,"stem":881,"description":893,"children":-1},"Aligner et répartir des éléments avec les classes flex et grid de Tailwind CSS 4, sur une liste de recettes.",{"title":885,"path":884,"stem":886,"description":895,"children":-1},"Éviter la répétition avec des composants, comprendre pourquoi les classes dynamiques échouent et contrôler la détection avec @source.",[897],{"path":847,"title":898,"ligne":899},"Variantes d'état et responsive",null,[901,903,904,905,906,908],{"path":871,"title":872,"niveau":902,"stem":873},"debutant",{"path":875,"title":876,"niveau":902,"stem":877},{"path":879,"title":880,"niveau":902,"stem":881},{"path":845,"title":5,"niveau":844,"stem":867},{"path":884,"title":885,"niveau":907,"stem":886},"avance",{"path":888,"title":889,"niveau":909,"stem":890},"memo",1794583444261]