Je voudrais ajouter quelques précisions à cette vidéo. Actuellement, UnoCSS est nettement plus rapide que TailwindCSS, presque instantané. Cela pourrait toutefois évoluer avec la version 4 de Tailwind. Bien que cela puisse sembler mineur, la différence est notable. UnoCSS propose des classes raccourcies (ex. : c-orange pour text-orange, of-hidden pour overflow-hidden), ce qui les rend plus lisibles et réduit leur longueur. De plus, comme UnoCSS génère le CSS à la volée, une classe comme w-30405 fonctionne sans configuration, là où Tailwind nécessite une modification dans le fichier de config. Je n'utilise pas le preset 'tagify' pour les mêmes raisons. Cependant, comme dans l'exemple du shortcut "card", il peut être pertinent de l'implémenter sous forme de composant : devient alors . Enfin, UnoCSS offre une DX exceptionnelle, mais exige, comme mentionné, une bonne discipline d'utilisation. Merci Grafikart pour cette vidéo de présentation d'UnoCss 👌
@@mountainart3982 Bonne question. D'après ce que je sais, UnoCss s'efforce d'avoir les mêmes classes que tailwindCss avec presset-wind afin de rester compatible à celui-ci. UnoCss ne possède pas à ma connaissance un équivalent tw-merge mais à l'inverse il me semble que tw-merge est compatible avec UnoCss ou du moins pour tout ce qui est apparent à TailwindCss. Certaine spécificités d'UnoCss ne marcheront peut-être pas avec tw-merge comme par exemple les groupes de variantes ou bien les icônes CSS. "À vérifier"
Ce serait top de faire une formation complète sur NestJS en voyant pleins de modules plutôt techniques du genre authentification, prisma, graphql, intégration de stripe, chat, etc Avec ta pédagogie claire ça pourrait aidé énormément de personnes dont moi :)
J'ai utilisé tailwindCss et UnoCss, je peux vous promettre qu'en l'état actuel, UnoCss est bien plus intéressant. Si vous avez des questions n'hésitez pas 😉
Ca à l'air sympa par contre impossible pour moi de faire fonctionner avec twig. Il me scan bien les fichiers html et autres mais il ne me traite pas les fichiers twig. J'ai cette config avec vitejs: UnoCSS ({ content: { filesystem: [ 'templates/**/*.{html,twig}' ], }, presets: [ presetUno(), presetIcons(), ] })
@@PresteusSparkling Pour le coup, je vois pas trop non. Les tokens ressemblent énormément à ceux de tailwind, plus verbeux (et encore en JSX c'est discutable), mais surtout typesafe, tu fais des ui kit très simplement avec le système de preset. Si tu utilises que les choses "basiques" de la lib, genre css(), la courbe est vraiment basse, et ça suffit largement
Ça n'appartient pas à Vite, mais ça a été créé par Anthony Fu. Ce gars c'est un mastodonte du développement qui fait partie des teams de Vue, Nuxt et Vite haha
Très intéressant cette librairie. Sinon la documentation est le nerf de la guerre de toutes les librairies, je choisi souvent les librairies fonction de la qualité de leur documentation 🤓
Enfin, la lumière sur unocss, c'est vraiment une pépite cette librairie. Merci d'en parler Grafikart
Mais oui de fou !!
Depuis la sortie de la lib je me dis qu'il faudrait que je teste ça. Je crois que là je suis convaincu. Merci pour ce bel éclairage !
Merci pour la découverte !
plutôt intéressant
merci pour la découverte, j'utiliserai surement sur un mini projet perso
Je voudrais ajouter quelques précisions à cette vidéo. Actuellement, UnoCSS est nettement plus rapide que TailwindCSS, presque instantané. Cela pourrait toutefois évoluer avec la version 4 de Tailwind. Bien que cela puisse sembler mineur, la différence est notable.
UnoCSS propose des classes raccourcies (ex. : c-orange pour text-orange, of-hidden pour overflow-hidden), ce qui les rend plus lisibles et réduit leur longueur. De plus, comme UnoCSS génère le CSS à la volée, une classe comme w-30405 fonctionne sans configuration, là où Tailwind nécessite une modification dans le fichier de config.
Je n'utilise pas le preset 'tagify' pour les mêmes raisons. Cependant, comme dans l'exemple du shortcut "card", il peut être pertinent de l'implémenter sous forme de composant : devient alors .
Enfin, UnoCSS offre une DX exceptionnelle, mais exige, comme mentionné, une bonne discipline d'utilisation.
Merci Grafikart pour cette vidéo de présentation d'UnoCss 👌
Comment on peut faire pour merger des classes un peu comme tailwind avec des cn / tailwind-merge ?
@@mountainart3982 Bonne question.
D'après ce que je sais, UnoCss s'efforce d'avoir les mêmes classes que tailwindCss avec presset-wind afin de rester compatible à celui-ci.
UnoCss ne possède pas à ma connaissance un équivalent tw-merge mais à l'inverse il me semble que tw-merge est compatible avec UnoCss ou du moins pour tout ce qui est apparent à TailwindCss.
Certaine spécificités d'UnoCss ne marcheront peut-être pas avec tw-merge comme par exemple les groupes de variantes ou bien les icônes CSS. "À vérifier"
J'aime ce gars je vous assure. 💪🏿👍🏿👌🏿👌🏿👌🏿 Merci
Super, je consomme du TAILWINCSS sur quasi tous mes projets, mais je trouve UNOCSS beaucoup fun à utiliser. Je vais migrer en douceur.
Ce serait top de faire une formation complète sur NestJS en voyant pleins de modules plutôt techniques du genre authentification, prisma, graphql, intégration de stripe, chat, etc Avec ta pédagogie claire ça pourrait aidé énormément de personnes dont moi :)
Merci pour la découverte ! Je ne comprends pas bien la valeur ajoutée par rapport a tailwind, mais intéressant tout de même
VRAIMEN JE N COMPRENDS PAS 😅
J'ai utilisé tailwindCss et UnoCss, je peux vous promettre qu'en l'état actuel, UnoCss est bien plus intéressant. Si vous avez des questions n'hésitez pas 😉
@@prenomnom8744 comment ça soyez plus claire sur l apport ...
@@prenomnom8744en quoi c’est plus intéressant ?
Ca à l'air sympa par contre impossible pour moi de faire fonctionner avec twig. Il me scan bien les fichiers html et autres mais il ne me traite pas les fichiers twig.
J'ai cette config avec vitejs:
UnoCSS ({
content: {
filesystem: [
'templates/**/*.{html,twig}'
],
},
presets: [
presetUno(),
presetIcons(),
]
})
Je voudrais que tu fasse une playlist threejs 😊
Très propre UnoCSS.
A quand une petite vidéo sur PandaCSS ?
La syntaxe et le nom des utilitaires est dégueulasse sur cette librairie 😥
La courbe d'apprentissage doit être énorme.
@@PresteusSparkling Pour le coup, je vois pas trop non. Les tokens ressemblent énormément à ceux de tailwind, plus verbeux (et encore en JSX c'est discutable), mais surtout typesafe, tu fais des ui kit très simplement avec le système de preset.
Si tu utilises que les choses "basiques" de la lib, genre css(), la courbe est vraiment basse, et ça suffit largement
Comment on peut faire pour merger des classes un peu comme tailwind avec des cn / tailwind-merge ?
unocss est orienté build time par rapport à tw qui est plus runtime
Tu peux tout à fait utiliser tailwind-merge, même avec UnoCSS.
😊😊😊
Mais je voudrais bien une petite formation en plus pour le backend
Ça appartient à Vite ? Parce que la page d’accueil est exactement la même 😮
Ça n'appartient pas à Vite, mais ça a été créé par Anthony Fu. Ce gars c'est un mastodonte du développement qui fait partie des teams de Vue, Nuxt et Vite haha
Très intéressant cette librairie. Sinon la documentation est le nerf de la guerre de toutes les librairies, je choisi souvent les librairies fonction de la qualité de leur documentation 🤓
28:20 Mon plugin est une extension de tailwind j'aimerais vraiment ton retour stp preset-wind-plus
@@moneyfr Bonjour, ton preset est complémentaire à preset-wind ou le remplace ?
@@prenomnom8744 complémentaire
Je peux faire px-6-8 ou m-7-9-3-auto et énormément d'autres choses
Tant d'outils et de complexité juste pour éviter d'avoir à maitriser correctement (S)CSS...
Tailwind is the best