Formations Gratuites

CSS utilitaire d’abord avec Tailwind

CSS utilitaire d'abord avec Tailwind

Description

Modernisez vos styles avec Tailwind, le framework CSS populaire axé sur les utilitaires.

Au cours des dernières années, le CSS axé sur les utilitaires est devenu une tendance populaire dans le paysage front-end. Vous l’avez peut-être vu mentionné à côté d’un outil appelé Tailwind CSS.

Alors, qu’est-ce que « l’utilité » ?

Quel problème cette approche axée sur l’utilité résout-elle?

Comment Tailwind s’intègre-t-il dans tout cela ?

Et surtout : comment appliquer Tailwind dans une application Vue.js ?

Nous allons répondre à tout cela dans ce cours.

D’accord, mais pourquoi avons-nous besoin de Tailwind?
Notez que dans l’exemple ci-dessus, nous n’avons même pas eu besoin d’utiliser de framework. Alors pourquoi avons-nous besoin de Tailwind, ou de tout autre cadre similaire d’ailleurs?

Tout d’abord, quelqu’un doit créer toutes ces classes d’utilitaires CSS (des centaines), donc soit vous les créez vous-même, soit vous pouvez utiliser une solution existante avec des conventions de dénomination largement adoptées.

Deuxièmement, un framework fournit des fonctionnalités plus utiles, telles que la compilation juste à temps pour créer des classes dynamiques et des fonctionnalités de conception réactive.

Nous en parlerons davantage plus tard dans le cours.

Enfin, un framework peut être personnalisé avec vos propres paramètres de configuration.

De quoi parle ce cours ?
Ce cours est structuré autour de la refactorisation d’une application Vue.js existante. En cours de route, vous apprendrez les bases de l’utilisation de Tailwind. Et nous aborderons également des sujets avancés tels que la conception réactive, le style conditionnel et les configurations. Nous terminerons le cours avec les leçons finales sur les modèles de classe personnalisée et de réutilisation de code.

À la fin, vous pourrez appliquer Tailwind dans un projet Vue.js.

Si cela vous convient, passons à la leçon suivante où nous configurerons Tailwind pour une application Vue.js.

Dernière mise à jour 6/2023

Liens de téléchargement

Téléchargement direct

CSS utilitaire d’abord avec Tailwind.zip (211,8 Mo) | Miroir

Quitter la version mobile