[{"data":1,"prerenderedAt":786},["ShallowReactive",2],{"page-\u002Ftailwind":3,"pieces-tailwind":760,"autour-\u002Ftailwind":772,"prerequis-\u002Ftailwind":775,"plan-tailwind":776},{"id":4,"title":5,"body":6,"description":739,"extension":740,"ligne":741,"meta":742,"motsCles":743,"navigation":76,"niveau":750,"path":751,"prerequis":752,"ressources":752,"seo":753,"sources":754,"stem":758,"__hash__":759},"docs\u002Ftailwind\u002Findex.md","Tailwind CSS",{"type":7,"value":8,"toc":731},"minimark",[9,13,18,47,106,125,154,158,292,299,303,384,390,394,437,526,532,536,629,645,651,655,709,727],[10,11,12],"p",{},"Ce mémo résume les classes et directives de Tailwind CSS 4. Chaque section renvoie au chapitre qui l'explique en détail.",[14,15,17],"h2",{"id":16},"installation","Installation",[19,20,25],"pre",{"className":21,"code":22,"language":23,"meta":24,"style":24},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","npm install tailwindcss @tailwindcss\u002Fvite\n","bash","",[26,27,28],"code",{"__ignoreMap":24},[29,30,33,37,41,44],"span",{"class":31,"line":32},"line",1,[29,34,36],{"class":35},"sIXEE","npm",[29,38,40],{"class":39},"shWOn"," install",[29,42,43],{"class":39}," tailwindcss",[29,45,46],{"class":39}," @tailwindcss\u002Fvite\n",[19,48,53],{"className":49,"code":50,"filename":51,"language":52,"meta":24,"style":24},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","import tailwindcss from '@tailwindcss\u002Fvite'\n\nexport default defineConfig({ plugins: [tailwindcss()] })\n","vite.config.ts","ts",[26,54,55,71,78],{"__ignoreMap":24},[29,56,57,61,65,68],{"class":31,"line":32},[29,58,60],{"class":59},"sOnC1","import",[29,62,64],{"class":63},"scfrF"," tailwindcss ",[29,66,67],{"class":59},"from",[29,69,70],{"class":39}," '@tailwindcss\u002Fvite'\n",[29,72,74],{"class":31,"line":73},2,[29,75,77],{"emptyLinePlaceholder":76},true,"\n",[29,79,81,84,87,91,94,97,100,103],{"class":31,"line":80},3,[29,82,83],{"class":59},"export",[29,85,86],{"class":59}," default",[29,88,90],{"class":89},"syCW7"," defineConfig",[29,92,93],{"class":35},"({ ",[29,95,96],{"class":63},"plugins: [",[29,98,99],{"class":89},"tailwindcss",[29,101,102],{"class":63},"()] ",[29,104,105],{"class":35},"})\n",[19,107,112],{"className":108,"code":109,"filename":110,"language":111,"meta":24,"style":24},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default","@import \"tailwindcss\";\n","main.css","css",[26,113,114],{"__ignoreMap":24},[29,115,116,119,122],{"class":31,"line":32},[29,117,118],{"class":59},"@import",[29,120,121],{"class":39}," \"tailwindcss\"",[29,123,124],{"class":63},";\n",[10,126,127,128,131,132,135,136,139,140,143,144,147,148,153],{},"Dans Nuxt, le plugin va dans ",[26,129,130],{},"vite: { plugins: [tailwindcss()] }"," et le CSS dans ",[26,133,134],{},"css: ['~\u002Fassets\u002Fcss\u002Fmain.css']",". Avec Nuxt UI : module ",[26,137,138],{},"@nuxt\u002Fui",", ",[26,141,142],{},"@import \"@nuxt\u002Fui\";"," et ",[26,145,146],{},"\u003CUApp>",". Détails : ",[149,150,152],"a",{"href":151},"\u002Ftailwind\u002Fprincipe-et-installation","Principe et installation",".",[14,155,157],{"id":156},"espacements-couleurs-texte","Espacements, couleurs, texte",[159,160,161,174],"table",{},[162,163,164],"thead",{},[165,166,167,171],"tr",{},[168,169,170],"th",{},"Classe",[168,172,173],{},"Effet",[175,176,177,195,211,221,237,247,266,282],"tbody",{},[165,178,179,192],{},[180,181,182,185,186,185,189],"td",{},[26,183,184],{},"p-4"," ",[26,187,188],{},"px-4",[26,190,191],{},"pt-2",[180,193,194],{},"Remplissage (4 = 1 rem)",[165,196,197,208],{},[180,198,199,185,202,185,205],{},[26,200,201],{},"m-4",[26,203,204],{},"mx-auto",[26,206,207],{},"mt-6",[180,209,210],{},"Marge",[165,212,213,218],{},[180,214,215],{},[26,216,217],{},"gap-4",[180,219,220],{},"Espace entre enfants",[165,222,223,234],{},[180,224,225,185,228,185,231],{},[26,226,227],{},"bg-orange-50",[26,229,230],{},"text-gray-600",[26,232,233],{},"border-orange-300",[180,235,236],{},"Couleurs, nuances de 50 à 950",[165,238,239,244],{},[180,240,241],{},[26,242,243],{},"bg-orange-500\u002F50",[180,245,246],{},"Couleur à 50 % d'opacité",[165,248,249,263],{},[180,250,251,185,254,185,257,185,260],{},[26,252,253],{},"text-sm",[26,255,256],{},"text-xl",[26,258,259],{},"font-bold",[26,261,262],{},"leading-7",[180,264,265],{},"Texte",[165,267,268,279],{},[180,269,270,185,273,185,276],{},[26,271,272],{},"rounded-lg",[26,274,275],{},"shadow-md",[26,277,278],{},"border",[180,280,281],{},"Coins, ombre, bordure",[165,283,284,289],{},[180,285,286],{},[26,287,288],{},"p-[5px]",[180,290,291],{},"Valeur arbitraire",[10,293,294,295,153],{},"Détails : ",[149,296,298],{"href":297},"\u002Ftailwind\u002Fespacements-couleurs-typographie","Espacements, couleurs et typographie",[14,300,302],{"id":301},"flex-et-grid","Flex et grid",[159,304,305,313],{},[162,306,307],{},[165,308,309,311],{},[168,310,170],{},[168,312,173],{},[175,314,315,331,341,354,364,374],{},[165,316,317,328],{},[180,318,319,185,322,185,325],{},[26,320,321],{},"flex",[26,323,324],{},"flex-col",[26,326,327],{},"flex-wrap",[180,329,330],{},"Conteneur flex, direction, retour à la ligne",[165,332,333,338],{},[180,334,335],{},[26,336,337],{},"items-center",[180,339,340],{},"Alignement sur l'axe secondaire",[165,342,343,351],{},[180,344,345,185,348],{},[26,346,347],{},"justify-between",[26,349,350],{},"justify-center",[180,352,353],{},"Répartition sur l'axe principal",[165,355,356,361],{},[180,357,358],{},[26,359,360],{},"flex-1",[180,362,363],{},"Prend la place restante",[165,365,366,371],{},[180,367,368],{},[26,369,370],{},"grid grid-cols-3",[180,372,373],{},"Grille de 3 colonnes égales",[165,375,376,381],{},[180,377,378],{},[26,379,380],{},"col-span-2",[180,382,383],{},"Case sur 2 colonnes",[10,385,294,386,153],{},[149,387,389],{"href":388},"\u002Ftailwind\u002Fflex-et-grid","Mise en page avec flex et grid",[14,391,393],{"id":392},"variantes-et-responsive","Variantes et responsive",[19,395,399],{"className":396,"code":397,"language":398,"meta":24,"style":24},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cbutton class=\"bg-orange-500 hover:bg-orange-600 md:px-8 dark:bg-orange-700\">\n  Voir la recette\n\u003C\u002Fbutton>\n","html",[26,400,401,423,428],{"__ignoreMap":24},[29,402,403,406,410,414,417,420],{"class":31,"line":32},[29,404,405],{"class":63},"\u003C",[29,407,409],{"class":408},"s5JFL","button",[29,411,413],{"class":412},"s5iOY"," class",[29,415,416],{"class":63},"=",[29,418,419],{"class":39},"\"bg-orange-500 hover:bg-orange-600 md:px-8 dark:bg-orange-700\"",[29,421,422],{"class":63},">\n",[29,424,425],{"class":31,"line":73},[29,426,427],{"class":63},"  Voir la recette\n",[29,429,430,433,435],{"class":31,"line":80},[29,431,432],{"class":63},"\u003C\u002F",[29,434,409],{"class":408},[29,436,422],{"class":63},[159,438,439,449],{},[162,440,441],{},[165,442,443,446],{},[168,444,445],{},"Préfixe",[168,447,448],{},"Condition",[175,450,451,470,484,506,516],{},[165,452,453,467],{},[180,454,455,185,458,185,461,185,464],{},[26,456,457],{},"hover:",[26,459,460],{},"focus:",[26,462,463],{},"active:",[26,465,466],{},"disabled:",[180,468,469],{},"État de l'élément",[165,471,472,477],{},[180,473,474],{},[26,475,476],{},"group-hover:",[180,478,479,480,483],{},"Le parent ",[26,481,482],{},"group"," est survolé",[165,485,486,503],{},[180,487,488,185,491,185,494,185,497,185,500],{},[26,489,490],{},"sm:",[26,492,493],{},"md:",[26,495,496],{},"lg:",[26,498,499],{},"xl:",[26,501,502],{},"2xl:",[180,504,505],{},"À partir de 640, 768, 1024, 1280, 1536 px",[165,507,508,513],{},[180,509,510],{},[26,511,512],{},"max-md:",[180,514,515],{},"En dessous de 768 px",[165,517,518,523],{},[180,519,520],{},[26,521,522],{},"dark:",[180,524,525],{},"Mode sombre",[10,527,294,528,153],{},[149,529,531],{"href":530},"\u002Ftailwind\u002Fetats-et-responsive","Variantes d'état et responsive",[14,533,535],{"id":534},"thème","Thème",[19,537,539],{"className":108,"code":538,"language":111,"meta":24,"style":24},"@import \"tailwindcss\";\n\n@theme {\n  --color-tomate-500: #d6402b;\n  --font-display: \"Satoshi\", \"sans-serif\";\n  --breakpoint-3xl: 120rem;\n}\n\n@custom-variant dark (&:where(.dark, .dark *));\n",[26,540,541,549,553,561,575,593,609,615,620],{"__ignoreMap":24},[29,542,543,545,547],{"class":31,"line":32},[29,544,118],{"class":59},[29,546,121],{"class":39},[29,548,124],{"class":63},[29,550,551],{"class":31,"line":73},[29,552,77],{"emptyLinePlaceholder":76},[29,554,555,558],{"class":31,"line":80},[29,556,557],{"class":59},"@theme",[29,559,560],{"class":63}," {\n",[29,562,564,567,570,573],{"class":31,"line":563},4,[29,565,566],{"class":35},"  --color-tomate-500",[29,568,569],{"class":63},": ",[29,571,572],{"class":412},"#d6402b",[29,574,124],{"class":63},[29,576,578,581,583,586,588,591],{"class":31,"line":577},5,[29,579,580],{"class":35},"  --font-display",[29,582,569],{"class":63},[29,584,585],{"class":39},"\"Satoshi\"",[29,587,139],{"class":63},[29,589,590],{"class":39},"\"sans-serif\"",[29,592,124],{"class":63},[29,594,596,599,601,604,607],{"class":31,"line":595},6,[29,597,598],{"class":35},"  --breakpoint-3xl",[29,600,569],{"class":63},[29,602,603],{"class":412},"120",[29,605,606],{"class":59},"rem",[29,608,124],{"class":63},[29,610,612],{"class":31,"line":611},7,[29,613,614],{"class":63},"}\n",[29,616,618],{"class":31,"line":617},8,[29,619,77],{"emptyLinePlaceholder":76},[29,621,623,626],{"class":31,"line":622},9,[29,624,625],{"class":59},"@custom-variant",[29,627,628],{"class":63}," dark (&:where(.dark, .dark *));\n",[630,631,632,639],"ul",{},[633,634,635,638],"li",{},[26,636,637],{},"--color-*: initial;"," retire les couleurs par défaut.",[633,640,641,644],{},[26,642,643],{},"@theme inline"," fait utiliser la valeur directement.",[10,646,294,647,153],{},[149,648,650],{"href":649},"\u002Ftailwind\u002Fpersonnaliser-le-theme","Personnaliser le thème avec @theme",[14,652,654],{"id":653},"détection-des-classes","Détection des classes",[159,656,657,667],{},[162,658,659],{},[165,660,661,664],{},[168,662,663],{},"Directive",[168,665,666],{},"Rôle",[175,668,669,679,689,699],{},[165,670,671,676],{},[180,672,673],{},[26,674,675],{},"@source \"..\u002Fdossier\";",[180,677,678],{},"Analyser un dossier en plus",[165,680,681,686],{},[180,682,683],{},[26,684,685],{},"@source not \"..\u002Fdossier\";",[180,687,688],{},"Exclure un dossier",[165,690,691,696],{},[180,692,693],{},[26,694,695],{},"@source inline(\"underline\");",[180,697,698],{},"Forcer la génération d'une classe",[165,700,701,706],{},[180,702,703],{},[26,704,705],{},"@import \"tailwindcss\" source(none);",[180,707,708],{},"Désactiver la détection automatique",[10,710,711,712,715,716,719,720,147,723,153],{},"Écris toujours les classes en entier : ",[26,713,714],{},"text-red-600",", jamais ",[26,717,718],{},"text-${couleur}-600",". Pour réutiliser un bloc, préfère un composant à ",[26,721,722],{},"@apply",[149,724,726],{"href":725},"\u002Ftailwind\u002Fbonnes-pratiques","Bonnes pratiques",[728,729,730],"style",{},"html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}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 .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}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}",{"title":24,"searchDepth":73,"depth":80,"links":732},[733,734,735,736,737,738],{"id":16,"depth":73,"text":17},{"id":156,"depth":73,"text":157},{"id":301,"depth":73,"text":302},{"id":392,"depth":73,"text":393},{"id":534,"depth":73,"text":535},{"id":653,"depth":73,"text":654},"Le mémo de Tailwind CSS 4 : installation, classes courantes, variantes, thème avec @theme et détection des classes.","md","tailwind",{},[744,745,746,747,557,748,457,493,522,321,749],"mémo","aide-mémoire","Tailwind CSS 4","@import tailwindcss","@source","grid","memo","\u002Ftailwind",null,{"title":5,"description":739},[755],{"nom":756,"url":757},"Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs","tailwind\u002Findex","gupUPMu6fgJaVTlPxz7FbLJaFQ9F_qwogJTuM_pSjSY",[761,763,765,767,769,771],{"path":151,"title":152,"stem":762},"tailwind\u002F01.principe-et-installation",{"path":297,"title":298,"stem":764},"tailwind\u002F02.espacements-couleurs-typographie",{"path":388,"title":389,"stem":766},"tailwind\u002F03.flex-et-grid",{"path":649,"title":650,"stem":768},"tailwind\u002F05.personnaliser-le-theme",{"path":725,"title":726,"stem":770},"tailwind\u002F06.bonnes-pratiques",{"path":751,"title":5,"stem":758},[752,773],{"title":152,"path":151,"stem":762,"description":774,"children":-1},"Comprendre les classes utilitaires de Tailwind CSS 4, puis l'installer avec Vite ou dans un projet Nuxt.",[],[777,779,780,781,783,785],{"path":151,"title":152,"niveau":778,"stem":762},"debutant",{"path":297,"title":298,"niveau":778,"stem":764},{"path":388,"title":389,"niveau":778,"stem":766},{"path":649,"title":650,"niveau":782,"stem":768},"intermediaire",{"path":725,"title":726,"niveau":784,"stem":770},"avance",{"path":751,"title":5,"niveau":750,"stem":758},1794583427557]