[{"data":1,"prerenderedAt":896},["ShallowReactive",2],{"page-\u002Ftailwind\u002Fprincipe-et-installation":3,"pieces-tailwind":857,"autour-\u002Ftailwind\u002Fprincipe-et-installation":878,"prerequis-\u002Ftailwind\u002Fprincipe-et-installation":883,"plan-tailwind":886},{"id":4,"title":5,"body":6,"description":823,"extension":824,"ligne":825,"meta":826,"motsCles":827,"navigation":324,"niveau":833,"path":834,"prerequis":835,"ressources":837,"seo":849,"sources":850,"stem":855,"__hash__":856},"docs\u002Ftailwind\u002F01.principe-et-installation.md","Principe et installation",{"type":7,"value":8,"toc":813},"minimark",[9,14,27,31,35,125,149,152,156,163,226,229,242,246,252,258,280,285,371,376,395,406,417,421,428,506,513,526,532,578,582,592,609,649,671,678,727,734,740,744,755,761,765,809],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Ce qu'est une classe utilitaire et en quoi c'est différent du CSS classique.",[18,22,23],{},"Installer Tailwind CSS 4 avec Vite, puis dans un projet Nuxt.",[18,25,26],{},"Savoir où Nuxt UI se place par rapport à Tailwind.",[10,28,30],{"id":29},"du-css-classique-aux-classes-utilitaires","Du CSS classique aux classes utilitaires",[32,33,34],"p",{},"Voici une carte de recette stylée avec Tailwind :",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Carticle class=\"rounded-lg border p-4 shadow-md\">\n  \u003Ch2 class=\"text-xl font-bold\">Crêpes au citron\u003C\u002Fh2>\n  \u003Cp class=\"text-gray-600\">Prêtes en 15 minutes.\u003C\u002Fp>\n\u003C\u002Farticle>\n","html","",[43,44,45,72,94,115],"code",{"__ignoreMap":41},[46,47,50,54,58,62,65,69],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"scfrF","\u003C",[46,55,57],{"class":56},"s5JFL","article",[46,59,61],{"class":60},"s5iOY"," class",[46,63,64],{"class":52},"=",[46,66,68],{"class":67},"shWOn","\"rounded-lg border p-4 shadow-md\"",[46,70,71],{"class":52},">\n",[46,73,75,78,80,82,84,87,90,92],{"class":48,"line":74},2,[46,76,77],{"class":52},"  \u003C",[46,79,10],{"class":56},[46,81,61],{"class":60},[46,83,64],{"class":52},[46,85,86],{"class":67},"\"text-xl font-bold\"",[46,88,89],{"class":52},">Crêpes au citron\u003C\u002F",[46,91,10],{"class":56},[46,93,71],{"class":52},[46,95,97,99,101,103,105,108,111,113],{"class":48,"line":96},3,[46,98,77],{"class":52},[46,100,32],{"class":56},[46,102,61],{"class":60},[46,104,64],{"class":52},[46,106,107],{"class":67},"\"text-gray-600\"",[46,109,110],{"class":52},">Prêtes en 15 minutes.\u003C\u002F",[46,112,32],{"class":56},[46,114,71],{"class":52},[46,116,118,121,123],{"class":48,"line":117},4,[46,119,120],{"class":52},"\u003C\u002F",[46,122,57],{"class":56},[46,124,71],{"class":52},[32,126,127,128,132,133,136,137,140,141,144,145,148],{},"Chaque classe fait ",[129,130,131],"strong",{},"une seule chose"," : ",[43,134,135],{},"p-4"," ajoute du remplissage, ",[43,138,139],{},"font-bold"," met en gras, ",[43,142,143],{},"rounded-lg"," arrondit les coins. On appelle ça des ",[129,146,147],{},"classes utilitaires",".",[32,150,151],{},"Tu ne nommes plus tes classes et tu n'écris presque plus de fichier CSS. Tu composes le style directement dans le HTML.",[10,153,155],{"id":154},"pourquoi-ça-marche-bien","Pourquoi ça marche bien",[32,157,158,159,162],{},"Avec du CSS classique, tu inventes un nom (",[43,160,161],{},".carte-recette","), puis tu le retrouves dans un fichier à part. Avec Tailwind, tu lis le style en regardant l'élément.",[164,165,166,181],"table",{},[167,168,169],"thead",{},[170,171,172,175,178],"tr",{},[173,174],"th",{},[173,176,177],{},"CSS classique",[173,179,180],{},"Tailwind",[182,183,184,196,205,215],"tbody",{},[170,185,186,190,193],{},[187,188,189],"td",{},"Nommer les classes",[187,191,192],{},"Oui",[187,194,195],{},"Non",[170,197,198,201,203],{},[187,199,200],{},"Style visible dans le HTML",[187,202,195],{},[187,204,192],{},[170,206,207,210,212],{},[187,208,209],{},"Fichiers CSS qui grossissent",[187,211,192],{},[187,213,214],{},"Peu",[170,216,217,220,223],{},[187,218,219],{},"Valeurs cohérentes (espaces, couleurs)",[187,221,222],{},"À toi de les tenir",[187,224,225],{},"Fournies par défaut",[32,227,228],{},"Le HTML devient plus long, c'est le prix à payer. Le chapitre 6 montre comment éviter de te répéter.",[230,231,232],"note",{},[32,233,234,235,238,239,241],{},"Tailwind ne remplace pas le CSS : il le génère. Les classes ",[43,236,237],{},"flex"," ou ",[43,240,135],{}," produisent des règles CSS que tu connais déjà. Connaître le CSS reste indispensable.",[10,243,245],{"id":244},"installer-avec-vite","Installer avec Vite",[32,247,248,251],{},[129,249,250],{},"Vite"," est l'outil qui lance et compile ton projet pendant le développement. Pour y ajouter Tailwind CSS 4, il faut trois étapes.",[253,254,255],"ol",{},[18,256,257],{},"Installe les deux paquets :",[36,259,263],{"className":260,"code":261,"language":262,"meta":41,"style":41},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","npm install tailwindcss @tailwindcss\u002Fvite\n","bash",[43,264,265],{"__ignoreMap":41},[46,266,267,271,274,277],{"class":48,"line":49},[46,268,270],{"class":269},"sIXEE","npm",[46,272,273],{"class":67}," install",[46,275,276],{"class":67}," tailwindcss",[46,278,279],{"class":67}," @tailwindcss\u002Fvite\n",[253,281,282],{"start":74},[18,283,284],{},"Ajoute le plugin dans la configuration de Vite :",[36,286,291],{"className":287,"code":288,"filename":289,"language":290,"meta":41,"style":41},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","import { defineConfig } from 'vite'\nimport tailwindcss from '@tailwindcss\u002Fvite'\n\nexport default defineConfig({\n  plugins: [\n    tailwindcss(),\n  ],\n})\n","vite.config.ts","ts",[43,292,293,308,320,326,341,347,356,365],{"__ignoreMap":41},[46,294,295,299,302,305],{"class":48,"line":49},[46,296,298],{"class":297},"sOnC1","import",[46,300,301],{"class":52}," { defineConfig } ",[46,303,304],{"class":297},"from",[46,306,307],{"class":67}," 'vite'\n",[46,309,310,312,315,317],{"class":48,"line":74},[46,311,298],{"class":297},[46,313,314],{"class":52}," tailwindcss ",[46,316,304],{"class":297},[46,318,319],{"class":67}," '@tailwindcss\u002Fvite'\n",[46,321,322],{"class":48,"line":96},[46,323,325],{"emptyLinePlaceholder":324},true,"\n",[46,327,328,331,334,338],{"class":48,"line":117},[46,329,330],{"class":297},"export",[46,332,333],{"class":297}," default",[46,335,337],{"class":336},"syCW7"," defineConfig",[46,339,340],{"class":269},"({\n",[46,342,344],{"class":48,"line":343},5,[46,345,346],{"class":52},"  plugins: [\n",[46,348,350,353],{"class":48,"line":349},6,[46,351,352],{"class":336},"    tailwindcss",[46,354,355],{"class":52},"(),\n",[46,357,359,362],{"class":48,"line":358},7,[46,360,361],{"class":52},"  ]",[46,363,364],{"class":269},",\n",[46,366,368],{"class":48,"line":367},8,[46,369,370],{"class":269},"})\n",[253,372,373],{"start":96},[18,374,375],{},"Dans ton fichier CSS principal, importe Tailwind :",[36,377,382],{"className":378,"code":379,"filename":380,"language":381,"meta":41,"style":41},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default","@import \"tailwindcss\";\n","src\u002Fstyle.css","css",[43,383,384],{"__ignoreMap":41},[46,385,386,389,392],{"class":48,"line":49},[46,387,388],{"class":297},"@import",[46,390,391],{"class":67}," \"tailwindcss\"",[46,393,394],{"class":52},";\n",[32,396,397,398,401,402,405],{},"Charge ensuite ce fichier dans ta page, par exemple avec ",[43,399,400],{},"\u003Clink href=\"\u002Fsrc\u002Fstyle.css\" rel=\"stylesheet\">"," dans le ",[43,403,404],{},"\u003Chead>",". Tu peux alors utiliser les classes.",[32,407,408,409,412,413,416],{},"Cette ligne ",[43,410,411],{},"@import \"tailwindcss\";"," est toute la configuration de départ. Tailwind 4 n'a plus besoin d'un fichier ",[43,414,415],{},"tailwind.config.js"," par défaut : la personnalisation se fait dans le CSS (chapitre 5).",[10,418,420],{"id":419},"installer-dans-nuxt","Installer dans Nuxt",[32,422,423,424,427],{},"Dans un projet Nuxt, le plugin Vite se déclare dans ",[43,425,426],{},"nuxt.config.ts",", car Nuxt s'appuie sur Vite.",[36,429,431],{"className":287,"code":430,"filename":426,"language":290,"meta":41,"style":41},"import tailwindcss from '@tailwindcss\u002Fvite'\n\nexport default defineNuxtConfig({\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css'],\n  vite: {\n    plugins: [\n      tailwindcss(),\n    ],\n  },\n})\n",[43,432,433,443,447,458,471,476,481,488,493,501],{"__ignoreMap":41},[46,434,435,437,439,441],{"class":48,"line":49},[46,436,298],{"class":297},[46,438,314],{"class":52},[46,440,304],{"class":297},[46,442,319],{"class":67},[46,444,445],{"class":48,"line":74},[46,446,325],{"emptyLinePlaceholder":324},[46,448,449,451,453,456],{"class":48,"line":96},[46,450,330],{"class":297},[46,452,333],{"class":297},[46,454,455],{"class":336}," defineNuxtConfig",[46,457,340],{"class":269},[46,459,460,463,466,469],{"class":48,"line":117},[46,461,462],{"class":52},"  css: [",[46,464,465],{"class":67},"'~\u002Fassets\u002Fcss\u002Fmain.css'",[46,467,468],{"class":52},"]",[46,470,364],{"class":269},[46,472,473],{"class":48,"line":343},[46,474,475],{"class":52},"  vite: {\n",[46,477,478],{"class":48,"line":349},[46,479,480],{"class":52},"    plugins: [\n",[46,482,483,486],{"class":48,"line":358},[46,484,485],{"class":336},"      tailwindcss",[46,487,355],{"class":52},[46,489,490],{"class":48,"line":367},[46,491,492],{"class":52},"    ],\n",[46,494,496,499],{"class":48,"line":495},9,[46,497,498],{"class":52},"  }",[46,500,364],{"class":269},[46,502,504],{"class":48,"line":503},10,[46,505,370],{"class":269},[32,507,508,509,512],{},"Installe d'abord les mêmes paquets (",[43,510,511],{},"npm install tailwindcss @tailwindcss\u002Fvite","), puis crée le fichier CSS :",[36,514,516],{"className":378,"code":379,"filename":515,"language":381,"meta":41,"style":41},"app\u002Fassets\u002Fcss\u002Fmain.css",[43,517,518],{"__ignoreMap":41},[46,519,520,522,524],{"class":48,"line":49},[46,521,388],{"class":297},[46,523,391],{"class":67},[46,525,394],{"class":52},[32,527,528,529,531],{},"La ligne ",[43,530,381],{}," de la configuration charge ce fichier sur toutes les pages. Tu peux écrire des classes dans n'importe quel composant :",[36,533,538],{"className":534,"code":535,"filename":536,"language":537,"meta":41,"style":41},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ctemplate>\n  \u003Ch1 class=\"text-3xl font-bold underline\">Mes recettes\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n","app\u002Fapp.vue","vue",[43,539,540,549,570],{"__ignoreMap":41},[46,541,542,544,547],{"class":48,"line":49},[46,543,53],{"class":52},[46,545,546],{"class":56},"template",[46,548,71],{"class":52},[46,550,551,553,556,558,560,563,566,568],{"class":48,"line":74},[46,552,77],{"class":52},[46,554,555],{"class":56},"h1",[46,557,61],{"class":60},[46,559,64],{"class":52},[46,561,562],{"class":67},"\"text-3xl font-bold underline\"",[46,564,565],{"class":52},">Mes recettes\u003C\u002F",[46,567,555],{"class":56},[46,569,71],{"class":52},[46,571,572,574,576],{"class":48,"line":96},[46,573,120],{"class":52},[46,575,546],{"class":56},[46,577,71],{"class":52},[10,579,581],{"id":580},"et-nuxt-ui","Et Nuxt UI ?",[32,583,584,587,588,591],{},[129,585,586],{},"Nuxt UI"," est une bibliothèque de composants prêts à l'emploi pour Nuxt, construite sur Tailwind CSS. Elle s'installe à la place de la configuration précédente, avec ",[43,589,590],{},"tailwindcss"," comme dépendance :",[36,593,595],{"className":260,"code":594,"language":262,"meta":41,"style":41},"npm install @nuxt\u002Fui tailwindcss\n",[43,596,597],{"__ignoreMap":41},[46,598,599,601,603,606],{"class":48,"line":49},[46,600,270],{"class":269},[46,602,273],{"class":67},[46,604,605],{"class":67}," @nuxt\u002Fui",[46,607,608],{"class":67}," tailwindcss\n",[36,610,612],{"className":287,"code":611,"filename":426,"language":290,"meta":41,"style":41},"export default defineNuxtConfig({\n  modules: ['@nuxt\u002Fui'],\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css']\n})\n",[43,613,614,624,636,645],{"__ignoreMap":41},[46,615,616,618,620,622],{"class":48,"line":49},[46,617,330],{"class":297},[46,619,333],{"class":297},[46,621,455],{"class":336},[46,623,340],{"class":269},[46,625,626,629,632,634],{"class":48,"line":74},[46,627,628],{"class":52},"  modules: [",[46,630,631],{"class":67},"'@nuxt\u002Fui'",[46,633,468],{"class":52},[46,635,364],{"class":269},[46,637,638,640,642],{"class":48,"line":96},[46,639,462],{"class":52},[46,641,465],{"class":67},[46,643,644],{"class":52},"]\n",[46,646,647],{"class":48,"line":117},[46,648,370],{"class":269},[36,650,652],{"className":378,"code":651,"filename":515,"language":381,"meta":41,"style":41},"@import \"tailwindcss\";\n@import \"@nuxt\u002Fui\";\n",[43,653,654,662],{"__ignoreMap":41},[46,655,656,658,660],{"class":48,"line":49},[46,657,388],{"class":297},[46,659,391],{"class":67},[46,661,394],{"class":52},[46,663,664,666,669],{"class":48,"line":74},[46,665,388],{"class":297},[46,667,668],{"class":67}," \"@nuxt\u002Fui\"",[46,670,394],{"class":52},[32,672,673,674,677],{},"Il faut aussi envelopper l'application dans le composant ",[43,675,676],{},"UApp"," :",[36,679,681],{"className":534,"code":680,"filename":536,"language":537,"meta":41,"style":41},"\u003Ctemplate>\n  \u003CUApp>\n    \u003CNuxtPage \u002F>\n  \u003C\u002FUApp>\n\u003C\u002Ftemplate>\n",[43,682,683,691,699,710,719],{"__ignoreMap":41},[46,684,685,687,689],{"class":48,"line":49},[46,686,53],{"class":52},[46,688,546],{"class":56},[46,690,71],{"class":52},[46,692,693,695,697],{"class":48,"line":74},[46,694,77],{"class":52},[46,696,676],{"class":56},[46,698,71],{"class":52},[46,700,701,704,707],{"class":48,"line":96},[46,702,703],{"class":52},"    \u003C",[46,705,706],{"class":56},"NuxtPage",[46,708,709],{"class":52}," \u002F>\n",[46,711,712,715,717],{"class":48,"line":117},[46,713,714],{"class":52},"  \u003C\u002F",[46,716,676],{"class":56},[46,718,71],{"class":52},[46,720,721,723,725],{"class":48,"line":343},[46,722,120],{"class":52},[46,724,546],{"class":56},[46,726,71],{"class":52},[32,728,729,730,733],{},"Dans la procédure de Nuxt UI, la configuration ne déclare que le module et le fichier CSS, sans le plugin ",[43,731,732],{},"@tailwindcss\u002Fvite"," de la section précédente. Tes propres classes Tailwind s'écrivent comme d'habitude.",[735,736,737],"tip",{},[32,738,739],{},"Pour apprendre, commence par Tailwind seul. Tu comprendras mieux ce que font les composants de Nuxt UI quand tu en auras besoin.",[10,741,743],{"id":742},"vérifier-que-ça-marche","Vérifier que ça marche",[32,745,746,747,750,751,754],{},"Lance le serveur de développement avec ",[43,748,749],{},"npm run dev",", puis affiche une page contenant ",[43,752,753],{},"text-3xl font-bold underline",". Le texte doit apparaître grand, gras et souligné.",[32,756,757,758,760],{},"Si rien ne change, vérifie trois points : le fichier CSS est bien chargé, il contient ",[43,759,411],{},", et le plugin est déclaré.",[10,762,764],{"id":763},"à-retenir","À retenir",[15,766,767,770,773,785,797],{},[18,768,769],{},"Une classe utilitaire fait une seule chose et se compose directement dans le HTML.",[18,771,772],{},"Tailwind génère du CSS ordinaire : les connaissances en CSS restent utiles.",[18,774,775,776,778,779,782,783,148],{},"Avec Vite : ",[43,777,511],{},", le plugin ",[43,780,781],{},"tailwindcss()"," et ",[43,784,411],{},[18,786,787,788,791,792,794,795,148],{},"Dans Nuxt, le plugin va dans ",[43,789,790],{},"vite.config.plugins"," de ",[43,793,426],{},", et le fichier CSS dans ",[43,796,381],{},[18,798,799,800,803,804,806,807,148],{},"Nuxt UI s'installe avec ",[43,801,802],{},"@nuxt\u002Fui",", importe ",[43,805,802],{}," dans le CSS et demande d'envelopper l'app dans ",[43,808,676],{},[810,811,812],"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 .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}",{"title":41,"searchDepth":74,"depth":96,"links":814},[815,816,817,818,819,820,821,822],{"id":12,"depth":74,"text":13},{"id":29,"depth":74,"text":30},{"id":154,"depth":74,"text":155},{"id":244,"depth":74,"text":245},{"id":419,"depth":74,"text":420},{"id":580,"depth":74,"text":581},{"id":742,"depth":74,"text":743},{"id":763,"depth":74,"text":764},"Comprendre les classes utilitaires de Tailwind CSS 4, puis l'installer avec Vite ou dans un projet Nuxt.","md","tailwind",{},[828,829,830,732,250,831,586,832],"Tailwind CSS","classe utilitaire","@import tailwindcss","Nuxt","main.css","debutant","\u002Ftailwind\u002Fprincipe-et-installation",[836],"\u002Fcss\u002Fpremiers-pas",[838,842,846],{"nom":839,"url":840,"type":841},"Grafikart, TailwindCSS 4, nouvelle configuration","https:\u002F\u002Fgrafikart.fr\u002Ftutoriels\u002Ftailwindcss-v4-2265","video",{"nom":843,"url":844,"type":845,"anglais":324},"Documentation de Tailwind CSS (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs","doc",{"nom":847,"url":848,"type":845,"anglais":324},"Documentation de Nuxt UI (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fnuxt",{"title":5,"description":823},[851,852],{"nom":843,"url":844},{"nom":853,"url":854},"Installer Tailwind CSS avec Vite (en anglais)","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Finstallation\u002Fusing-vite","tailwind\u002F01.principe-et-installation","3T5uwri6p7jAfv4nAWORbwcPIidBfFbyGrIHIpFy8JE",[858,859,863,867,871,875],{"path":834,"title":5,"stem":855},{"path":860,"title":861,"stem":862},"\u002Ftailwind\u002Fespacements-couleurs-typographie","Espacements, couleurs et typographie","tailwind\u002F02.espacements-couleurs-typographie",{"path":864,"title":865,"stem":866},"\u002Ftailwind\u002Fflex-et-grid","Mise en page avec flex et grid","tailwind\u002F03.flex-et-grid",{"path":868,"title":869,"stem":870},"\u002Ftailwind\u002Fpersonnaliser-le-theme","Personnaliser le thème avec @theme","tailwind\u002F05.personnaliser-le-theme",{"path":872,"title":873,"stem":874},"\u002Ftailwind\u002Fbonnes-pratiques","Bonnes pratiques","tailwind\u002F06.bonnes-pratiques",{"path":876,"title":828,"stem":877},"\u002Ftailwind","tailwind\u002Findex",[879,881],{"title":828,"path":876,"stem":877,"description":880,"children":-1},"Le mémo de Tailwind CSS 4 : installation, classes courantes, variantes, thème avec @theme et détection des classes.",{"title":861,"path":860,"stem":862,"description":882,"children":-1},"Les classes de base de Tailwind CSS 4 pour espacer, colorer et mettre en forme du texte, avec l'échelle de valeurs.",[884],{"path":836,"title":885,"ligne":381},"Premiers pas en CSS",[887,888,889,890,892,894],{"path":834,"title":5,"niveau":833,"stem":855},{"path":860,"title":861,"niveau":833,"stem":862},{"path":864,"title":865,"niveau":833,"stem":866},{"path":868,"title":869,"niveau":891,"stem":870},"intermediaire",{"path":872,"title":873,"niveau":893,"stem":874},"avance",{"path":876,"title":828,"niveau":895,"stem":877},"memo",1794583443560]