Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte00:00:00 :Il est maintenant temps d'inclure nos fichiers statiques et notamment le fichier CSS qui va être généré par Tailwind dans notre projet.Pour commencer, il faut initialiser Tailwind à l'intérieur de notre projet.
00:00:11 :On va ouvrir un terminal et on va utiliser l'utilitaire Tailwind CSS qu'on avait téléchargé précédemment.Pour initialiser Tailwind à l'intérieur de notre projet, ça va être exactement la même commande qu'avec Poetry, ça va être la commande init.
00:00:24 :Sauf que cette fois-ci, on va utiliser bien entendu l'utilitaire de Tailwind.Donc Tailwind CSS init, je valide avec entrée et vous allez voir que ça va tout simplement créer un fichier Tailwind.config.js
00:00:35 :et dans ce fichier, on a la configuration de Tailwind.Pour l'instant, on n'a rien à l'intérieur de Content, on va laisser comme ça pour l'instant.
00:00:42 :On va juste s'occuper pour l'instant de la génération du fichier CSS de base,mais vous allez voir que par la suite, il va falloir modifier cette variable pour indiquer les fichiers dans lesquels on souhaite chercher des classes Tailwind.
00:01:00 :Donc ce fichier, je vais le créer à l'intérieur d'un dossier statique qu'on va créer tout de suite à l'intérieur de notre dossier FlaskJPT.Donc je vais faire clic droit New Directory et on va créer directement toute la structure en mettant static.src.css
00:01:15 :et on peut même mettre le fichier comme on l'avait vu précédemment si on souhaite directement créer le fichier à l'intérieur de cette structure.Donc vous voyez que c'est très pratique même si vous créez un dossier au départ, vous pouvez vraiment créer toute cette structure de dossier et même le fichier en une seule fois.
00:01:35 :Donc là on a tout simplement créé un dossier qui va contenir nos fichiers statiques.On a ensuite un dossier source puisque ça, ça va être les sources.
00:01:49 :Là on est spécifié avec le sous dossier CSS qu'on va contenir ici les fichiers CSS.Donc ça fait une grande structure ici pour pas grand chose puisqu'on a juste un fichier et on va faire la même chose plus tard avec les fichiers javascript.
00:02:00 :Donc c'est vraiment juste pour bien séparer les choses au cas où on aurait beaucoup plus de fichiers par la suite.Là vous allez voir que dans cette application on va rester avec très peu de fichiers mais c'est quand même important dès le début de bien séparer les choses même si au début vous n'avez que quelques fichiers.
00:02:31 :Donc le fichier qu'on va mettre dans le dossier dist.Donc pour ça on va utiliser là encore Tailwind CSS et on va définir notre fichier d'input.
00:02:38 :Donc on va faire "-i".Donc le fichier d'input c'est celui qu'on vient de créer qui est dans static.source.css, input.css et on va mettre "-o".Pour spécifier le output et on va dire qu'on veut le mettre dans static.dist.css et on va l'appeler style.css.
00:02:55 :C'est un nom communément admis pour les fichiers de style de CSS.Donc là les noms des fichiers n'ont pas vraiment d'importance.Là c'est vraiment plus des noms que je suis habitué à créer.
00:03:11 :Donc on ne va jamais écrire directement du CSS dans ce fichier style.On n'a pas besoin de créer au préalable la structure, l'outil va la créer pour nous.
00:03:18 :Donc je valide avec entrée et vous allez voir que ça va aller assez vite.Il va créer le fichier dans le dossier dist et si on va voir vous allez voir qu'il y a pas mal de choses ici.
00:03:26 :Donc ça c'est toutes les classes de base qui vont nous permettre d'utiliser Tailwind.Donc la chose importante à noter ici c'est qu'à chaque fois qu'on veut faire des modifications.
00:03:34 :Donc on va les faire dans notre fichier input et pour qu'elle soit prise en compte et qu'elle se retrouve dans le fichier style.Il va falloir relancer cette commande.
00:03:41 :Vous avez différentes options avec cette commande qui sont disponibles.Il y a une première option qui est une option qu'on va pouvoir utiliser quand on va vouloir servir nos fichiers en production.
00:03:49 :C'est la commande minify.Donc là vous voyez si je vais dans le fichier style on a tout qui est mis à la ligne.Et si on veut avoir un fichier un petit peu plus petit on peut le spécifier avec minify.
00:03:58 :Et si j'exécute cette commande vous voyez que là ça a tout concaténé sur une seule ligne.Donc ça permet de réduire légèrement la taille du fichier.
00:04:05 :Une autre commande un peu plus pratique ça va être la commande watch.Qui va permettre de continuellement vérifier notre fichier CSS pour reconstruire le fichier de destination.
00:04:14 :Si jamais il y a des changements dans celui-ci.Donc ça c'est une commande généralement que vous laissez tourner en arrière-plan quand vous développez.Puisque c'est un petit peu pénible en fait à chaque fois que vous voulez appliquer les modifications.
00:04:23 :D'avoir besoin de relancer cette commande.Donc moi ce que je fais c'est que je fais "-watch".On va lancer et là vous allez voir que le script ne s'arrête pas.
00:04:31 :Donc on a la génération qui a été faite.Et il va vérifier en fait ce fichier d'input.Et vous allez voir que dès que je vais faire une modification ici.
00:04:37 :Par exemple si je fais un bouton primary.Et que je mets des directives à l'intérieur.Donc on va faire par exemple un at apply text red 500.
00:04:46 :Vous allez voir que automatiquement il va détecter qu'il y a eu un changement.Donc dès que le fichier est sauvegardé.Donc avec PyCharm ça se fait automatiquement.
00:04:54 :Si vous voulez forcer cette sauvegarde vous pouvez faire "-command s".Et vous allez voir que à chaque fois qu'il y a une modification.Il va la remarquer et il va refaire un build.
00:05:02 :Donc là il n'y a aucune modification qui a été faite.Donc il ne rebuild pas.Mais si j'enlève par exemple tout ça ici.Et que je refais un "-command s".
00:05:10 :Ou que j'attends qu'il détecte que le fichier soit sauvé.Vous allez voir que là automatiquement ça va très rapidement reconstruire le fichier source.Donc généralement c'est ce qu'on fait.
00:05:18 :On laisse un watch comme ça.Vous pouvez également renommer cette table ici.Donc vous pouvez mettre par exemple "-telwind css build".Tout simplement.Et comme ça vous avez cet onglet en arrière plan qui va tourner.
00:05:28 :Et qui va automatiquement recréer tout ce qu'il faut.Quand vous modifiez votre fichier css.Si vous ne souhaitez pas le faire tourner à chaque fois.
00:05:34 :Et bien vous pouvez tout simplement vous assurer.Que dès que vous souhaitez régénérer le fichier.Et bien vous relancez cette commande qui va créer le fichier d'output.
00:05:41 :A partir du fichier d'input.Donc maintenant la dernière chose qu'il nous reste à faire.C'est de spécifier comme je vous avais dit au début de cette partie.
00:05:47 :Les fichiers qui vont contenir des classes "-telwind".Puisque pour l'instant on n'a rien dans le content ici.Donc si je modifie mon fichier html par exemple ici.
00:05:55 :Pour ajouter une classe.Donc on va mettre une classe "-telwind".Par exemple "-test red 500".Pour mettre le texte en rouge.Si je lance mon application.
00:06:03 :Et que je vais voir mon application.Vous voyez que le texte n'a pas changé.Puisque déjà on n'a pas lancé le processus ici.Donc moi je vais le lancer en arrière plan comme ça.
00:06:10 :Il va continuellement reconstruire le fichier.Mais en plus ici on n'a pas spécifié dans le config.Qu'on souhaite vérifier tous les fichiers html.Donc pour ça il va falloir le spécifier ici.
00:06:21 :Nous on va être assez spécifique pour l'instant.On va dire qu'on souhaite regarder uniquement.Les fichiers qui se trouvent à l'intérieur de template.Et on va mettre une double astérisque ici.
00:06:29 :Pour faire une recherche récursive.Donc là on n'a pas de sous-dossier à l'intérieur du template.Mais si jamais par la suite.Vous ajoutez des sous-dossiers à l'intérieur de template.
00:06:37 :Et bien il faut être sûr de bien pouvoir.Aller à l'intérieur de ces sous-dossiers.Et c'est à ça que vont servir les doubles astérisques.On peut aussi mettre directement pour l'instant.
00:06:45 :Juste le nom du fichier index.html.Mais on va directement prévoir un petit peu plus long terme.Même si jusqu'à la fin de cette formation.On aura uniquement ce fichier index.html.
00:06:54 :Je vais quand même mettre ici une astérisque.Pour cibler tous les fichiers html.A l'intérieur de ce dossier template.Ou de ces sous-dossiers.Donc maintenant qu'on a fait ça.
00:07:03 :Il va pouvoir chercher à l'intérieur des fichiers html.Donc comme ce index.html ici.S'il trouve des classes tailwind.Et les inclure dans notre fichier style.css.
00:07:11 :Donc là je retourne voir sur ma page.Et là on a toujours pas le titre en rouge.C'est normal.Puisqu'on a pas encore chargé la balise css.
00:07:18 :Dans notre fichier html.On le fera par la suite.Mais si on va voir dans le fichier style.css.Et qu'on fait une recherche pour textred500.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
