Tutoriel CSS : tailwindcss
HTML-код
- Опубликовано: 4 окт 2024
- Article ► grafikart.fr/t...
Abonnez-vous ► bit.ly/Grafika...
Aujourd'hui je vous propose de découvrir le framework CSS [tailwindcss](tailwindcss.com).
Soutenez Grafikart:
Devenez premium ► grafikart.fr/p...
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/t...
tailwindcss m'a redonné goût au front depuis quelques mois, c'est ultra cool
Franchement super. Au début, je me suis dit,"euh c'est limite comme mettre un attribut style sur chaque balise", mais une fois qu'on a vu que l'on pouvait créer c'est composants, ça devient super personnalisable et vrai sympa à écrire +1 pour tailwindcss et +1 pour cette vidéo.
tuto et découverte sympa. J'ai adoré l'intervention d'un utilisateur pour avoir une deuxième vision
Super intéressant d’avoir ton avis personnel et celui d’un autre développeur
Woah putain j'en suis à 13 minutes et ça a l'air d'être tellement de travail
Merci pour ce tuto.
Je ne savais pas que ce framework existait, et cela me donne envie de le tester de mon côté, moi qui suis plus front que back.
Cela me permet en plus de decouvrir de nouvelles choses, et de m'enrichir personnellement.
Super intéressant! Bien envie de lâcher Bootstrap pour tester ça sur un ou deux projets, merci!
Les points forts de cette approche "utility first", c'est le fait de développer avec des contraintes qui vont apporter de l'homogénéité à un site. Il n'y a que 9 nuances de gris, 9 graisses de police, quelques tailles de police, etc. L'autre point c'est que c'est le retour à du style inline. De l'aveu même du créateur, ça peut paraître une mauvaise pratique au début mais ça fonctionne sur le long terme. C'est plus facile de modifier son HTML que d'update ses fichiers CSS, en évitant la problématique de "nommer" telle règle CSS particulière et évite de recourir à du BEM ou autre style de nommage. Ce qui m'ennuie en revanche, c'est le fait de passer par des règles @apply qui sont abandonnées par l'organisme de certification CSS. Je commence à l'utiliser dans des composants React et Next. Ça fonctionne correctement mais nécessite l'ajout de macro Babel (et Tailwind macro). À suivre en tout cas!
Surtout que le gros problème avec des frameworks CSS full composants comme bootstrap, c'est que tout les sites finissent par se ressembler et n'ont aucune charte graphique.
Je connaissais pas et ça a l'air très sympa. Merci !
j'aime bien le nouveau format avec des avis différents
Super première partie. J'ai découvert tailwind il y a un moment mais je ne l'ai jamais utilisé pour un gros projet. En revanche le tuto m'as remis l'envie de m'y mettre vraiment.
TRES BONNE seconde partie avec un intervenant. Pertinant comme idée, et bon interlocuteur. Ça me donne envie d'un podcast audio Grafikart :D
Je n'avais pas vu de video de toi depuis longtemps, ça te va super bien les kilos en moins!!
Bonjour, vidéo très intéressante,
Je rejoins complément Romain, les frameworks aujourd'hui sont parfois difficile a customiser et on perd plus de temps en modification qu'en conception.
Autre point non abordé tailwindCSS permet une sémantique HTML bien plus propre "Enfin.., cela dépend de son utilisateur".
TailwindCSS 2.0 répond déjà a plusieurs des soucis énoncé dans cette vidéo.
Merci pour cette vidéo.
Très instructif. Merci
super tuto, merci.
C'est la première fois que je m'interesse au développement en général, si quelqu'un a des liens ytb pour apprendre les bases (body, class, head etc) pour que j'y vois plus clair jss preneur, merci beaucoup de votre aide
Tu devrais avoir ton bonheur ici : www.grafikart.fr/formations
@@grafikart on va devenir meilleurs amis merci beaucoup !
Salut! Super vidéo! Je vois que tu utilises linux. Quelle distribution, STp? pour ma part manjaro sur laptop et fedora en fixe (je suis dev frontent JS) . Bonne continuation!
Merci pour ce tuto
c'est vraiment cool
Super video, tailwindcss a vraiment l'air sympa je vais l'utiliser dans un petit projet pour le prendre en main. Sinon j'ai une question, quelqu'un sait sous quel os il est dans cette vidéo ? Merci d'avance
Grafitkart, autant te dire, que des classes par si par la dans les *.html c'est tres enervant, ca me fatigue les yeux, c'est sale, ca me donne l'impression de trop reflechir.
Je peux rapidement faire ce que tailwinds me permet de faire la. je trouve qu'avec CSS pur je suis plus precis (en fait je fais comme je veux).
Je suis d'accord avec toi, certains classe sont pas tres bien poster quoi (comme le font-bold)
Hello ! Merci pour ton travail. Sais-tu si, depuis le partage de cette vidéo, Tailwind a beaucoup évolué ? Récemment la v3.0.0-alpha.1 vient de paraitre mais je vais plutôt rester sur l'apprentissage de la v2 pour l'instant. Je m'apprête à suivre ton tuto, je n'ai pas commencé encore et disons que les vidéos qui ont 2 ans font toujours un peu peur pour leur pertinence actuelle. Mais je tente ! Merci encore.
Les classes n'ont pas changé (certaines ont été rajouté) mais c'est l'outillage qui a évolué autour. Le principe reste vraiment le même.
Est ce que vous pourriez répondre à mon interrogation ?
Je me demandais si il n'était "trop mauvais" de faire énormement de CSS via les class HTML. Que ce sois pour le réferencement ou pour les bonnes pratiques ?
Merci d'avance !
Pour les bonnes pratiques, bootstrap, semantic ou d'autres librairies css fonctionne selon ce modèle de classe, donc je pense pas que ce soit hyper sale. Par contre effectivement, les recommandations pour le référencement préconise des classes et id compréhensible et reflétant leur utilisation, et ici c'est purement des classes de style. Donc je suis curieux de savoir l'impact sur le référencement également :)
@@GuillaumeCurtil C'est là que faire des classes plus générique avec @apply peut devenir intéressant pour optimiser le SEO !
Bon, pour quelqu'un qui n'a pas trop envie de se prendre la tête sur les styles mais dans la pratique, on a encore les clients qui gueule comme quoi ce n'est pas les écarts qu'il y a sur la maquette.
J'ai rien compris à l'installation, tu scroll à travers la doc comme si tout ces termes POSTCSS/CLI/NPX étaient évidents pour tout le monde :(
Hello, merci pour la video. J'aimerais avoir vos points de vue. Est-ce que l'utilisation de Tailwind est vraiment adaptée dans le cas de sites "Pixel Perfect" avec un design vraiment spécifique avec des maquettes sur mesure ? J'ai peur que ça devienne un peu une usine à gaz dans ce cas là par rapport à un bon vieux sass ?
Je ne pense pas car si tu as un design spécifique (et le design system qui va avec) mieux vaut te construire des classes adaptées à tes besoins.
PK KE LE MIEN EST PAS RESPONSIVE :'(
Super vidéo, je l'ai tellement regardé que votre voix est entrée dans me tête au point que je me suis demandé si c'est vous qui posez la question à Julien Bobroff dans cette vidéo : ruclips.net/video/SA1uzOa7K2c/видео.html 😄 à 1:13:57
es que c'est mieux que bootstrap ?
Cest vscode comme editeur de code ?
Alors voila un autre avis de développeur que je suis. Alors je pense qu'il faut utiliser ce Framework dans une utilisation de base d'une structure et non dans la globalité du site. L'avantage c'est d'avoir une base qui est très purifié de superflu grâce au purge.
Et pourtant votre vidéo est visiblement bien traité et excellemment préparé pour les abonnés et gratuitement expliquer avec des détails important, mais ce cher monsieur qui sait tout à mit un "dislike" sur la vidéo 😓 C'est tout simplement incompréhensible cette manque de reconnaissance. Si seulement il s'avait à quel point c'est chiant de traiter une vidéo dans les montages 😤
C'est pas parce que tu dislike que tu remet en question le travail de grafitkart, c'est juste que t'aime pas la vidéo...
Like : J'aime
Dislike : J'aime pas
Ça me paraissait logique mais apparemment pas pour tout le monde
@@SimonLedoux j'ai horreur de disliker le travail de quelqu'un je suis RUclipsur et je sais ce que ça fait
@@hegelmotokoua il faut accepter que des gens n'aime ton contenu, et d'autre non, dans ce cas, pourquoi t'es sur RUclips si tu n'accepte pas la critique
Internet c'est comme ça, c'est pas les bisounours
@@SimonLedoux merci pour le conseil, je suis fort touché.
@@hegelmotokoua de rien, si tu as besoin que je te réapprenne la vie, dis le moi, j'adore aider les gens en difficulté
hum .. c super verbeux du coup ... quel interet comparé aux classiques ? bulma , foundation, bootstrap, voir semantic/fromantic ???
alors ok vous avez un fichier css "light" mais franchement c pas ca qui va réellement jouer au vue de ce que l'on envoie aujourd'hui au user
En fait en ecoutant ton avis , je suis tout a fait d'accord avec toi.
Via l'intervention de Romain on comprend assez vite que le design passe au second plan . Un designer en interne tu le brief sur ce que tu veux rien a voir avec une agence.
Quand j'entend qu'un site Bootstrap ou fondation ne peux pas etre modifié facilement c'est surtout un manque d'experience sur ces framework je pense.
si l'on cherche facile/souple mieux vaut opter pour Bulma ou Fomantic
4 énarques ont disliké rapidement cette vidéo, il faut le savoir.
hi I'm learning Tailwind in Persian language
c'est le pire framework que j'ai vu dans ma vie,
3 jours et j'ai pas pu encore l'installer correctement.
pour développer une page il me faut faire le tour de monde,
je ne vois pas pourquoi certains développeurs développent des frameworks pour ne pas faciliter la vie ????
Un framework de plus qui bousille la créativité dans le code
MDR
@@SimonLedoux Pk en rire ? J'ai tort selon toi ?
@@anarchy5906 les framework sont fait pour des projets qui ont pas besoin d'interface complexe et d'aller vite. Pas besoin réinventer la roue quand ça existe puis tout le monde n'aime pas faire du front et vice versa donc c'est sympa d'avoir des framework pour faciliter la vie.
@@Macintoshdfr Pour les projets avec une deadline très courte, je suis totalement d'accord avec toi, mais pour les projets ayant besoin d'un UI novateur, je pense que le framework bridera une partie de la conception de celui-ci, après rien ne coûte d'utiliser un petit scrollreveal ou encore un bootstrap ou autre pour finir un projet dans les temps avec un délai très court, mais c'est quand même dommage pour les projets ré-inventants ou innovants les UI.
Merci bien @Graphikart