Utiliser Tailwind CSS avec Django
HTML-код
- Опубликовано: 22 авг 2021
- Dans cette vidéo, je vais vous montrer comment utiliser le package django-tailwind pour utiliser Tailwind CSS à l'intérieur d'un projet Django.
📖 L'article détaillé sur Docstring
www.docstring.fr/blog/utilise...
🔗 Django-tailwind
django-tailwind.readthedocs.i...
🔗 Node JS
nodejs.org/
🔗 Tailwind CSS
tailwindcss.com/
🔗 Le code de cette vidéo sur Github
github.com/DocstringFr/django...
🔗 La formation complète Python sur Udemy (+60h de formation)
● bit.ly/3iGZu9a
🔖 Les formules d'abonnement à Docstring
● www.docstring.fr/checkout/?ut...
👨💻 Toutes les formations de Docstring
● www.docstring.fr/formations/?...
📖 Les articles du blog
● www.docstring.fr/blog/?...
🎙Le Podcast
● www.docstring.fr/podcast/?utm...
💬 Rejoins le serveur Discord
● www.docstring.fr/discord/?utm...
I did not understand what you were saying, but when I did everything step by step, everything worked out for me. You are the only one who could help. Thanks a lot!!!
Merci pour cette vidéo. J'avais jamais utilisé ce framework et je compte l'essayer bientôt... Merci encore!
Merci Thibault pour la vidéo ! j'ai commencé à regarder tailwind mais pour le moment je vais attendre d'être plus fort en css pour vraiment m'y mettre
Encore du bon travail, bravo
I didn’t understand nearly 100% of that besides the English words, but it was still helpful. Thank you
Excellent comme toujours !
quelques ajustements nécessaires depuis le passage à la version 3 mais très bonne introduction tout de même 😉
Je viens d'avoir la solution ! Il fallait utiliser des back slashs au lieu des slashs et précéder le tout par r afin que Python ne puisse l'interprété.
MERCI QUAND MEME POUR LA VIDéO çA M'A BEAUCOUP AIDé. Je continuerai à vous suivre !
Vraiment pas mal plus cette vidéo ! 😂👍
Excellent
Excellent tuto, clair et concis. Merci.
merci bcp
Merci.
J’attendais cette video mdr
Je lis dans les pensées de mes abonnés que veux-tu 😎
@@Docstring prochaine etape c'est ajouter Vue js ?? aha
@@valentinfigueiredo Ça dépend du projet. Sur Docstring je n'en sens pas encore la nécessité. Mais j'ai prévu des tutos sur le sujet car c'est très demandé.
Thank
Question ?
quel fichier a choisir quand on a 2 fichiers de base.html , par exemple : theme/base.html et templates/base.html merci encore pour les tutos
Super vidéo. La purge est pas mal cependant est ce qu’il est mieux d’avoir un fichier css par page pour avoir le plus petit fichier css possible (et ne charger que ce qui est utile) ou un plus gros fichier css globale pour l’ensemble du site ?
Si tu as vraiment des classes très spécifiques que tu n’utilises qu’à certains endroits ça peut être une bonne idée de séparer en plusieurs fichiers pour ne pas charger inutilement beaucoup de CSS qui ne sert à rien oui. Pareil avec JavaScript.
I dont know French, but understood. Sir
stp j un prblm avec save date automate avec le type DateField
timezone me donne date et time mais j besoin date
def save(self, *args, **kwargs):
if self.DATE is None:
self.DATE = ??????
return super().save(*args, **kwargs)
Impossible de t’aider avec seulement trois lignes de code comme ça et aucun contexte, désolé. Les objets datetime ont une méthode date qui te permet de récupérer un objet de date sans l’heure et les minutes mais je ne sais pas si c’est ça que tu cherches.
@@Docstring prk impossible??
le model
DATE = models.DateField(auto_created=True)
g besoin sauvegarde la date de meme jour avec fonction save
@@hakimdz3358 utilise datetime.today()
@@Docstringmodule 'datetime' has no attribute 'today'
@@hakimdz3358
do you import the datetime module?
c'est bien vous pouvez mettre plus de contenu sur pyqt5
Oui ! Il faut que je mette à jour toute ma formation sur PySide avec PySide6 donc ça va arriver !
J'ai une question mais je doute que tu la verra le tuto est vieux, comment faire pour integrer le systeme de composants avec django-tailwind (si se n'est pas possible comment faire pour que ces composants soit utilisable dans ton projet)
Tu parles de quels composants? Un simple copier coller du code dans ton projet devrait suffire
Merci beaucoup !
J'ai cependant une erreur quand je lance la commande "python manage.py tailwind install".
C'est évidemment le fait que selon la machine je n'ai pas Node cependant il est installé et est dans mes variables d'environnements.
Voilà l'erreur :
Example:
NPM_BIN_PATH = "/usr/local/bin/npm"
Il y a évidemment tout le texte avant cela avec "CommandError: etc etc" mais j'imagine que tu es déjà tombé sur cette erreur.
Pourquoi j'ai ce souci et comment le régler ? J'aimerais préciser aussi que quand j'ai lancé la commande "python manage.py tailwind init" j'ai le choix pour l'app_name que j'ai laissé avec le nom "theme" par défaut mais je n'ai pas eu le choix pour 1 ou 2. Sûrement une mise à jour.
Je voudrais savoir si cette méthode est préconisé pour une installation pour une mise en production et non l'installation de Tailwind seulement en local.
Merci d'avance si tu tombes sur mon commentaire !
C'est bon j'ai trouvé il suffisait d'un peu lire la doc 🙄...
c'est bien et pas bien à la fois ☺☺
Pourquoi 😄 ?
@@Docstring bah, remplacer '' par cette usine à gaz appelle des questions ☺
là est la question ☺☺☺
@@PierreSchinko comme n’importe quel framework. Je préfère gagner du temps sur le développement et le design pour un fichier quelques centaines de k plus lourd que si je faisais tout sans framework. Et une fois que le setup est fait on n’a plus à y penser :)
@@Docstring d'ou ma première réflexion : "c'est bien et c'est pas bien" ☻☺
mais, je maintiens, c'est lourd ☺☺
de plus, j'aime avoir la main sur ce que je fais
@@PierreSchinko justement je trouve que de tous les framework c’est celui qui se rapproche le plus du CSS pur. Comparativement à bootstrap ou tu peux t’en sortir sans vraiment trop connaître le css mais qui du coup a ses limites. Avec tailwind tu fais du css mais direct dans ton html et ça t’évite de devoir penser à tout le « naming convention » et à passer ton temps à alterner entre ton html et ton css.
tailwind, la plus mauvaise libs css ! Quand vous devrez faire une refacto complète dans les vues, vous repenserez à ce commentaire. Pourquoi je dis ça ?
if une_class == "une règle CSS":
print('demandez vous pourquoi aucun projet au-delà de 2 pages utilise cette mauvaise librairie"')
;)
Tu peux élaborer 🤔? Au passage, il y a un peu plus que 2 pages sur Docstring et ça me convient très bien. Mais je suis (sérieusement) intéressé par des contre arguments, mon avis c'est vraiment que (peu importe la bibliothèque) ça dépend des projets.
@@Docstring pour rappel :
- html = contenu
- css = mise en forme (cascading style sheets). Il y a un système d'héritage et celui ci est bien pratique (surtout quand on le maîtrise !) Pourquoi ? Parce que le moindre changement se fait SANS effort.
- Le principe même du développement, c'est de factoriser le code. Pourquoi ? Parce que le moindre changement se fait SANS effort.
- Dans le developpement, on sépare les diverses couches afin de bénéficier d'une maintenance optimale. Pourquoi ? Parce que le moindre changement se fait SANS effort.
C'est facile d'afficher. Par contre, maintenir et faire évoluer sereinement, c'est une autre paire de manche. En ce moment, je maintiens un site qui contient environs 1 300 000 de pages.
1. Le jour où tu décides de changer la couleur rouge en bleu sur plusieurs élements, soit tu vas changer ta fameuse class qui se nomme color-red (la class n'aura plus aucun sens) soit tu dois faire une refacto. Or, si tu fais bien les choses, c'est 30 secondes pour changer la couleur de tout un tas de pages !
2. Tu as 7 vues avec des tableaux qui ont la même charte mais qui sont légèrement différents. Tu as une demie journée pour livrer ces 7 vues.
3. Tu as un projet où il y a plusieurs univers de couleurs mais aussi des couleurs transverses. Bonne chance pour gérer ça avec cette librairie.
4. Avec cette librairie, comment veux-tu avoir un code html léger et lisible ? (je te rappelle la pep20 qui peut être considéré pour tous les langages)
5. Cette librairie ne peut couvrir tous les cas de figures. Alors tu vas devoir créer un erzats. Pour la maintenance, ça va être fun.
6. (c'est mon cas pour le projet que je maintiens). J'ai accès au css mais une fois que j'ai livré le html, je n'ai plus vraiment accès à celui ci. Je dois faire la demande au presta.
7. Comme parfois, tu n'as pas accès html (amadeus.com/fr/a-propos-damadeus ==> je ne parle pas de ce site, mais de leurs produits), comment fais tu pour gérer la mise en forme avec tailwind ?
Pour finir, je t'invite à faire des recherches sur le net à propos de : pourquoi les styles en ligne sont déconseillés ? Hop pop pop ==> tailwind une class = un style ! Sache que j'ai plus de 50 projets à mon actif (et pas des petits trucs) et que le dev back ou front, ça va je connais bien.
@@MrNiuxe j’entends bien tous ces points, mais tu considères donc que la stack à utiliser pour un site d’une page, d’une centaine de page ou de 1.3 millions de pages, doit être la même ?
Il est possible également de factoriser certains styles que tu utilises régulièrement avec @apply, c’est ce que j’ai fait sur Docstring pour les éléments qui reviennent souvent, comme les cards, boutons et tous les éléments du genre. Une seule classe à appliquer et si je veux changer la largeur du bord, je la change à un endroit et c’est bon.
En tout cas je pense que ça dépend vraiment des projets et des développeurs. Tous les projets sont différents, et un projet unipersonnel avec un dev majoritairement back versus un projet sur des années avec toute une équipe derrière, ce n’est pas comparable.
Il est clair que tailwind n’est pas fait pour tous les projets, tout comme bootstrap ou autre.
@@Docstring
Pour une vue ou pour un single page (Backbone, Ember, webcomponent, Knowout, react, angular, vue et svelte (svelte étant le meilleur de tous ;)), tailwind peut être utilisé puisque tu fais l'équivalent d'un template email. Quand tu passes à 3 vues, tailwind est oubliable.
----
>
----
tu as tout à fait raison. Bien que je n'aime pas bootstrap/zurb foundation (code lourd), ça peut être une bonne base même sur de gros projets.