Tailwind CSS - Retex 2 ans après

Slides de la présentation donnée au meetup Rennes JS S09E01 (03/11/2022)

Transcript

1. Tailwind CSS Retex 2 ans après Pierrick Grasland https://twitter.com/p_grasland https://www.linkedin.com/in/pierrick-grasland/
2. C’est quoi Tailwind CSS ?
3. Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Source : https://tailwindcss.com/
4. <div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12" > <img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" /> <div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]" ></div> <div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"> <div class="mx-auto max-w-md" > <div class="divide-y divide-gray-300/50" > <div class="space-y-6 py-8 text-base leading-7 text-gray-600" > <p>An advanced online playground for Tailwind CSS, including support for things like: </p> </div> <div class="pt-8 text-base font-semibold leading-7" > <p class="text-gray-900" >Want to dig deeper into Tailwind? </p> </div> </div> </div> </div> </div> C’est moche !
5. Tailwind CSS ? Pas de CSS custom Pas de temps perdu à nommer une classe CSS Fin du lien fort entre le HTML et le CSS Favorise une approche par composant Maintenance plus facile
6. Fortement recommandé avec https://github.com/tailwindlabs/prettier-plugin-tailwindcss
7. Pourquoi ce choix ?
8. Sans Tailwind CSS Pour la performance
9. Avec Tailwind CSS
10. <div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12" > <img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" /> <div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]" ></div> <div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"> <div class="mx-auto max-w-md" > <div class="divide-y divide-gray-300/50" > <div class="space-y-6 py-8 text-base leading-7 text-gray-600" > <p>An advanced online playground for Tailwind CSS, including support for things like: </p> </div> <div class="pt-8 text-base font-semibold leading-7" > <p class="text-gray-900" >Want to dig deeper into Tailwind? </p> </div> </div> </div> </div> </div> On a pas la même définition de lisibilité … Pour la lisibilité
11. C’est un vocabulaire commun. La maintenance est plus facile. Pas de changement de contexte entre le HTML et le CSS. Montée en compétence plus aisée pour les nouveaux arrivants. Pour la lisibilité
12. Installation
13. https://tailwindcss.com/docs/installation/framework-guides
14. npm install -D tailwindcss npx tailwindcss init https://tailwindcss.com/docs/installation
15. Mise à jour https://tailwindcss.com/docs/upgrade-guide
16. Utilisation
17. <div class="flex p-4 items-center justify-center h-screen"> <div class="mx-auto border border-gray-300 p-4 rounded-md shadow-md"> <img src="/img/logo.svg" class="h-6" alt="Tailwind Play" /> <div class="divide-y divide-gray-300/50"> <div class="space-y-6 py-8 text-base leading-7 text-gray-600"> <p>An advanced online playground for Tailwind CSS</p> </div> </div> </div> </div>
18. https://tailwindcss.com/docs/padding
19. https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
20. Hum … j’ai pas de classes “btn” https://tailwindui.com https://tailwindcomponents.com https://headlessui.com/
21. Personnalisation
22. /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./index.html" , "./src/**/*.{vue,js,ts,jsx,tsx}" ], theme: { fontFamily: { sans: ["Arial", "Helvetica" , "sans-serif" ], }, extend: { colors: { main: "#1900FF", front: "red", back: "rgb(255,127,127)" , other: "rgb(var(--java-color) / <alpha-value>)" , }, }, }, plugins: [], };
23. https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
24. https://tailwindcss.com/docs/theme
25. https://tailwindcss.com/docs/typography-plugin https://github.com/tailwindlabs/tailwindcss-forms https://github.com/tailwindlabs/tailwindcss-aspect-ratio https://github.com/tailwindlabs/tailwindcss-line-clamp https://github.com/tailwindlabs/tailwindcss-container-queries Plugins officiels
26. https://tailwindcss.com/docs/configuration#prefix Retrofit
27. Notre retour Pas de CSS custom Pas de temps perdu à nommer une classe CSS Fin du lien fort entre le HTML et le CSS Favorise une approche par composant Maintenance plus facile
28. Merci Pierrick Grasland https://twitter.com/p_grasland https://www.linkedin.com/in/pierrick-grasland/