[{"data":1,"prerenderedAt":871},["ShallowReactive",2],{"page-\u002Ftailwind\u002Fetats-et-responsive":3,"pieces-null":868,"autour-\u002Ftailwind\u002Fetats-et-responsive":869,"prerequis-\u002Ftailwind\u002Fetats-et-responsive":870},{"id":4,"title":5,"body":6,"description":828,"extension":542,"ligne":829,"meta":830,"motsCles":829,"navigation":831,"niveau":829,"path":832,"prerequis":829,"ressources":829,"seo":833,"sources":829,"stem":866,"__hash__":867},"docs\u002Ftailwind\u002F04.etats-et-responsive.md","Variantes d'état et responsive",{"type":7,"value":8,"toc":815},"minimark",[9,14,43,47,56,108,115,119,122,211,214,264,270,274,285,364,367,371,378,438,443,447,513,516,529,533,544,579,593,597,607,640,643,647,650,675,681,685,764,770,774,811],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,36],"ul",{},[18,19,20],"li",{},"Appliquer un style seulement au survol, au focus ou sur un champ désactivé.",[18,22,23,24,28,29,28,32,35],{},"Adapter la mise en page à la taille de l'écran avec ",[25,26,27],"code",{},"sm:",", ",[25,30,31],{},"md:",[25,33,34],{},"lg:",".",[18,37,38,39,42],{},"Gérer le mode sombre avec ",[25,40,41],{},"dark:"," et combiner plusieurs variantes.",[10,44,46],{"id":45},"le-principe-un-préfixe","Le principe : un préfixe",[48,49,50,51,55],"p",{},"Une ",[52,53,54],"strong",{},"variante"," est un préfixe placé devant une classe. La classe ne s'applique que dans la situation décrite.",[57,58,63],"pre",{"className":59,"code":60,"language":61,"meta":62,"style":62},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cbutton class=\"bg-orange-500 hover:bg-orange-600\">\n  Voir la recette\n\u003C\u002Fbutton>\n","html","",[25,64,65,92,98],{"__ignoreMap":62},[66,67,70,74,78,82,85,89],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"scfrF","\u003C",[66,75,77],{"class":76},"s5JFL","button",[66,79,81],{"class":80},"s5iOY"," class",[66,83,84],{"class":72},"=",[66,86,88],{"class":87},"shWOn","\"bg-orange-500 hover:bg-orange-600\"",[66,90,91],{"class":72},">\n",[66,93,95],{"class":68,"line":94},2,[66,96,97],{"class":72},"  Voir la recette\n",[66,99,101,104,106],{"class":68,"line":100},3,[66,102,103],{"class":72},"\u003C\u002F",[66,105,77],{"class":76},[66,107,91],{"class":72},[48,109,110,111,114],{},"Le bouton est orange. Quand la souris passe dessus, il devient un peu plus foncé. Sans le préfixe ",[25,112,113],{},"hover:",", la classe s'appliquerait en permanence.",[10,116,118],{"id":117},"les-états-les-plus-utiles","Les états les plus utiles",[48,120,121],{},"Tailwind couvre les pseudo-classes CSS que tu connais :",[123,124,125,138],"table",{},[126,127,128],"thead",{},[129,130,131,135],"tr",{},[132,133,134],"th",{},"Préfixe",[132,136,137],{},"Situation",[139,140,141,151,161,171,181,191],"tbody",{},[129,142,143,148],{},[144,145,146],"td",{},[25,147,113],{},[144,149,150],{},"La souris est au-dessus",[129,152,153,158],{},[144,154,155],{},[25,156,157],{},"focus:",[144,159,160],{},"L'élément a le focus (clavier ou clic)",[129,162,163,168],{},[144,164,165],{},[25,166,167],{},"focus-visible:",[144,169,170],{},"Le focus est visible, surtout au clavier",[129,172,173,178],{},[144,174,175],{},[25,176,177],{},"active:",[144,179,180],{},"L'élément est en train d'être cliqué",[129,182,183,188],{},[144,184,185],{},[25,186,187],{},"disabled:",[144,189,190],{},"Le champ ou le bouton est désactivé",[129,192,193,208],{},[144,194,195,198,199,198,202,198,205],{},[25,196,197],{},"first:"," ",[25,200,201],{},"last:",[25,203,204],{},"odd:",[25,206,207],{},"even:",[144,209,210],{},"Position parmi les frères",[48,212,213],{},"Un bouton complet :",[57,215,217],{"className":59,"code":216,"language":61,"meta":62,"style":62},"\u003Cbutton\n  class=\"bg-violet-500 hover:bg-violet-600 focus:outline-2\n         focus:outline-offset-2 focus:outline-violet-500\n         active:bg-violet-700\">\n  Enregistrer\n\u003C\u002Fbutton>\n",[25,218,219,226,236,241,249,255],{"__ignoreMap":62},[66,220,221,223],{"class":68,"line":69},[66,222,73],{"class":72},[66,224,225],{"class":76},"button\n",[66,227,228,231,233],{"class":68,"line":94},[66,229,230],{"class":80},"  class",[66,232,84],{"class":72},[66,234,235],{"class":87},"\"bg-violet-500 hover:bg-violet-600 focus:outline-2\n",[66,237,238],{"class":68,"line":100},[66,239,240],{"class":87},"         focus:outline-offset-2 focus:outline-violet-500\n",[66,242,244,247],{"class":68,"line":243},4,[66,245,246],{"class":87},"         active:bg-violet-700\"",[66,248,91],{"class":72},[66,250,252],{"class":68,"line":251},5,[66,253,254],{"class":72},"  Enregistrer\n",[66,256,258,260,262],{"class":68,"line":257},6,[66,259,103],{"class":72},[66,261,77],{"class":76},[66,263,91],{"class":72},[265,266,267],"tip",{},[48,268,269],{},"Ne supprime jamais l'indicateur de focus sans le remplacer. Les personnes qui naviguent au clavier en ont besoin pour savoir où elles sont.",[10,271,273],{"id":272},"styler-selon-le-parent-group","Styler selon le parent : group",[48,275,276,277,280,281,284],{},"Parfois, un enfant doit réagir quand c'est le parent qui est survolé. Marque le parent avec ",[25,278,279],{},"group",", puis utilise ",[25,282,283],{},"group-hover:"," sur l'enfant :",[57,286,288],{"className":59,"code":287,"language":61,"meta":62,"style":62},"\u003Ca href=\"\u002Frecettes\u002Fcrepes\" class=\"group block rounded-lg border p-4\">\n  \u003Ch3 class=\"text-gray-900 group-hover:text-orange-600\">Crêpes\u003C\u002Fh3>\n  \u003Cp class=\"text-gray-500 group-hover:text-gray-900\">Prêtes en 15 minutes.\u003C\u002Fp>\n\u003C\u002Fa>\n",[25,289,290,314,336,356],{"__ignoreMap":62},[66,291,292,294,297,300,302,305,307,309,312],{"class":68,"line":69},[66,293,73],{"class":72},[66,295,296],{"class":76},"a",[66,298,299],{"class":80}," href",[66,301,84],{"class":72},[66,303,304],{"class":87},"\"\u002Frecettes\u002Fcrepes\"",[66,306,81],{"class":80},[66,308,84],{"class":72},[66,310,311],{"class":87},"\"group block rounded-lg border p-4\"",[66,313,91],{"class":72},[66,315,316,319,322,324,326,329,332,334],{"class":68,"line":94},[66,317,318],{"class":72},"  \u003C",[66,320,321],{"class":76},"h3",[66,323,81],{"class":80},[66,325,84],{"class":72},[66,327,328],{"class":87},"\"text-gray-900 group-hover:text-orange-600\"",[66,330,331],{"class":72},">Crêpes\u003C\u002F",[66,333,321],{"class":76},[66,335,91],{"class":72},[66,337,338,340,342,344,346,349,352,354],{"class":68,"line":100},[66,339,318],{"class":72},[66,341,48],{"class":76},[66,343,81],{"class":80},[66,345,84],{"class":72},[66,347,348],{"class":87},"\"text-gray-500 group-hover:text-gray-900\"",[66,350,351],{"class":72},">Prêtes en 15 minutes.\u003C\u002F",[66,353,48],{"class":76},[66,355,91],{"class":72},[66,357,358,360,362],{"class":68,"line":243},[66,359,103],{"class":72},[66,361,296],{"class":76},[66,363,91],{"class":72},[48,365,366],{},"Quand on survole n'importe où dans la carte, le titre et le texte changent de couleur.",[10,368,370],{"id":369},"le-responsive-mobile-dabord","Le responsive : mobile d'abord",[48,372,373,374,377],{},"Tailwind est ",[52,375,376],{},"mobile first"," : une classe sans préfixe s'applique à toutes les tailles d'écran, et un préfixe s'applique à partir d'un seuil. Les seuils par défaut sont :",[123,379,380,389],{},[126,381,382],{},[129,383,384,386],{},[132,385,134],{},[132,387,388],{},"À partir de",[139,390,391,400,409,418,428],{},[129,392,393,397],{},[144,394,395],{},[25,396,27],{},[144,398,399],{},"40 rem (640 px)",[129,401,402,406],{},[144,403,404],{},[25,405,31],{},[144,407,408],{},"48 rem (768 px)",[129,410,411,415],{},[144,412,413],{},[25,414,34],{},[144,416,417],{},"64 rem (1024 px)",[129,419,420,425],{},[144,421,422],{},[25,423,424],{},"xl:",[144,426,427],{},"80 rem (1280 px)",[129,429,430,435],{},[144,431,432],{},[25,433,434],{},"2xl:",[144,436,437],{},"96 rem (1536 px)",[48,439,440,442],{},[25,441,31],{}," veut dire « à partir de la taille moyenne », pas « sur les écrans moyens ».",[10,444,446],{"id":445},"une-grille-qui-sadapte","Une grille qui s'adapte",[57,448,450],{"className":59,"code":449,"language":61,"meta":62,"style":62},"\u003Cul class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n  \u003Cli>Crêpes\u003C\u002Fli>\n  \u003Cli>Quiche\u003C\u002Fli>\n  \u003Cli>Ratatouille\u003C\u002Fli>\n\u003C\u002Ful>\n",[25,451,452,467,479,492,505],{"__ignoreMap":62},[66,453,454,456,458,460,462,465],{"class":68,"line":69},[66,455,73],{"class":72},[66,457,15],{"class":76},[66,459,81],{"class":80},[66,461,84],{"class":72},[66,463,464],{"class":87},"\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\"",[66,466,91],{"class":72},[66,468,469,471,473,475,477],{"class":68,"line":94},[66,470,318],{"class":72},[66,472,18],{"class":76},[66,474,331],{"class":72},[66,476,18],{"class":76},[66,478,91],{"class":72},[66,480,481,483,485,488,490],{"class":68,"line":100},[66,482,318],{"class":72},[66,484,18],{"class":76},[66,486,487],{"class":72},">Quiche\u003C\u002F",[66,489,18],{"class":76},[66,491,91],{"class":72},[66,493,494,496,498,501,503],{"class":68,"line":243},[66,495,318],{"class":72},[66,497,18],{"class":76},[66,499,500],{"class":72},">Ratatouille\u003C\u002F",[66,502,18],{"class":76},[66,504,91],{"class":72},[66,506,507,509,511],{"class":68,"line":251},[66,508,103],{"class":72},[66,510,15],{"class":76},[66,512,91],{"class":72},[48,514,515],{},"Lis-la ainsi : une colonne par défaut (téléphone), deux colonnes à partir de 640 px, trois à partir de 1024 px. Tu écris d'abord le mobile, puis tu ajoutes ce qui change sur les grands écrans.",[517,518,519],"warning",{},[48,520,521,522,525,526,35],{},"Piège classique : ",[25,523,524],{},"sm:text-center"," ne centre pas le texte « sur mobile ». Il le centre à partir de 640 px. Pour centrer sur mobile puis aligner à gauche ensuite, écris ",[25,527,528],{},"text-center sm:text-left",[10,530,532],{"id":531},"cibler-un-intervalle","Cibler un intervalle",[48,534,535,536,539,540,543],{},"Le préfixe ",[25,537,538],{},"max-md:"," applique une classe seulement en dessous du seuil ",[25,541,542],{},"md",". On peut aussi empiler un seuil minimum et un maximum :",[57,545,547],{"className":59,"code":546,"language":61,"meta":62,"style":62},"\u003Cdiv class=\"md:max-xl:flex\">\n  \u003C!-- flex seulement entre md et xl -->\n\u003C\u002Fdiv>\n",[25,548,549,565,571],{"__ignoreMap":62},[66,550,551,553,556,558,560,563],{"class":68,"line":69},[66,552,73],{"class":72},[66,554,555],{"class":76},"div",[66,557,81],{"class":80},[66,559,84],{"class":72},[66,561,562],{"class":87},"\"md:max-xl:flex\"",[66,564,91],{"class":72},[66,566,567],{"class":68,"line":94},[66,568,570],{"class":569},"sd6ml","  \u003C!-- flex seulement entre md et xl -->\n",[66,572,573,575,577],{"class":68,"line":100},[66,574,103],{"class":72},[66,576,555],{"class":76},[66,578,91],{"class":72},[48,580,581,582,585,586,588,589,592],{},"Ici, ",[25,583,584],{},"flex"," s'applique à partir de ",[25,587,542],{}," jusqu'à ",[25,590,591],{},"xl"," exclu.",[10,594,596],{"id":595},"le-mode-sombre","Le mode sombre",[48,598,599,600,602,603,606],{},"Par défaut, ",[25,601,41],{}," suit le réglage du système de l'utilisateur (la fonction CSS ",[25,604,605],{},"prefers-color-scheme",") :",[57,608,610],{"className":59,"code":609,"language":61,"meta":62,"style":62},"\u003Cdiv class=\"bg-white text-gray-900 dark:bg-gray-900 dark:text-white\">\n  Recette du jour\n\u003C\u002Fdiv>\n",[25,611,612,627,632],{"__ignoreMap":62},[66,613,614,616,618,620,622,625],{"class":68,"line":69},[66,615,73],{"class":72},[66,617,555],{"class":76},[66,619,81],{"class":80},[66,621,84],{"class":72},[66,623,624],{"class":87},"\"bg-white text-gray-900 dark:bg-gray-900 dark:text-white\"",[66,626,91],{"class":72},[66,628,629],{"class":68,"line":94},[66,630,631],{"class":72},"  Recette du jour\n",[66,633,634,636,638],{"class":68,"line":100},[66,635,103],{"class":72},[66,637,555],{"class":76},[66,639,91],{"class":72},[48,641,642],{},"Un fond blanc avec un texte sombre le jour, l'inverse quand le système est en mode sombre. Pour un bouton de bascule manuel, le chapitre 5 explique comment changer ce comportement.",[10,644,646],{"id":645},"empiler-les-variantes","Empiler les variantes",[48,648,649],{},"Les préfixes se combinent, de gauche à droite :",[57,651,653],{"className":59,"code":652,"language":61,"meta":62,"style":62},"\u003Cbutton class=\"dark:md:hover:bg-fuchsia-600\">Enregistrer\u003C\u002Fbutton>\n",[25,654,655],{"__ignoreMap":62},[66,656,657,659,661,663,665,668,671,673],{"class":68,"line":69},[66,658,73],{"class":72},[66,660,77],{"class":76},[66,662,81],{"class":80},[66,664,84],{"class":72},[66,666,667],{"class":87},"\"dark:md:hover:bg-fuchsia-600\"",[66,669,670],{"class":72},">Enregistrer\u003C\u002F",[66,672,77],{"class":76},[66,674,91],{"class":72},[48,676,677,678,680],{},"Cette classe change le fond en fuchsia seulement en mode sombre, à partir de ",[25,679,542],{},", au survol. Plus tu empiles de préfixes, plus la classe est précise, mais plus elle devient difficile à lire. Deux préfixes suffisent le plus souvent.",[10,682,684],{"id":683},"un-exemple-complet","Un exemple complet",[57,686,688],{"className":59,"code":687,"language":61,"meta":62,"style":62},"\u003Carticle class=\"flex flex-col gap-2 rounded-lg border p-4\n                hover:shadow-md md:flex-row md:items-center\n                dark:border-gray-700\">\n  \u003Ch3 class=\"font-bold\">Quiche lorraine\u003C\u002Fh3>\n  \u003Cp class=\"text-gray-600 dark:text-gray-300\">45 minutes\u003C\u002Fp>\n\u003C\u002Farticle>\n",[25,689,690,704,709,716,736,756],{"__ignoreMap":62},[66,691,692,694,697,699,701],{"class":68,"line":69},[66,693,73],{"class":72},[66,695,696],{"class":76},"article",[66,698,81],{"class":80},[66,700,84],{"class":72},[66,702,703],{"class":87},"\"flex flex-col gap-2 rounded-lg border p-4\n",[66,705,706],{"class":68,"line":94},[66,707,708],{"class":87},"                hover:shadow-md md:flex-row md:items-center\n",[66,710,711,714],{"class":68,"line":100},[66,712,713],{"class":87},"                dark:border-gray-700\"",[66,715,91],{"class":72},[66,717,718,720,722,724,726,729,732,734],{"class":68,"line":243},[66,719,318],{"class":72},[66,721,321],{"class":76},[66,723,81],{"class":80},[66,725,84],{"class":72},[66,727,728],{"class":87},"\"font-bold\"",[66,730,731],{"class":72},">Quiche lorraine\u003C\u002F",[66,733,321],{"class":76},[66,735,91],{"class":72},[66,737,738,740,742,744,746,749,752,754],{"class":68,"line":251},[66,739,318],{"class":72},[66,741,48],{"class":76},[66,743,81],{"class":80},[66,745,84],{"class":72},[66,747,748],{"class":87},"\"text-gray-600 dark:text-gray-300\"",[66,750,751],{"class":72},">45 minutes\u003C\u002F",[66,753,48],{"class":76},[66,755,91],{"class":72},[66,757,758,760,762],{"class":68,"line":257},[66,759,103],{"class":72},[66,761,696],{"class":76},[66,763,91],{"class":72},[48,765,766,767,769],{},"La carte est en colonne sur mobile et en ligne à partir de ",[25,768,542],{},". Elle prend une ombre au survol et une bordure plus sombre en mode sombre.",[10,771,773],{"id":772},"à-retenir","À retenir",[15,775,776,782,790,796,804],{},[18,777,778,779,781],{},"Un préfixe comme ",[25,780,113],{}," limite une classe à une situation précise.",[18,783,784,786,787,789],{},[25,785,279],{}," sur le parent et ",[25,788,283],{}," sur l'enfant permettent de réagir au survol du parent.",[18,791,792,793,795],{},"Tailwind est mobile first : sans préfixe, la classe vaut partout ; ",[25,794,31],{}," signifie « à partir de 768 px ».",[18,797,798,800,801,803],{},[25,799,41],{}," suit par défaut le réglage du système, ",[25,802,538],{}," cible les écrans plus petits qu'un seuil.",[18,805,806,807,810],{},"Les préfixes s'empilent (",[25,808,809],{},"dark:md:hover:","), mais garde un code lisible avec deux ou trois au maximum.",[812,813,814],"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 .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}",{"title":62,"searchDepth":94,"depth":100,"links":816},[817,818,819,820,821,822,823,824,825,826,827],{"id":12,"depth":94,"text":13},{"id":45,"depth":94,"text":46},{"id":117,"depth":94,"text":118},{"id":272,"depth":94,"text":273},{"id":369,"depth":94,"text":370},{"id":445,"depth":94,"text":446},{"id":531,"depth":94,"text":532},{"id":595,"depth":94,"text":596},{"id":645,"depth":94,"text":646},{"id":683,"depth":94,"text":684},{"id":772,"depth":94,"text":773},"[object Object]",null,{},true,"\u002Ftailwind\u002Fetats-et-responsive",{"title":5,"description":834},{"Changer le style au survol, au focus, selon la taille d'écran ou en mode sombre avec les préfixes hover:, md":835},{"et dark":836,"ligne":837,"niveau":838,"motsCles":839,"prerequis":846,"sources":848,"ressources":858},"de Tailwind CSS 4.","tailwind","intermediaire",[54,840,841,842,376,843,844,845],"hover","focus","responsive","breakpoint","dark","group-hover",[847],"\u002Ftailwind\u002Fflex-et-grid",[849,852,855],{"nom":850,"url":851},"Hover, focus and other states, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fhover-focus-and-other-states",{"nom":853,"url":854},"Responsive design, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fresponsive-design",{"nom":856,"url":857},"Dark mode, Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fdark-mode",[859,862],{"nom":860,"url":851,"type":861,"anglais":831},"Documentation de Tailwind CSS, états et variantes (en anglais)","doc",{"nom":863,"url":864,"type":865},"MDN, Concevoir des mises en page adaptatives","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FCSS_layout\u002FResponsive_Design","cours","tailwind\u002F04.etats-et-responsive","vSpurlnJqmMYwPgIljvu_pf8jWilTfL7LbaVP_-XMtU",[],[829,829],[],1794583444755]