[{"data":1,"prerenderedAt":366},["ShallowReactive",2],{"i-ic:outline-arrow-upward":3,"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E":8,"episode-\u002Fpodcasts\u002Ftailwind23":16,"github-sponsor":268,"i-material-symbols:home":343,"i-ic:baseline-play-circle-filled-white":345,"i-material-symbols:ios-share":347,"i-cbi:deezer-logo":349,"i-vscode-icons:file-type-rss":351,"i-ri:heart-3-fill":354,"Brand_dlIOZD2O03VXPoFYukMOJnSnZRMTmJ0YwMKY5fNK8":356,"Duration_TSqAwgiBJZ75a6rSuA02efjBfK0bnMBoUFOUBSOZCE":361},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z\"\u002F>",["Island",9],{"key":10,"result":11},"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E",{"head":12},{"style":13},[14],{"innerHTML":15},":where(.i-mdi\\:github){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'\u002F%3E%3C\u002Fsvg%3E\")}",{"id":17,"title":18,"author":19,"body":20,"categories":243,"description":245,"dsSlug":246,"duration":247,"episodeArtwork":248,"episodeNumber":249,"episodeType":250,"explicit":6,"extension":251,"guid":252,"links":253,"meta":254,"navigation":255,"path":256,"publicationDate":257,"season":258,"seo":259,"status":260,"stem":261,"subtitle":262,"tags":263,"videoLink":266,"__hash__":267},"podcasts\u002Fpodcasts\u002F071.tailwind23\u002Findex.md","Découvrir TailwindCSS en 2023","Double Slash",{"type":21,"value":22,"toc":232},"minimark",[23,28,32,35,57,60,65,75,120,124,127,147,151,172,176,229],[24,25,27],"h2",{"id":26},"description-de-tailwindcss","Description de TailwindCSS",[29,30,31],"p",{},"Tailwind CSS est un framework de développement web populaire et open source qui simplifie la création et la gestion de l'interface utilisateur (UI) de sites web et d'applications. Contrairement à de nombreux autres frameworks CSS, Tailwind CSS adopte une approche basée sur les classes CSS utilitaires pour styliser et agencer les éléments HTML.",[29,33,34],{},"Voici quelques caractéristiques clés de Tailwind CSS :",[36,37,38,42,45,48,51,54],"ol",{},[39,40,41],"li",{},"Classes CSS utilitaires : Tailwind CSS fournit un grand nombre de classes CSS pré-définies qui peuvent être appliquées directement aux éléments HTML pour définir des styles, des marges, des rembourrages, des couleurs, des polices, des tailles, etc. Ces classes sont nommées de manière intuitive, ce qui les rend faciles à comprendre et à utiliser.",[39,43,44],{},"Personnalisable : Bien que Tailwind CSS propose une grande variété de classes prédéfinies, il est également hautement personnalisable. Vous pouvez créer des classes personnalisées pour répondre aux besoins spécifiques de votre projet ou modifier les valeurs par défaut du framework pour adapter les styles à votre design.",[39,46,47],{},"Conception responsive : Tailwind CSS facilite la création de mises en page réactives en utilisant des classes dédiées pour gérer la visibilité des éléments sur différents appareils et résolutions d'écran.",[39,49,50],{},"Productivité accrue : En utilisant des classes utilitaires, les développeurs peuvent rapidement construire et itérer sur l'interface utilisateur sans avoir à écrire beaucoup de CSS personnalisé. Cela peut accélérer le développement web.",[39,52,53],{},"Performance optimisée : Tailwind CSS est conçu pour générer un CSS minimal et optimisé pour la production, ce qui contribue à des temps de chargement plus rapides.",[39,55,56],{},"Écosystème en expansion : Il existe de nombreuses extensions, plugins et outils créés par la communauté Tailwind pour étendre les fonctionnalités du framework et l'intégrer facilement dans divers environnements de développement.",[29,58,59],{},"En résumé, Tailwind CSS est un framework CSS qui mise sur des classes utilitaires pour simplifier le développement web en permettant aux développeurs de styliser et de structurer leur interface utilisateur de manière efficace et personnalisable. Son approche modulaire, sa flexibilité et sa popularité croissante en font un choix attrayant pour de nombreux projets web modernes.",[61,62,64],"h3",{"id":63},"pluginsthemes","Plugins\u002Fthemes",[29,66,67,68],{},"Article qui regroupe une liste de plugins : ",[69,70,74],"a",{"href":71,"rel":72},"https:\u002F\u002Fmedevel.com\u002F50-os-tailwind-plugins\u002F",[73],"nofollow","Medevel",[76,77,78,85,92,99,106,113],"ul",{},[39,79,80],{},[69,81,84],{"href":82,"rel":83},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ftypography-plugin",[73],"Typography",[39,86,87],{},[69,88,91],{"href":89,"rel":90},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-forms",[73],"Forms",[39,93,94],{},[69,95,98],{"href":96,"rel":97},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-aspect-ratio",[73],"Aspect Ratio",[39,100,101],{},[69,102,105],{"href":103,"rel":104},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-container-queries",[73],"Container Queries",[39,107,108],{},[69,109,112],{"href":110,"rel":111},"https:\u002F\u002Fnightwindcss.com\u002F",[73],"NightWind",[39,114,115],{},[69,116,119],{"href":117,"rel":118},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwind-scrollbar",[73],"scrollbar",[61,121,123],{"id":122},"tips-and-tricks","Tips and tricks",[29,125,126],{},"Articles qui regroupent des bonnes pratiques :",[76,128,129,135,141],{},[39,130,131],{},[69,132,133],{"href":133,"rel":134},"https:\u002F\u002Fwww.builder.io\u002Fblog\u002Ftailwind-css-tips-and-tricks",[73],[39,136,137],{},[69,138,139],{"href":139,"rel":140},"https:\u002F\u002Fwww.hyperui.dev\u002Fblog\u002Fhow-to-write-better-tailwindcss",[73],[39,142,143],{},[69,144,145],{"href":145,"rel":146},"https:\u002F\u002Fmedium.com\u002F@sididev3\u002F6-simple-tricks-90-of-people-who-use-tailwind-css-dont-know-26c6a1318476",[73],[61,148,150],{"id":149},"lib-dérivé-de-tailwind","Lib dérivé de Tailwind",[76,152,153,159,165],{},[39,154,155],{},[69,156,157],{"href":157,"rel":158},"http:\u002F\u002Ftachyons.io\u002F",[73],[39,160,161],{},[69,162,163],{"href":163,"rel":164},"https:\u002F\u002Fbasscss.com\u002F",[73],[39,166,167],{},[69,168,171],{"href":169,"rel":170},"https:\u002F\u002Funocss.dev\u002F",[73],"Uno CSS",[61,173,175],{"id":174},"ui-library","UI library",[76,177,178,185,191,197,203,210,216,222],{},[39,179,180],{},[69,181,184],{"href":182,"rel":183},"https:\u002F\u002Ftailwindui.com\u002F",[73],"Tailwind UI",[39,186,187],{},[69,188,189],{"href":189,"rel":190},"https:\u002F\u002Fdaisyui.com\u002F",[73],[39,192,193],{},[69,194,195],{"href":195,"rel":196},"https:\u002F\u002Ffloatui.com\u002F",[73],[39,198,199],{},[69,200,201],{"href":201,"rel":202},"https:\u002F\u002Fflowbite.com\u002F",[73],[39,204,205],{},[69,206,209],{"href":207,"rel":208},"https:\u002F\u002Fpreline.co\u002F",[73],"Preline UI",[39,211,212],{},[69,213,214],{"href":214,"rel":215},"https:\u002F\u002Ftailwind-elements.com\u002F",[73],[39,217,218],{},[69,219,220],{"href":220,"rel":221},"https:\u002F\u002Flunarui.dev\u002F",[73],[39,223,224],{},[69,225,228],{"href":226,"rel":227},"https:\u002F\u002Fui.shadcn.com\u002F",[73],"shadcn\u002Fui",[29,230,231],{},"Bonne écoute !",{"title":233,"searchDepth":234,"depth":234,"links":235},"",2,[236],{"id":26,"depth":234,"text":27,"children":237},[238,240,241,242],{"id":63,"depth":239,"text":64},3,{"id":122,"depth":239,"text":123},{"id":149,"depth":239,"text":150},{"id":174,"depth":239,"text":175},[244],"Technology","Un épisode [Remix] sur TailwindCSS. Nous avions déjà fait un épisode sur l'outil TailwindCSS, le numéro 7, sorti en 2020. Comme ce magnifique outil a évolué depuis, nous voulions refaire un épisode dédié pour réexpliquer le fonctionnement et l’écosystème autour de ce dernier.","DS_071_tailwind23",4441,"https:\u002F\u002Fres.cloudinary.com\u002Fdoubleslash\u002Fimage\u002Fupload\u002Fv1696020556\u002Fepisode\u002FART_71_qltppk.png",71,"full","md",null,[],{},true,"\u002Fpodcasts\u002Ftailwind23","2023-09-30",1,{"title":18,"description":245},"published","podcasts\u002F071.tailwind23\u002Findex","Pourquoi et comment",[264,265],"css","tailwindcss","vAhiMb7YAoo","y_kCty3khpyyGJKfJh3HqlMkMp66SESYDvwk97bUBVE",{"data":269},{"organization":270},{"sponsorsListing":271},{"name":272,"fullDescriptionHTML":273,"url":274,"shortDescription":275,"activeGoal":276,"isPublic":255,"sponsorable":280},"sponsors-double-slash-podcast","\u003Cp>Le podcast des dev pour dev par des dev !\u003C\u002Fp>\n\u003Cp>Des podcasts et des videos sur les technologie WEB modernes.\u003C\u002Fp>\n\u003Cp>A deux ou avec un invité, on discute des tendances, des nouvelles technologies, des meilleures pratiques actuelles.\u003C\u002Fp>\n\u003Cp>🎥 \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCp5DGBAX2XNJXeOVAo7bICQ\">Youtube\u003C\u002Fa>\u003Cbr>\n🎙️ \u003Ca href=\"https:\u002F\u002Fspoti.fi\u002F317wtvD\">Spotify\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fapple.co\u002F3fTguFo\">Apple Podcast\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fbit.ly\u002F3i0hDgy\">Deezer\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fbit.ly\u002F31aKKYd\">Google Podcast\u003C\u002Fa>\u003Cbr>\n🌐 \u003Ca href=\"https:\u002F\u002Fdouble-slash.dev\u002F\">Double Slash DEV\u003C\u002Fa>\u003C\u002Fp>","https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fdouble-slash-podcast","Le podcast des dev pour les dev par des dev !",{"description":277,"percentComplete":278,"targetValue":278,"title":279},"L'ensemble des charges seront couvertes. Service de stockage et abonnement aux services utilisés.",70,"$70 per month",{"sponsors":281},{"edges":282},[283,289,295,301,307,313,319,325,331,337],{"node":284},{"id":285,"name":286,"url":287,"avatarUrl":288},"MDQ6VXNlcjEwMDMwNw==","Clément Delmas","https:\u002F\u002Fgithub.com\u002Fclem","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F100307?u=878ed4b7cdf920879b57046f19e434fea2c7d296&v=4",{"node":290},{"id":291,"name":292,"url":293,"avatarUrl":294},"MDQ6VXNlcjI3NTYwOQ==","Thibaud Lepretre","https:\u002F\u002Fgithub.com\u002Fkakawait","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F275609?v=4",{"node":296},{"id":297,"name":298,"url":299,"avatarUrl":300},"MDQ6VXNlcjE5MTQxNjA=","David Pollet","https:\u002F\u002Fgithub.com\u002Fdavidpollet","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1914160?u=4b3da16383b9fa810fd0980f756000709403ab45&v=4",{"node":302},{"id":303,"name":304,"url":305,"avatarUrl":306},"MDQ6VXNlcjYzMzMzOTY=","Eric","https:\u002F\u002Fgithub.com\u002Fericledonge","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6333396?u=e9e541a6b9125d8e8b558fdd914c847eb36db695&v=4",{"node":308},{"id":309,"name":310,"url":311,"avatarUrl":312},"MDQ6VXNlcjg4OTk3Njg=","François Gardien","https:\u002F\u002Fgithub.com\u002FYoutch","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F8899768?u=85ae8c4299c380bcec02e99e9364624f3ce333c7&v=4",{"node":314},{"id":315,"name":316,"url":317,"avatarUrl":318},"MDQ6VXNlcjEwMTc2NjI2","Antharuu","https:\u002F\u002Fgithub.com\u002Fantharuu","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10176626?u=3f6ef490b330d5a9bbaa3137560b5d1d4cf13a4a&v=4",{"node":320},{"id":321,"name":322,"url":323,"avatarUrl":324},"MDQ6VXNlcjEwMTg2OTkz","Adrien Zaganelli","https:\u002F\u002Fgithub.com\u002FadrienZ","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10186993?u=08189ef8cf708a61445b6a57cf7a2aa361d484af&v=4",{"node":326},{"id":327,"name":328,"url":329,"avatarUrl":330},"MDQ6VXNlcjI2MTQyMzgz","Thomas Lemoine","https:\u002F\u002Fgithub.com\u002Fthomaslemoine","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F26142383?u=4c68175459b0ae1f8c68c48c40f2ae148747675d&v=4",{"node":332},{"id":333,"name":334,"url":335,"avatarUrl":336},"MDQ6VXNlcjY1NzM3MTMx","Valentin Grenier","https:\u002F\u002Fgithub.com\u002Fvalentin-grenier","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F65737131?u=0ba0cc828412f6655a948c6a82f69b9c909f8fd9&v=4",{"node":338},{"id":339,"name":340,"url":341,"avatarUrl":342},"U_kgDOBipZwA","Hebrard Frederic","https:\u002F\u002Fgithub.com\u002Ffrederichebrard","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F103438784?v=4",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":344},"\u003Cpath fill=\"currentColor\" d=\"M4 21V9l8-6l8 6v12h-6v-7h-4v7z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":346},"\u003Cpath fill=\"currentColor\" d=\"M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10s10-4.475 10-10S17.525 2 12 2m-2 14.5v-9l6 4.5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":348},"\u003Cpath fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h3v2H6v10h12V10h-3V8h3q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm5-6V4.825l-1.6 1.6L8 5l4-4l4 4l-1.4 1.425l-1.6-1.6V16z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":350},"\u003Cpath fill=\"currentColor\" d=\"M18.774 5.051c.185-1.072.457-1.747.757-1.748c.561 0 1.015 2.341 1.015 5.228s-.455 5.229-1.016 5.229c-.23 0-.443-.4-.614-1.064c-.27 2.439-.831 4.115-1.48 4.115c-.5 0-.953-1.007-1.256-2.594c-.207 3.018-.727 5.161-1.334 5.161c-.381 0-.73-.848-.987-2.231C13.55 20 12.834 22 12 22s-1.551-2-1.86-4.853c-.255 1.383-.6 2.231-.986 2.231c-.609 0-1.128-2.142-1.335-5.161c-.3 1.587-.752 2.594-1.256 2.594c-.649 0-1.21-1.676-1.481-4.115c-.169.668-.382 1.064-.613 1.064c-.562 0-1.017-2.34-1.017-5.229S3.908 3.3 4.471 3.3c.3 0 .57.676.758 1.748C5.527 3.2 6.014 2 6.564 2c.653 0 1.219 1.7 1.487 4.168c.262-1.8.658-2.941 1.1-2.941c.624 0 1.154 2.252 1.351 5.393C10.874 7.01 11.41 6 12 6s1.128 1.011 1.5 2.62c.2-3.141.727-5.393 1.351-5.393c.444 0 .84 1.145 1.1 2.941C16.219 3.7 16.785 2 17.439 2c.547 0 1.035 1.2 1.335 3.051m-16.2 5.3C2.258 10.355 2 9.31 2 8.017s.258-2.337.576-2.337s.578 1.044.578 2.337s-.254 2.338-.578 2.338Zm18.848 0c-.32 0-.577-1.045-.577-2.338s.257-2.337.577-2.337S22 6.724 22 8.017s-.258 2.338-.576 2.338Z\"\u002F>",{"left":4,"top":4,"width":352,"height":352,"rotate":4,"vFlip":6,"hFlip":6,"body":353},32,"\u003Cdefs>\u003ClinearGradient id=\"SVGvSi4fdXe\" x1=\"30.06\" x2=\"225.94\" y1=\"30.06\" y2=\"225.94\" gradientTransform=\"matrix(.11 0 0 .11 2 2)\" gradientUnits=\"userSpaceOnUse\">\u003Cstop offset=\"0\" stop-color=\"#e3702d\"\u002F>\u003Cstop offset=\".11\" stop-color=\"#ea7d31\"\u002F>\u003Cstop offset=\".35\" stop-color=\"#f69537\"\u002F>\u003Cstop offset=\".5\" stop-color=\"#fb9e3a\"\u002F>\u003Cstop offset=\".7\" stop-color=\"#ea7c31\"\u002F>\u003Cstop offset=\".89\" stop-color=\"#de642b\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#d95b29\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\u003Crect width=\"28\" height=\"28\" x=\"2\" y=\"2\" fill=\"#cc5d15\" rx=\"6.01\" ry=\"6.01\"\u002F>\u003Crect width=\"26.91\" height=\"26.91\" x=\"2.54\" y=\"2.54\" fill=\"#f49c52\" rx=\"5.47\" ry=\"5.47\"\u002F>\u003Crect width=\"25.82\" height=\"25.82\" x=\"3.1\" y=\"3.1\" fill=\"url(#SVGvSi4fdXe)\" rx=\"5.14\" ry=\"5.14\"\u002F>\u003Cpath fill=\"#fff\" d=\"M6.82 6.16v3.83a15.31 15.31 0 0 1 15.3 15.3h3.83A19.14 19.14 0 0 0 6.81 6.17zm0 6.45v3.72a8.97 8.97 0 0 1 8.96 8.97h3.72A12.69 12.69 0 0 0 6.81 12.6zm2.62 7.44a2.63 2.63 0 0 0-2.63 2.62a2.63 2.63 0 0 0 2.63 2.63a2.63 2.63 0 0 0 2.63-2.63a2.63 2.63 0 0 0-2.63-2.63z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":355},"\u003Cpath fill=\"currentColor\" d=\"M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2\"\u002F>",["Island",357],{"key":358,"result":359},"Brand_dlIOZD2O03VXPoFYukMOJnSnZRMTmJ0YwMKY5fNK8",{"head":360},{},["Island",362],{"key":363,"result":364},"Duration_TSqAwgiBJZ75a6rSuA02efjBfK0bnMBoUFOUBSOZCE",{"head":365},{},1785405175972]