Bases du CSS de tailwind

1. Présentation: Bienvenue dans le cours Tailwind CSS Fundamentals. Dans ce cours pour débutants, je vais vous guider dans l'installation et l'utilisation de Tailwind CSS, afin de créer une page Web moderne Je suis David Morales. Je travaille en tant que développeur Web depuis plus de 20 ans. J'ai de l'expérience avec Tailwind CSS depuis sa deuxième version. Je l'ai intégré à mes derniers projets professionnels, notamment des thèmes WordPress personnalisés et des applications Web complexes. À la fin de ce cours, vous serez en mesure de créer des prototypes rapides de différentes manières et vous aurez créé une page Web complète à partir de zéro à l'aide de Visual Studio Code. Vous saurez comment détecter le mode sombre et changer les couleurs automatiquement. Vous aurez également installé les plugins en les utilisant de manière stratégique. En outre, vous apprendrez à consulter la documentation des cours dont vous avez besoin. Vous allez découvrir les différentes manières d'utiliser le CSS de Tailwind. Ensuite, je vous guiderai étape par étape dans la préparation de votre environnement de développement et vous commencerez à créer un site Web à partir de zéro. D'abord pour le mobile, puis pour le rendre réactif. Vous apprendrez également à appliquer des états CSS, à travailler en mode sombre, à réutiliser des classes courantes et à utiliser les plugins officiels qui complètent très bien le framework. J'ai conçu ce cours pour les développeurs et les concepteurs qui souhaitent apprendre à utiliser Tailwind CSS sans passer du temps étudier la documentation ou à faire des recherches sur son fonctionnement Cela vous évitera d'avoir à faire des essais et à des erreurs pour aller droit au but. Vous n'avez besoin que de connaissances de base en HTML et CSS. Je vous verrai à l'intérieur pour créer un site Web avec Tailwind CSS. 2. Qu'est-ce que Tailwind CSS et à quoi sert-il ?: Qu'est-ce que Tailwind CSS ? Il s'agit d'un framework CSS permettant d'ajouter des styles à une page Web sans quitter le code HTML. En d'autres termes, dans le même document où vous créez la page, vous appliquez les classes dont vous avez besoin. Ces classes sont appelées classes utilitaires, car chacune a une fonction spécifique. Ce sont comme des pièces Lego où vous utilisez celles dont vous avez besoin. Imaginez que vous avez un titre H1 et que vous souhaitez lui appliquer trois styles : une taille de 48 pixels, un titre en gras et un style centré. Vous pouvez écrire une classe CSS standard qui ressemblerait à ceci et l'utiliser dans le H1. Dans le CSS Tailwind, vous ne définissez aucune classe, mais vous utilisez les éléments qu'il vous donne directement dans le code HTML. Dans ce cas, « text-5xl », « font-bold » et « text-center ». Ces classes génèrent exactement le même CSS. Au début, il est normal que cette série de cours soit un peu effrayante et donne l'impression d'être encombrée. Au début, la solution avec le CSS standard semble plus organisée. Mais lorsque le temps passe, après avoir créé la page, si vous devez revenir en arrière et apporter des modifications , vous savez d'un coup d'œil ce que font les classes lorsque vous utilisez le CSS Tailwind. Cependant, avec le CSS standard, vous devez rechercher la définition de la classe de titre. Mais peu importe ce que vous lisez, votre esprit ne cliquera pas tant que vous ne l'aurez pas essayé. Lorsque vous créez une page avec Tailwind CSS depuis un certain temps et que vous l'avez expérimentée, vous vous rendez compte de ses avantages. Et quels sont ces avantages ? Les premiers avantages que vous aurez sont... Vous n'avez pas à penser à nommer les classes. Cela consomme de l'énergie que vous pourriez consacrer à la création de la page. De plus, le choix d'un mauvais nom peut nécessiter de nombreuses refactorisations ultérieures pour le corriger. Vous n'avez pas de fichiers CSS à gérer ou à refactoriser, car tout se trouve dans le code HTML. Vous serez assuré que les modifications que vous apportez à une page n'endommageront pas les autres, puisque vous travaillez localement dans chaque fichier HTML. Vous avez des limites prédéfinies afin que les pages soient visuellement cohérentes. Par exemple, examinez les incréments de taille et les couleurs. Vous avez un système au lieu de valeurs arbitraires. Vous pouvez toutefois personnaliser et définir vos incréments. Vous pouvez spécifier des points d'arrêt dans votre code pour rendre votre page réactive sans requêtes multimédia. Si vous avez un paragraphe, vous pouvez facilement le rendre rouge par défaut, mais il sera vert à 768 pixels et bleu à 1 024 pixels. En utilisant la même mise en forme, vous pouvez appliquer des états CSS. Par exemple, si vous avez un bouton bleu, assombrir lorsque vous passez la souris est aussi simple que d'attribuer le modificateur de survol. Mais que se passe-t-il lorsque nous avons des composants ayant exactement les mêmes classes ? Par exemple, les boutons ont généralement la même apparence, ne modifiant que l'étiquette. Il s'agit du célèbre Don't Repeat Yourself. Dans ces cas, vous pouvez créer votre classe comme vous le feriez avec du CSS standard, mais en utilisant les classes CSS Tailwind. Ajoutez simplement @apply devant, et vous utilisez votre classe sur le bouton, comme vous le feriez habituellement. Voici un bref aperçu de ce que vous allez apprendre dans le cours. Dans les premières leçons, vous allez préparer votre environnement de développement en installant Tailwind CSS et en configurant votre éditeur de code. Ensuite, nous passerons à la création d'une page Web avec une liste de films. Tout d'abord, vous allez le concevoir pour les appareils mobiles, puis vous le rendrez réactif. Vous allez ensuite ajouter des états CSS au bouton. Vous allez adapter la page pour le mode sombre. Vous utiliserez plusieurs boutons pour extraire les classes communes vers un composant que vous pourrez réutiliser. Enfin, vous utiliserez certains plugins officiels pour effectuer des tâches très courantes, comme mettre en forme du texte brut, comme ce qui provient d'une base de données. Donnez du style aux formulaires et limitez le texte à un maximum de lignes, tout en préservant l'harmonie visuelle. Line-clamp était autrefois un plugin, mais il est désormais intégré. À la fin, je vous donnerai quelques recommandations sur ce que vous devez faire lorsque vous aurez terminé le cours. 3. Introduction aux prototypes rapides: Vous n'avez rien à installer si vous souhaitez utiliser le CSS Tailwind pour un prototypage rapide. Vous pouvez le faire de deux manières. Le premier se trouve dans votre navigateur, avec Tailwind Play. Dans la documentation du site Web CSS de Tailwind, une section intitulée Playground vous montre un éditeur en ligne avec Tailwind CSS intégré. Ne le sous-estimez pas car les développeurs du framework l'utilisent quotidiennement pour travailler sur de nouvelles fonctionnalités. Il dispose d'un aperçu en temps réel et d'un éditeur de code similaire à Visual Studio Code, avec le framework et les plugins officiels chargés par défaut. La seconde consiste à utiliser votre éditeur de code préféré avec Play CDN. Dans le code HTML, vous incluez le code JavaScript de son CDN et vous avez accès au framework. Vous pouvez le personnaliser et utiliser les plugins. Bien que vous n'ayez pas accès à beaucoup d'autres choses, vous pouvez l'utiliser pour faire des choses rapides. Dans les leçons suivantes, je vais vous montrer comment utiliser Tailwind CSS de ces deux manières. 4. Tailwind Play : un éditeur en ligne complet: Le moyen le plus simple d'essayer Tailwind CSS est de passer par le terrain de jeu. Il s'agit d'un éditeur en ligne dans lequel le framework est déjà chargé, avec un aperçu qui se met à jour au fur et à mesure que vous tapez. Pour accéder à cet outil, depuis le site officiel de Tailwind CSS, cliquez sur Docs. Voici toute la documentation, mais sur le côté gauche, il y a des sections avec une icône dans chacune d'elles. Cliquez sur Playground. Et le voici. Il y a deux grandes parties : l'éditeur sur la gauche et l'aperçu sur la droite. Ce que vous voyez est un exemple qui se charge lorsque vous ouvrez l'éditeur, afin que vous puissiez le modifier et l'expérimenter. Il y a une numérotation en haut, qui correspond à la version de Tailwind CSS qui a été chargée. Si vous cliquez, vous verrez la dernière version disponible, pour chaque version majeure. Je laisserai la version 3 sélectionnée. Comme je l'ai déjà dit, sur le côté gauche, il y a l'éditeur. C'est plutôt bon. Il comporte la mise en évidence de la syntaxe , la saisie automatique , la détection des couleurs , l' indentation, etc. En haut, il y a deux autres onglets. Le premier est l'onglet CSS personnalisé. Bien que ce ne soit pas nécessaire, vous devrez parfois l'utiliser. Pour l'instant, il est vide. Il ne contient que ces trois directives qui sont chargées par défaut, lorsque le fichier est vide. Peu importe qu'ils soient là ou non, ils seront chargés de toute façon. Le dernier onglet est destiné à la configuration. Pour essayer de faire des choses simples, vous n'aurez pas besoin de le toucher. Mais si vous souhaitez personnaliser le framework et utiliser des plugins, c'est l'endroit idéal pour le faire. À droite des onglets, il y a un lien qui indique Tidy. C'est pour formater le code automatiquement. Si vous essayez de supprimer des espaces ici et d'en ajouter d'autres ici, cette fonction les rétablit correctement. Cela fonctionne sur tous les onglets. Par exemple, dans le CSS, si j'ajoute quelques espaces ici... Cela le corrige. Ci-dessous, vous trouverez le panneau CSS généré, qui affiche le CSS final généré par le terrain de jeu. Vous pouvez les voir tous ensemble ou séparés par des modules. Dans le CSS, chaque module correspond à une entrée, comme vous pouvez le voir ci-dessus. Si vous supprimez, par exemple, des utilitaires, ce code n'est plus généré. haut à droite, à côté du numéro de version, vous pouvez modifier la disposition des panneaux. Et la dernière icône est le mode Responsive, pour tester différentes tailles d'appareils. Enfin, avec cette icône, vous pouvez activer le mode sombre. Maintenant, allez dans l'onglet HTML et supprimez tout, car nous allons créer un exemple simple, afin que vous puissiez voir comment repartir de zéro. Activez le mode réactif. Je vous recommande de commencer vos créations en gardant à l'esprit un petit écran. OK, passons au code HTML. Créez un H1 et écrivez le CSS Tailwind. Comme vous pouvez le constater, l'aperçu est en cours de mise à jour. Ajoutez un attribut de classe. Commencez par centrer le titre. Maintenant, agrandissez-le avec la classe « text-4xl ». Dans ce cas, vous dites que le texte sera quatre fois plus grand qu' avec la classe « text-xl ». La plupart des valeurs CSS de Tailwind sont ainsi incrémentées, vous n'avez donc pas à vous soucier de valeurs exactes. si vous avez besoin d'une taille différente non couverte par une classe prédéfinie, vous pouvez également le faire. Je vais maintenant utiliser une requête multimédia avec le modificateur SM. Cela signifie que la classe que j'écrirai ensuite s' appliquera à la taille de l'écran SM, qui est de 640 pixels de large, ainsi qu'aux tailles plus grandes. Que dois-je faire dans ce cas ? Je vais agrandir le texte à la taille « 7xl ». Essayez-le. Agrandissez l'aperçu. Il change à 640 pixels. Maintenant, épaississez la police. Avec la classe « font-extrabold ». Enfin, ajoutez une marge supérieure et inférieure. Par exemple... 10. Appliquons un effet de dégradé de couleur. Pour ce faire, ajoutez la classe « bg-gradient » et définissez la direction vers la droite. Rien ne se passe encore car il faut continuer à configurer les couleurs, celle de gauche et celle de droite. La classe de gauche est configurée avec la classe « from ». Ensuite, vous définissez la couleur, par exemple « indigo ». Et maintenant, vous définissez la variante... 400. Comme la couleur de droite n'est pas configurée, elle est définie sur le blanc. La classe pour définir celle de droite est « to ». Comme précédemment, définissez la couleur, par exemple, le vert... Variante 600. Vous allez maintenant déplacer ce dégradé dans le texte. Pour cela, il suffit de rendre le texte transparent avec cette classe, puis d'utiliser un clip d'arrière-plan avec cette classe, afin qu'il soit appliqué au texte. Vous pouvez voir ici le résultat final du titre. Si vous cliquez sur Tidy, les classes sont réorganisées dans un ordre que les développeurs de Tailwind jugent meilleur. L'idée est maintenant de créer du contenu, afin que vous puissiez voir comment Tailwind CSS définit les styles par défaut via ses plugins. Créez un H2 et tapez « lorem ». En dessous, ajoutez du texte de remplissage. Créez quelques paragraphes à l'aide du générateur Lorem inclus dans le terrain de jeu. Comme vous pouvez le constater, il n'a aucun style. Il peut facilement s'agir d'un contenu provenant d'une base de données. Vous devrez créer des styles pour ajuster les marges, la taille de police, etc. Tailwind CSS possède un plugin appelé Typography, qui définit les styles par défaut, vous pouvez utiliser tels quels, mais ils peuvent également être personnalisés. Pour appliquer l'effet du plugin à ce que vous avez généré, créez une balise MAIN qui l'enveloppe et sélectionnez ce que vous souhaitez encapsuler. Déplace le code sélectionné vers le haut. Utilisez cette combinaison de touches sur macOS. Sous Windows, ce serait ALT et la flèche vers le haut. Cliquez sur Tidy pour formater le code. Vous devez maintenant activer le plugin. Dans la cour de récréation, c'est très simple. Passez simplement à l'onglet Configuration. Accédez au tableau des plugins, appuyez sur Entrée et tapez « require », « @tailwindcss /typography », qui est le nom du plugin. Revenez maintenant au code HTML et ajoutez l'attribut class à la balise MAIN. Ajoutez la classe « prose ». Regarde ce qui s'est passé ! Le plugin a stylisé tout ce qui se trouve dans MAIN. Comme vous pouvez le constater, H2 est plus grand et possède des marges verticales. Les paragraphes ont une hauteur de ligne définie, ainsi qu'une marge. Vous pouvez également agrandir la taille du texte pour les écrans plus grands. Utilisez le modificateur SM et ajoutez la classe « prose-lg ». Maintenant, il semble plus grand. Si vous réduisez la taille de l'aperçu, si vous atteignez la taille minimale, la classe « prose » est appliquée, et si vous atteignez le point SM, « prose-lg » est appliquée. Notez le code CSS qui génère cette classe avec SM Modifier. Le texte est collé sur les bords. Ajoutez une marge latérale avec une classe « px-5 ». Le X indique qu'il est appliqué horizontalement. Si vous voulez l'appliquer verticalement, vous devez mettre un Y. Un autre plugin très intéressant est le plugin Forms. Créons-en un. Ajoutez une balise FORM à la fin. Supprimez l'attribut action car il n'est pas nécessaire. Et maintenant, à l'intérieur, ajoutez un champ avec une balise INPUT. Tapez l'e-mail et ajoutez également un identifiant. Par défaut, il n'a pas de bordure, il est donc invisible, mais si vous cliquez, il est là. Ajoutez maintenant une balise LABEL pour le champ e-mail. Tapez votre adresse e-mail... Il reste sur la même ligne. Ajoutez une autre balise INPUT... Type de soumission. Tapez « Soumettre »... Ajoutez un attribut de classe. Avec un bloc de classe, vous le placez sur sa propre ligne. Attribuez-lui une couleur avec une classe « bg- », par exemple « bleu »... 500. texte blanc, des coins arrondis, une petite marge latérale et un peu de texte vertical. Pour le diviser un peu, ajoutez une marge supérieure. 5, c'est bien. OK, voici le formulaire. Voyons ce que propose le plugin Forms. Activez-le dans l'onglet Configuration, ajoutez une virgule à la fin du premier « require » et tapez « require »... « @tailwindcss /forms ». Découvrez comment le formulaire a légèrement changé, en particulier le champ. Pour terminer, placez également le champ sur sa propre ligne avec la classe « block ». Vous pouvez donc jouer avec l'outil Playground. Comme vous pouvez le constater, c'est très simple et pratique, mais cela ne vous aidera évidemment pas à travailler sur de vrais projets. Pour cela, je vais expliquer d'autres méthodes ensuite. 5. Jouez CDN : Tailwind CSS dans votre éditeur sans installer quoi que ce soit: Vous devez créer un dossier vide pour cet exemple. J'en ai créé un appelé Tailwind CSS et je l'ai ouvert dans Visual Studio Code. Créez le fichier index.html. Tapez maintenant « html » et choisissez la version 5. Changez le titre pour quelque chose de mieux... Tailwind CSS Juste en dessous, ajoutez une balise SCRIPT. Dans l'attribut « src », tapez https://cdn.tailwindcss.com C'est tout. Mais avant de le voir fonctionner, je vous recommande d'installer une extension pour prévisualiser le code HTML. Il s'appelle Live Preview de Microsoft. Installer... C'est fait. Ouvrez l'aperçu à l'aide de ce bouton. Réduisez la taille... Ajoutez l'attribut class au corps et définissez la couleur d'arrière-plan sur blanc. IntelliSense ne fonctionne pas lorsque vous utilisez le CDN. Vous devrez donc écrire les classes manuellement. Retournez sur le terrain de jeu et copiez tout le code HTML. Collez maintenant ce code HTML dans la balise BODY. Vous pouvez voir dans l'aperçu que le texte n'est pas très lisible. Le champ FORM est également invisible. La seule chose qui manque est d'activer les plugins. Ajoutez donc un point d'interrogation à l' adresse du SCRIPT, car vous allez lui transmettre un paramètre. Et écrivez « plugins=typography ». Regardez comme cela a changé ! Maintenant, le plugin prend déjà effet, mais le formulaire n'a pas encore de style. Vous devez également inclure le plugin Forms. C'est très simple. Dans le SCRIPT, ajoutez une virgule et tapez « formulaires ». La page est rechargée et vous avez terminé. Tout ressemble déjà à la cour de récréation. Le redimensionnement au point SM fonctionne également. Je vois le CDN comme une étape intermédiaire entre le terrain de jeu et la compilation de votre code CSS. Il utilise votre éditeur préféré pour travailler rapidement avec Tailwind CSS. Maintenant, si vous voulez travailler sérieusement sur votre projet, la manière la plus correcte de le faire est d'installer les bibliothèques et de compiler le code CSS final, car cela vous donnera également accès à de nombreuses fonctionnalités avancées de Tailwind CSS dont vous pourriez avoir besoin plus tard. Nous allons le pratiquer dans la prochaine leçon. 6. Introduction à l'installation de Tailwind CSS: Comme vous l'avez vu dans le chapitre précédent, le CSS Tailwind est très flexible, car vous pouvez l'utiliser de plusieurs manières sans rien installer. Mais si vous souhaitez travailler sérieusement avec ce framework, il dispose également d'une grande flexibilité pour l'installer dans votre environnement. Vous pouvez installer la CLI autonome Tailwind CSS si vous n'avez pas besoin de Node JS dans votre projet. Vous pouvez le voir comme un package qui inclut tout ce dont vous avez besoin, sans nécessiter de dépendances. L'installation standard, qui est également très rapide et facile, utilise Node JS. Ce sera la seule dépendance pour installer Tailwind CLI. Il y a encore une autre façon de l'installer, et c'est en tant que plugin PostCSS. C'est la méthode recommandée si votre projet, outre Node JS, utilise un outil de création tel que Webpack ou Vite, entre autres. Et en parlant de modules, Tailwind CSS s'intègre très bien à différents frameworks, tels que Next JS, Nuxt JS, Angular, Laravel, Ruby on Rails ou Phoenix, pour n'en nommer que quelques-uns. Mais l'outil que les développeurs utilisent le plus est l'éditeur de code ou IDE. Les développeurs CSS de Tailwind ont développé un plugin pour Visual Studio Code qui fonctionne très bien. Il existe également des plugins pour d'autres éditeurs tels que SublimeText ou des IDE tels que JetBrains. C'est tout ce que vous allez apprendre dans ce chapitre. 7. CLI autonome : installer sans Node.js: Si vous travaillez sur un projet où Node JS n'est pas nécessaire et que vous souhaitez utiliser le CSS Tailwind, vous pouvez utiliser la CLI autonome. Il s'agit d'un fichier exécutable qui inclut tout ce dont vous avez besoin pour fonctionner. La première étape consiste à accéder au référentiel CSS Tailwind sur GitHub et à cliquer sur la dernière version publiée. Dans mon cas, j'utilise Mac OS sur un Mac équipé d'un processeur Apple Silicon, donc je choisis celui-ci ici. Plus tard, je vous montrerai les étapes à suivre pour Windows et Linux. Créez un nouveau répertoire pour le projet de cours. J'en ai déjà créé un avec le nom tailwindcss et je l' ai ouvert dans Visual Studio Code. Ouvrez le terminal intégré à l'éditeur et tapez cette commande pour déplacer le fichier vers le répertoire en cours, en le renommant tailwindcss. Attribuez-lui des autorisations d'exécution... Et lancez-le. macOS affiche un message d'erreur car il ne peut pas vérifier qu'il s'agit d'un fichier sécurisé. Pour continuer, ouvrez les Préférences Système, cliquez sur Confidentialité et sécurité... et si vous faites défiler la page vers le bas... vous verrez cette zone où il est indiqué que le système a bloqué le CSS Tailwinds. Cliquez sur le bouton pour le débloquer. Retournez dans l'éditeur et exécutez à nouveau la commande. macOS affiche à nouveau le même message d'erreur, mais vous pouvez désormais l' autoriser à l'aide de ce bouton. À ce stade, je vais faire une digression pour vous montrer comment installer l'outil sous Windows. Depuis la page de publication sur GitHub, téléchargez le fichier pour Windows. Le navigateur a bloqué le fichier. Pour l'autoriser, cliquez sur les trois points... et choisissez l'option Conserver. Windows demande une confirmation. Dépliez les options ici et choisissez l'option Conserver. Téléchargé. De retour dans l'éditeur, ouvrez le terminal et tapez cette commande pour déplacer le fichier vers le répertoire en cours... renommant en tailwindcss.exe Exécutez-le. De là, vous pouvez continuer là où nous nous sommes arrêtés. Je vais faire une dernière digression pour vous montrer les étapes à suivre sous Linux. Depuis la page de publication sur GitHub, téléchargez le fichier pour Linux. Téléchargé. De retour dans l'éditeur, ouvrez le terminal et tapez cette commande pour déplacer le fichier vers le répertoire en cours... en le renommant en tailwindcss. Attribuez-lui l'autorisation d'exécution... et lancez-le. De là, vous pouvez continuer là où nous nous sommes arrêtés. Ok, maintenant que cela fonctionne, initialisez le projet avec l'option « init ». Le fichier de configuration est maintenant généré. Jetons-y un coup d'œil. Le contenu est très similaire à l'onglet de configuration du terrain de jeu. La configuration essentielle ici consiste à indiquer au compilateur dans quels fichiers rechercher les classes CSS Tailwind à utiliser, pour générer le fichier CSS final. Pour cela, ajoutez ici, dans le contenu et entre guillemets, le répertoire en cours, tous les fichiers... qui ont l'extension HTML. Vous pouvez fermer ce fichier maintenant. Maintenant, exécutez la commande tailwindcss avec l'option -o style.css, pour lui indiquer le fichier CSS à générer, et ajoutez l'option watch pour continuer à surveiller les modifications. Voyons ce que contient le fichier style.css généré. Toute la partie initiale est une réinitialisation du CSS, sorte que les styles générés se présentent de la même manière dans tous les navigateurs. Continuez à faire défiler la page vers le bas... Voici les marges. Vous pouvez voir ici les classes que vous avez utilisées pour créer le dégradé. Centrage du texte, tailles de police. En bref, le compilateur, laissant de côté la réinitialisation CSS, ajoute uniquement les styles correspondant aux classes que vous avez utilisées et les autres styles requis. Voyons comment cela s'affiche. Récupérez le fichier HTML d'index que nous avons créé dans le chapitre sur les prototypes rapides et ouvrez-le. Ouvrez également l'aperçu. Les styles sont extraits du CDN, vous devez donc supprimer la balise de script. Après le rechargement de la page, vous verrez que les styles ont disparu. Ajoutez maintenant une balise de lien, de type CSS. Par défaut, il pointe déjà vers style.css, donc la page est désormais plus belle. Cependant, cette page utilisait les plugins de typographie et de formulaires. La CLI autonome inclut tous les plugins officiels. Il vous suffit d'activer ceux dont vous avez besoin. Ouvrez le fichier de configuration... et dans les plugins, ajoutez une exigence pour la typographie, et une autre pour les formulaires. Après un rechargement de page, il semble que ce soit le cas à l'origine. Pour arrêter la commande tailwindcss, appuyez simplement sur CTRL+C. De cette manière simple, vous pouvez installer Tailwind CSS dans votre environnement et commencer à travailler rapidement. 8. Installer NodeJS: Tailwind peut être installé de plusieurs manières, mais la méthode standard et la plus recommandée consiste à utiliser le gestionnaire de packages Node JS : NPM. NPM se chargera de gérer les dépendances dont Tailwind a besoin. NPM fait partie de Node JS, donc en installant Node JS, tout est prêt. Pour installer Node JS, la méthode la plus recommandée est d'utiliser un gestionnaire de version tel que NVM, qui vous permettra d'installer et d'utiliser les différentes versions de Node en fonction de chaque projet. Ou, si vous n'avez pas besoin d'utiliser plusieurs versions, vous pouvez en installer une globale pour tout. Je vais vous montrer comment l'installer en fonction du système d'exploitation que vous utilisez. Si vous utilisez macOS ou Linux, recherchez NVM sur Google. Vous trouverez ce référentiel GitHub. Voici les instructions d'installation, d'utilisation et les solutions aux problèmes courants. Faites défiler l'écran vers le bas jusqu'à Installation et mise à jour, puis cliquez sur. L'une ou l'autre de ces deux commandes téléchargera et installera l'outil. Je vais copier le premier puisque curl est installé sur mon système. Ouvrez le terminal et collez la commande pour l'exécuter. Il est maintenant téléchargé. Il a ajouté la configuration dans votre fichier shell, et pour le faire fonctionner, vous devez redémarrer le terminal. Vous pouvez maintenant vérifier que la commande nvm a été installée de cette manière. Elle doit renvoyer le nom de la commande. Vous pouvez désormais installer Node JS de cette manière. Et pour terminer, mettez à jour les packages vers les dernières versions. Vous pouvez vérifier la version de Node JS comme ceci. Et NPM comme ça. Si vous utilisez Windows, recherchez NPM-Windows sur Google. Vous trouverez ce référentiel GitHub. Pour l'installer, cliquez sur la dernière version ici et téléchargez le fichier zip du programme d'installation. Ouvrez le zip... et lancez le programme d'installation. Je vais accepter toutes les options par défaut. C'est fait. Ouvrez l'invite de commande... et installez Node JS comme ceci. Il vous indique que pour utiliser cette version, vous devez exécuter cette commande. Mettez à niveau les packages vers les dernières versions. Vous pouvez vérifier la version de Node JS comme ceci. Et NPM comme ça. 9. Tailwind CLI : installation standard: Dans cette leçon, nous allons configurer votre environnement de développement avec les bibliothèques et les commandes nécessaires pour travailler sérieusement avec Tailwind CSS. Si vous avez suivi la leçon sur la CLI autonome, vous pouvez supprimer le fichier tailwind.css. Vous pouvez également supprimer le fichier de configuration : tailwind.config.js Il n'est pas nécessaire de supprimer le fichier style.css, car le compilateur Tailwind le réécrira complètement. Ouvrez le terminal et tapez npm install -D Cela installera les dépendances des packages de la phase de développement. En d'autres termes, ils ne seront pas présents dans la version finale, car ils ne seront pas nécessaires, car ce sont des outils de développement. tailwind.css Allons-y. Attendez que NPM télécharge et installe tout... C'est ça. NPM indique les packages qui ont été ajoutés. Ce sont ceux dont Tailwind CLI a besoin pour fonctionner. Si vous regardez dans la barre latérale, vous verrez que trois nouveaux éléments ont été ajoutés. Le premier est le dossier node-modules. C'est ici que ces packages NPM ont été enregistrés. Le second est package-lock.json, qui ressemble à un index de tout ce qui se trouve dans le dossier node-modules avec leurs numéros de version, afin que NPM sache quand quelque chose doit être mis à jour. Et le troisième est package.json, qui contient une liste des bibliothèques que vous avez installées avec le terminal, les principales, sans leurs dépendances. Nous y jetterons un œil plus tard. Puisque nous utilisons deux plugins dans notre exemple, installons-les également. Tapez npm install -D et tapez maintenant @tailwindcss /typography Ajoutons également les formulaires. @tailwindcss /forms Il informe des packages qui ont été ajoutés. Ouvrez package.json Jetons un coup d'œil. Comme vous pouvez le constater, il contient un bloc JSON appelé devDependencies. Cela signifie qu'il s'agit de dépendances liées au développement. À l'intérieur se trouvent les deux plugins et le CSS Tailwind. Remarquez que chacun a son numéro de version. Si vous souhaitez mettre à jour les bibliothèques, NPM peut interroger ce fichier et savoir s'il existe des mises à jour. Comment les mettre à jour ? Dans le terminal, vous devez taper npm update. Comme vous pouvez le constater, tout a déjà été mis à jour. Les packages étant déjà installés, vous devez maintenant initialiser le projet pour l'utiliser avec Tailwind CSS. Dans le terminal, tapez npx tailwindcss init Le fichier tailwind.config.js a été généré. Ouvre-le. Et dans le contenu, demandez au compilateur de rechercher les classes Tailwind dans les fichiers HTML, dans le répertoire courant et dans les plugins, d'ajouter une exigence pour la typographie et une autre pour les formulaires. Vous pouvez maintenant démarrer le compilateur. Dans le terminal, tapez nps tailwindcss -o et spécifiez le fichier CSS final : style.css Ajoutez le modificateur watch afin qu'il continue à surveiller les modifications. Ouvrez l'aperçu, et voici le résultat. Si vous voulez voir à quelle vitesse le CSS se met à jour lorsque vous apportez des modifications, essayez d'ajouter une classe. Par exemple, mettez l'étiquette de l'e-mail en gras. Ajoutez l'attribut class, ajoutez la classe font-bold, enregistrez le fichier et regardez dans le terminal comment il se recompile. Rechargez la page manuellement si nécessaire pour voir les modifications. Si vous revenez au CSS, cherchons la classe font-bold. C'est ici. Cette fonctionnalité de Tailwind CSS est appelée just-in-time. Et comme vous pouvez le constater, cela consiste à n'avoir dans le CSS que ce que vous avez utilisé, afin que votre page s'affiche bien dans tous les navigateurs. 10. Avec PostCSS : installation complète: PostCSS est un outil qui permet d'effectuer des transformations CSS avec JavaScript telles que le préfixe automatique, la prise en charge future de la syntaxe, les modules ou le linting. De nombreuses autres fonctions peuvent être ajoutées grâce à son écosystème de plugins. L'utilisation de PostCSS est logique si votre projet utilise un outil tel que Webpack ou Vite. Vous pouvez ensuite intégrer le CSS Tailwind en tant que composant. Avant de commencer, vous avez déjà des fichiers dans votre répertoire. Supprimons les fichiers JSON et le fichier de configuration : tailwind.config.js Il n'est pas nécessaire de supprimer le fichier style.css, car le compilateur Tailwind le réécrira complètement. La première étape de la configuration consiste à installer certains packages NPM. Tapez npm install -d pour qu'ils soient installés en tant que dépendances de développement. Ensuite, tailwindcss, qui est le package du framework, postcss et autoprefixer, qui est un plugin PostCSS permettant d'ajouter les préfixeurs des différents navigateurs dans le CSS final. Installez également les deux plugins CSS Tailwind que nous avons utilisés pour la typographie et les formulaires, tailwindcss/typography... et tailwindcss/forms. Vous verrez que trois éléments sont générés. Les modules de nœuds, qui contiennent les packages que vous venez d'installer et leurs dépendances. Le fichier package.json, qui contient les packages que vous avez installés, et package-lock.json, qui contient toutes les dépendances avec leurs versions. Maintenant que le package Tailwind est installé, utilisons-le pour l'étape suivante, qui consiste à créer le fichier de configuration Tailwind à l'aide de cette commande : npx tailwindcss init Ajoutez également l'option -p pour créer le fichier de configuration PostCSS et pouvoir configurer Tailwind en tant que plugin. Deux fichiers ont été générés : tailwind.config.js et postcss.config.js Le premier est l'endroit où le framework est configuré. Au départ, il existe quelques options vides. Dans l'option de contenu, spécifiez le répertoire actuel et tous les fichiers HTML. Cette option analysera les fichiers HTML du répertoire actuel et déterminera les classes Tailwind que vous utilisez pour les générer dans le CSS final. Dans les plugins, vous devez configurer ceux que vous avez installés. Ajoutez une exigence pour le plugin de typographie. Et un autre pour le plugin Forms. Vous pouvez maintenant fermer ce fichier. Le second fichier est utilisé pour configurer les plugins PostCSS. Il est déjà préconfiguré pour ceux que vous avez installés : Tailwind CSS et Auto-prefixer. Vous pouvez fermer le fichier. Les mesures prises jusqu'à présent ne sont effectuées qu'une seule fois par projet. Vous pouvez maintenant exécuter la commande Tailwind pour compiler le fichier CSS final. Tapez dans le terminal npx tailwindcss, -o, et spécifiez le nom du fichier, style.css Ajoutez également l'option pour continuer à surveiller les modifications dans votre projet et le mettre à jour automatiquement. Cette option est la montre. Le fichier style.css est déjà généré. Si vous y jetez un œil, vous verrez qu'il contient déjà un contenu initial. Fermons-le, comme nous l'avons vu dans les leçons précédentes. Comme nous avons conservé le code HTML de la leçon précédente, où nous avons effectué l' installation CSS standard de Tailwind avec Tailwind CLI, utilisons-le pour voir si cela fonctionne. Ouvrez le fichier index.html et l'aperçu. Super ! Tous les éléments s'affichent correctement. 11. Intégration avec des frameworks: Le CSS Tailwinds peut être intégré à n'importe quel framework de développement Web. Toutefois, si vous accédez à la documentation sur le site Web, section Installation, vous trouverez un onglet intitulé Framework Guides. Comme son nom l'indique, vous pouvez trouver des guides étape par étape pour configurer Tailwind CSS avec ces frameworks. Prenons l'exemple d'une simple application React. Cliquez sur Créer une application React. La première étape consiste à créer l'application à l'aide de cette commande. L'application Create React est un package NPM qui vous demandera une confirmation pour l'installation, si vous ne l'avez pas déjà. Après cela, il commencera à créer une application React initiale, installant ses dépendances. Lorsque l'installation est terminée, ouvrez le projet à l'aide d'un éditeur. J'utilise Visual Studio Code. Ouvrez le terminal intégré et continuez à consulter le guide. Ensuite, installez Tailwind CSS. Copiez la commande et collez-la dans le terminal. Si vous ouvrez package.json, vous verrez les packages récemment installés en bas, sous devDependencies. Revenez au guide, copiez la commande pour créer le fichier de configuration Tailwind. Ouvrez le fichier, et dans le cas de React, Tailwind devra consulter les fichiers situés dans SRC et portant ces extensions. Vous devez maintenant ajouter les directives CSS. Copiez-les et, dans SRC, ouvrez le fichier index.css. Collez les directives ci-dessus. Le CSS Tailwind est désormais intégré à cette application React. Si vous revenez au guide, la commande suivante consiste à démarrer le serveur. Copiez-le et collez-le dans le terminal. Il ouvre un navigateur avec l' application par défaut qui a été créée. Le guide se termine par un petit extrait HTML contenant quelques classes Tailwind. Essayez-le. Ouvrez le fichier app.js et sélectionnez l'exemple de code HTML. Collez maintenant le code du guide. Je vais ajouter une classe supplémentaire pour mettre le texte en rouge. Je supprime également cette importation car elle n'est plus nécessaire. Lorsque vous enregistrez, consultez le terminal pour voir comment l'application est compilée. Basculez vers le navigateur. La page a été mise à jour avec le nouveau contenu et les classes CSS Tailwind fonctionnent. 12. Créer un code de Visual Studio: Vous pouvez utiliser l'éditeur de code de votre choix, mais la norme pour Tailwind CSS est Visual Studio Code. Surtout pour les plugins qui vous permettront de travailler plus rapidement. Accédez à la section des extensions. La première extension consiste à installer le CSS IntelliSense officiel de Tailwind. Cela vous permettra de compléter automatiquement les classes, prévisualiser les couleurs, marquer les erreurs, voir ce que fait chaque classe en détail, et bien d'autres choses encore. Un autre que je recommande est Tailwind Docs. Vous pouvez rechercher n'importe quelle classe Tailwind à l'aide de la palette de commandes et ouvrir rapidement la documentation. Recherchez PostCSS maintenant. Vous verrez le support du langage PostCSS. Comme Tailwind CSS utilise des directives PostCSS dans le fichier CSS principal, cette extension permettra à l'éditeur de les reconnaître et de ne pas les signaler comme des erreurs. Vous le verrez en action plus tard dans le cours. Je vous recommande de l'installer. La dernière extension est Live Preview, de Microsoft. Si vous avez suivi les leçons précédentes, vous devriez déjà l'avoir installé. N'oubliez pas que cela vous permet d'avoir un aperçu de la page que vous créez à côté de l'éditeur, ce qui accélère le flux de travail. L'aperçu est mis à jour au fur et à mesure que vous tapez, mais il arrive que vous ne voyiez pas les modifications immédiatement car le fichier CSS est régénéré en permanence. Dans ce cas, vous devrez recharger l'aperçu à l'aide de cette icône. 13. Intégration avec d'autres éditeurs: Bien que vous puissiez utiliser n'importe quel éditeur pour ajouter les classes Tailwind dans le code HTML, c'est beaucoup plus pratique si l'éditeur s'intègre au framework. L'éditeur officiellement pris en charge par les développeurs CSS de Tailwind est Visual Studio Code. Si vous avez des doutes quant à l'éditeur à utiliser, celui-ci devrait être votre premier choix. Si vous avez suivi les leçons précédentes, vous l'avez déjà configuré et vérifié son intégration. La recommandation suivante est n'importe quel IDE Jetbrains, qui inclut un support natif pour le framework, ce qui signifie qu'il n'est pas nécessaire d'installer de plugin. Les autres éditeurs n'ont pas de support natif et vous devrez trouver et installer un plugin. Vous verrez SublimeText comme exemple plus tard. Commençons par les éditeurs de Jetbrains. Je vais utiliser WebStorm comme exemple, qui est axé sur le développement de JavaScript. Si vous aimez les IDE, Jetbrains propose ces outils pour les langages les plus populaires. Avant de commencer, assurez-vous que NodeJS est installé, comme je l'ai expliqué dans une leçon précédente. Une fois WebStorm ouvert, créez un nouveau projet. Vide. Assurez-vous maintenant que les plugins CSS sont activés. Ouvrez les préférences. Dans l'onglet Extensions, recherchez CSS. Il s'agit du plugin CSS, qui est déjà activé par défaut, et du plugin CSS Tailwind, qui est également activé. Fermons la fenêtre. Maintenant, ouvrez le terminal et installez les packages CSS Tailwind avec npm install -D tailwindcss. Dépliez le répertoire du projet. Il a généré les fichiers du package et le répertoire node-modules. De retour dans le terminal, créez le fichier de configuration avec npx tailwindcss init. Vous pouvez l'ouvrir pour voir le contenu initial. Dans le contenu, demandez au compilateur de rechercher des classes dans les fichiers HTML. Avec cela, l'IDE dispose de tout ce dont il a besoin pour s'intégrer au CSS Tailwind. Voyons un exemple. Créez le fichier index.html et, dans BODY, créez n'importe quel tag, par exemple un H1. Ajoutez maintenant une classe et commencez à écrire une classe Tailwind, par exemple du texte. L'IDE affiche maintenant des suggestions. Choisissez 4xl. Réglez maintenant la couleur sur bleu avec du texte bleu et choisissez 500. Vous pouvez voir le CSS généré par chaque classe si vous passez la souris dessus. Pour un éditeur qui n'a pas de support intégré tel que SublimeText, vous devrez trouver un plugin. Pour ce faire, vous devez d'abord installer le contrôle du package, ce que vous pouvez faire via la palette de commandes. Tapez package ici, puis choisissez Install Package Control. Après quelques secondes, un message de confirmation s'affiche. Vous pouvez maintenant rechercher le plugin via la même palette de commandes. Tapez install, puis choisissez Installer le package. Cela charge le référentiel de plugins et affiche la liste complète. Tapez tailwind, et voici les plugins disponibles. Je recommande Tailwind CSS Autocomplete pour les cours d'écriture. Ouvrez à nouveau la palette de commandes, installez le package, tapez tailwind, et je vous recommande d'installer également le plugin CSS Tailwind, qui ajoutera la compatibilité avec le fichier de style principal de Tailwind, que vous verrez plus tard dans le cours. Maintenant, enregistrez le fichier sous le nom index.html, tapez HTML et appuyez sur TAB. Cette option créera un modèle HTML de base pour vous. Ajoutez un titre H1, un attribut de classe et commencez à saisir une classe Tailwind, par exemple du texte. Vous verrez que le plugin entre en jeu et affiche une liste de classes qui correspondent à ce que vous avez saisi. Choisissez-en un, par exemple 4xl. Je vais mettre le texte en bleu, variante 500. Peut-être que ce plugin sera amélioré avec plus de fonctionnalités à l'avenir, ou même de nouvelles fonctionnalités apparaîtront. Il s'agit de les essayer et de choisir celui qui vous convient le mieux. 14. Créer une page Web à partir de zéro : introduction: Maintenant que vous avez configuré pour savoir quand CSS et que vous avez vu comment l'utiliser. Construisons une page étape par étape en utilisant uniquement les classes Tailwind. Voyons une esquisse de ce que nous allons créer. Nous allons commencer par une version mobile, car vous devez créer chaque site Web de cette façon. Tout d'abord, c'est ce que l' on appelle le mobile-first. Il se compose d'une image d'en-tête, de notre titre en deux couleurs, d'un petit paragraphe et d'un bouton qui occupe toute la largeur. Ensuite, une solution bien adaptée aux grandes tailles d'écran , connue sous le nom de responsive, sur une tablette, agrandira la taille des textes et le bouton ne remplira pas toute la largeur. Pour les écrans plus grands, tels qu'un ordinateur portable, la structure de la page sera modifiée en déplaçant l'image vers la droite et le contenu vers la gauche. Ensuite, nous ajouterons de l'interactivité, ce qui est toujours bénéfique pour la convivialité, ajouterons des états CSS au bouton afin que le pointeur de la souris change de couleur. Et en cliquant dessus, la couleur changera également. Et en parlant de couleurs, nous allons adapter l'appât au mode sombre de sorte que lorsque le système d'exploitation activera ce mode, la page, nous définirons une couleur de fond sombre et adapterons le reste. À ce stade, la page sera déjà créée. Si vous souhaitez créer d'autres pages, vous souhaiterez réutiliser certains composants , tels que des boutons. Nous verrons comment créer une classe personnalisée qui contient les styles de modèles , tout comme vous pouvez le faire avec du CSS standard. Je vous recommande de suspendre les vidéos tout au long du cours afin de pouvoir établir vous-même un rythme. 15. Installation du CSS de Tailwind: Avant de créer la page, installons le CSS tailwind de manière standard. Créez un nouveau répertoire et ouvrez-le avec leur éditeur de code. Si vous préférez obtenir les fichiers directement sans suivre cette vidéo, vous pouvez les obtenir depuis la marque silver pour CO2 F. Vous pouvez continuer à regarder la vidéo si vous préférez créer un nouveau répertoire ou commencer par un zéro pour b, ouvrir le terminal et installer tailwind avec npm install dash D, savoir quand le CSS passe des plugins à celui pour la typographie. Le plugin Next Two Forms. Lorsque l'installation est terminée, mettez à jour les packages NPM. Il est maintenant temps d'initialiser le projet avec Tailwind, qui générera le fichier de configuration. Ouvrez-le dans le contenu. Selon cette formule, demandez au compilateur de surveiller les fichiers HTML. Incluez maintenant les plug-ins que nous avons installés, celui pour la typographie. Sur les formulaires A14. Fermez le fichier, retournez au terminal et démarrez le compilateur pour qu'il mette à jour le style CSS et continue à surveiller les modifications. Tout est prêt pour démarrer. 16. Version mobile: Dans cette leçon, nous allons créer une version mobile de l'appât Web, suivant la philosophie «  mobile first ». Cela ressemblera à ceci. Il se compose d'une image d'en-tête, d'un titre bicolore, d'un petit paragraphe et d'un bouton pleine largeur. Commençons par enregistrer l'image d'en-tête. Vous pouvez le télécharger dans la section ressources du projet. Dans Visual Studio Code, créez un dossier pour enregistrer l'image. Vous pouvez l'appeler IMG. Faites ensuite glisser l'image que vous avez déchargée vers le nouveau dossier. Voici l'image. Créez le fichier HTML d'index et générez une structure HTML5 de base. Écrivez le titre, comme les films et séries, sous le titre ou la balise de lien, qui pointe par défaut vers le style CSS. Ouvrez l'aperçu, redimensionnez légèrement le panneau. Je vais afficher l'image d'en-tête avec le pointeur de la pile d'images vers le fichier et avec des textes alternatifs, placer la classe sur l'attribut body et définir la classe à zéro. Le problème avec cette image, c'est que si vous agrandissez l'aperçu, vous verrez qu'elle s' élargit et que vous augmenterez. Nous le bloquons pour qu'il ne pousse pas en randonnée. Et évitez de remplir tout l'écran. La solution consiste à effectuer une randonnée fixe ou fixe à la classe attribuée aux détenus et à utiliser la classe 8 pour la randonnée. Par exemple 64. Maintenant, la randonnée est fixe, mais elle ne remplit pas la largeur de l'appât. Vous pouvez donc le résoudre avec un verre W pour la largeur et la grille pleine. Mais maintenant, il semble déformé, surtout lorsque le panneau est blanc. Vous pouvez résoudre ce problème avec une couverture d'objet de classe. Vous pouvez maintenant voir qu' il n'est pas déformé. Maintenir le rythme de la randonnée. Allons-y avec un titre. Quel est ton préféré. Et dans la ligne suivante, films et les émissions de télévision augmentent la taille de police avec les textes de classe pour Excel. Faisons en sorte qu'il se démarque avec une police classe, très gras, et réduisons l' espacement entre les lettres. Pour placer la deuxième partie du titre en dessous de la première, placez-la dans la couche profonde. Mettons-le en bleu. Tout le contenu situé sous l' image sera centré. Mettons-le donc dans un récipient. Définissez simplement le centre de texte de la classe. Un autre rembourrage supérieur de huit, également une marge inférieure. Ensuite, nous allons saisir le sous-titre dans une balise p. Diffusez des films et des séries TV illimités sur vos appareils. Augmentez la taille avec un texte LG en verre. Et pour que le titre reste bien visible, réduisez l'intensité de la couleur à un gris moyen. Si vous souhaitez utiliser le panneau pour simuler un écran mobile, le texte est trop proche des côtés. À une certaine marge dans le conteneur avec une classe PX, qui l'ajoute des deux côtés pour le mieux. Ajoutez également une marge supérieure au texte avec un objectif en verre T3. Si vous élargissez le panneau pour simuler un écran blanc, les sous-titres ne devraient pas être aussi blancs. Pour configurer Max Size, utilisez la classe max w. Et dans ce cas, je pense qu'AMD serait bien. Et centrez-le avec MX OTA. Le dernier élément de cette page est un bouton. Et c'est bon pour commencer. Le fond sera rouge foncé. Le texte sera blanc. Set de type breveté, un peu vertical. Comme vous pouvez le constater, il envahit la zone de texte. Pour le résoudre, utilisez le bloc de classe en ligne. Encore une marge supérieure de dix. Obtenons des coins arrondis avec un verre de taille arrondie. Lg. Soulignez le bouton. Nous allons faire plusieurs choses. La première consiste à ajouter une taille d'ombre LG, et la seconde consiste à renforcer la police, à la rendre semi-audacieuse et à agrandir la taille SM. Pour mobile, j'aime utiliser une matraque de ce type pour remplir toute la largeur. Ceci est réalisé avec une classe complète W. Ainsi, vous avez créé votre première page en utilisant les classes CSS Tailwind directement dans les balises HTML. 17. Version réactive: Pour l'instant, le site Web est conçu pour un écran mobile. Si vous agrandissez la largeur de la vue, vous verrez que le contenu occupe tout l'espace horizontal. La solution consiste à rendre la version bêta réactive, est-à-dire qu'elle s'adapte à la taille de l'écran. Ceci est réalisé en utilisant des points d'arrêt définis en CSS, par exemple vous pouvez spécifier une largeur de 500 pixels, autre de 1 000 et une autre de 1 500. Dans ce cas, vous auriez trois points d'arrêt et vous pourriez contrôler chaque élément pour l' adapter à la taille de l'écran. Le vent arrière inclut cinq points d'arrêt. La première taille est S M, avec une largeur de 640 pixels. Le second est MD, avec une largeur de 768 pixels. Il s'agit généralement de la taille d'une tablette en mode portrait. La suivante est une algue de 1024 pixels de large. Qu'il s'agisse de ce que mesure un iPad horizontalement ou de la taille d'un écran d'ordinateur. Vient ensuite Excel avec une largeur de 1 280 pixels. Et le dernier est un fichier Excel de 1 556 pixels de large. Ces définitions utilisent en interne des requêtes média CSS standard . Ainsi, par exemple, si vous souhaitez appliquer un style au point MD, cela affectera MMD, LG, Excel. Et le fait d'exceller dans l'application d'un point d'arrêt le reflète dans n'importe quelle classe de vent arrière. Par exemple, si vous souhaitez appliquer une marge supérieure de 12 pixels au verre, trois pixels vides sont parfaits pour la pinte vide. Voici à quoi ressemblera la page au point de rupture SM, où la taille du texte est plus grande et le bouton n' occupe plus toute la largeur. Si je continue à zoomer, j'arrive au point d'arrêt vide. Tout semble plus grand. Le dernier point de rupture sera celui des algues. Lorsque la structure bêta change, les composants ne sont plus jalonnés. L'image se trouve à droite et le contenu se déplace vers la gauche. Commençons par agrandir le titre du point d'arrêt SM Essayons cinq fichiers Excel. Agrandissez l'aperçu jusqu'à atteindre le même point d'arrêt. Ça saute ici. Le texte est trop petit. Agrandissons-le. Excel semble bien. À cette taille, le bouton ne doit plus toucher toute la largeur. Définissez une largeur automatique adaptée au texte. L'image doit être un peu plus grande. Dans son contenant, spécifiez une randonnée. 72, par exemple, si vous redimensionnez l'aperçu, vous verrez la différence entre la taille du mobile et celle de la tablette. Passons maintenant au point d'arrêt MD qui rendra l'image encore plus grande avec une taille de 96. Et laissez l'aperçu pour voir la différence. Agrandissons le titre. Encore une cellule de 0,66. Notez que le texte est trop proche du titre. Dans la marge supérieure. Cinq, c'est peut-être bien. Mais comme il y a plus de place maintenant, laissons-le croître horizontalement avec une largeur maximale. Trois d'entre eux sont excellents lorsqu' il s'agit de donner plus de rembourrage à la baguette pour une meilleure visibilité. La classe px dans l'espace horizontal, je pense que dix lui donnera une belle apparence. Et PY dans l'espace vertical, par exemple, les textes pourraient également être plus grands. Algues. La différence est perceptible. Enfin, passons au point algébrique où les éléments seront encore plus grands car il y a beaucoup d' espace horizontal et les éléments peuvent être placés côte à côte. , vous n'utiliserez pas les points de rupture simplicité, vous n'utiliserez pas les points de rupture liés aux algues. Mais si vous en avez besoin dans votre projet, vous pouvez continuer à augmenter la taille des éléments ou même les déplacer comme vous le verrez maintenant. Tout d'abord, je vais créer un conteneur principal qui contiendra tout. Déplacez tout à l'intérieur. Définissez maintenant la classe Flex sur le conteneur, qui placera les deux éléments côte à côte. Agrandir l'aperçu. Cela fonctionne correctement. Apportons quelques modifications à cette mise en page. Je veux que l'image soit sur la droite. Pour huit, une propriété flexible appelée order spécifie l'ordre dans lequel chaque élément apparaît dans Flexbox pour que l'image apparaisse à la fin. J'utiliserai la commande commandée en dernier. Cool. Bien que je pense qu'il est trop grand, je vais limiter sa largeur à la moitié du contenant. Donc, une pseudo-classe W et demie. C'est mieux. Mais à l'origine, je l'ai fait un peu plus grand. Ce serait bien si cela occupait plus d'espace vertical. Pour obtenir cet effet. À l'âge, classe complète l'image pour qu'elle occupe toute la hauteur du contenant. La même classe que le conteneur. De sorte qu'il remplisse également toute la hauteur de son contenant. Et ce contenant est enfin le corps, qui a par défaut la hauteur de ses éléments par rapport à la vitre de l'écran, de sorte qu'il occupe toute la hauteur du document. Allons-y maintenant avec le contenu sur la gauche. Nous allons commencer par ajouter un rembourrage supérieur pour les huit et aligner le texte vers la gauche avec la classe de texte gauche. Si la largeur de la fenêtre est plus grande, le sous-titre s'adapte de manière injuste. Limitons la largeur de tout le contenu restant avec un verre W max, par exemple LTE. Supprimez les marges. Ça a l'air mieux comme ça. Enfin, si vous élargissez l'aperçu écran d'alerte simulant une simulation, vous verrez que les éléments sont trop espacés car ils s'étendent sur toute la largeur. Pour éviter cette largeur limitée dans le Maine, par exemple, sept excellent et centrez-le avec une odeur de mélange. Si vous le vérifiez à nouveau, il semble limité. Désormais, le débat est désormais adapté à différentes tailles d'écran aide des points d'arrêt CSS de Tailwind. Il suffit de les ajouter comme préfixe à chaque classe. Voyons le résultat final. Tous les éléments sont empilés dans la plus petite taille possible pour les écrans mobiles, c'est la conception initiale à partir de laquelle tout commence. Au fur et à mesure que l'écran grandit, le contenu s'adapte. Voici le point d'arrêt SM. Voici MD. Pour LG. Il y a déjà tellement d'espace que les éléments sont repositionnés différemment. 18. Application d'états CSS: Maintenant que la page est adaptée à l'écran, ajoutons un peu d'interactivité. Par exemple, lorsque vous passez la souris sur le bouton, la couleur ne change pas. Dans cette leçon, nous allons appliquer un effet au bouton à l'aide du domaine CSS Tailwind, qui fonctionne de la même manière que les points d'arrêt que vous avez vus dans la version précédente. Si vous cliquez sur l'arrière-plan et appuyez sur la touche Tab, vous verrez que le bouton est sélectionné avec une bordure. Améliorons-le en utilisant notre propre style, en utilisant les vents arrière pour apporter des utilitaires. Ces utilitaires définissent un anneau comme une bordure, mais en dehors de l'élément. Passez la souris sur le bouton et assombrissez l' arrière-plan avec une valeur de 800. Maintenant, changeons la bordure du bouton lorsque vous appuyez sur la touche Tab, comme je vous l'ai déjà montré. Tout d'abord, à l'aide de l'utilitaire de mise au point, supprimez la bordure actuelle, définissant le contour connu du verre. Puis également avec un accent sur l'utilité dans la classe de sérine Tailwind. Et commençons à le configurer. Avec offset. Nous établissons une séparation des deux. Et si vous appuyez sur la touche Tab, vous pouvez voir à quoi cela ressemble. Définissez une couleur rouge, 800, identique à celle du bouton lui-même. Ainsi, il ne s'agit pas de réduire définitivement l'opacité à obtenir avec une classe d'opacité annulaire. C'est le résultat qui apparaît également lorsque vous cliquez. Et rien que pour ce clic, je pense que ce serait bien d'assombrir un peu plus le bouton. À l'aide de l'utilitaire actif, définissez une couleur rouge avec une valeur maximale de 900. C'est le résultat final. De cette manière simple, vous pouvez appliquer des états CSS aux éléments de votre page. 19. Ajout de mode sombre: Adapter les débats en mode sombre est une pratique fortement recommandée, qui consiste à appliquer des couleurs plus sombres lorsque ce mode est activé sur le système d'exploitation de l'utilisateur. Vous devez activer ce mode sur votre système d'exploitation pour utiliser cette fonctionnalité et vous indiquer où se trouve cette option sous Windows, macOS et Linux. Windows ouvre les paramètres à partir du menu Démarrer. Ensuite, vous accédez à la personnalisation et sélectionnez les couleurs. Dans cette liste déroulante, vous pouvez basculer entre le mode clair et le mode sombre. Dans macOS, ouvrez les préférences système, puis accédez à Apparence. Et ici, vous pouvez basculer entre les modes et leur apparence. Sous Linux, cela peut varier considérablement d'une distribution à l'autre. Mais prenez un exemple énorme, vous devez couper un troisième coin, ouvrir le menu et cliquer sur le mode sombre. Vous pouvez également rechercher une apparence. Et avec style, vous avez le mode clair et le mode sombre. La page doit toujours être conçue avec un mode latence activé, puis personnaliser les couleurs en mode sombre. J'ai eu l'impression d'avoir vraiment activé le mode sombre de mon système d'exploitation. Je vous recommande de mettre la vidéo en pause et de l'activer. D'accord, tout d'abord, nous allons personnaliser la couleur d'arrière-plan de la page, qui dérange le plus les yeux. A utilisé l'état sombre et défini une couleur d'arrière-plan gris foncé. Le titre est désormais très visible. Réglez-le donc sur une couleur claire. Il y a aussi un peu de lumière dans le texte. Si vous appuyez sur la touche Tab, un anneau rouge foncé et une large séparation apparaissent sur le bouton. Adaptons-le. Combinez l' état sombre non focalisé sans modification, l'anneau rouge foncé à un anneau plus clair. Si vous appuyez à nouveau sur la touche Tab, l'espace entre le bouton et la bague reste blanc. Au décalage de classe, qui sera l'espacement des anneaux. Si vous avez pensé à le rendre transparent, vous verrez l'offset prendre la forme d'un anneau, mais vous pouvez soit définir manuellement la même couleur d'arrière-plan de la page. Gris 900. Appuyez à nouveau sur la touche Tab. Maintenant, ça a l'air mieux. Je vous recommande d'essayer d'autres états, comme le fait de cliquer. Je pense que ça a l'air bien comme ça. La page est désormais adaptée au mode sombre. 20. Réutiliser des classes: Si vous regardez le code que vous avez écrit jusqu'à présent, certains éléments ont de nombreuses classes. En principe, cela ne devrait pas poser de problème. Mais prenons le bouton comme exemple. Vous utilisez généralement le même type de bouton sur nos pages. Vous devrez donc copier et coller ses classes dans tous les boutons. Cela pose un problème, en particulier lorsque vous souhaitez mettre à jour le style. Puisque les tumeurs le font sur nos boutons. Dans ces cas, il est préférable de créer votre propre classe contenant les classes Tailwind que vous utilisez. Cette classe doit être définie dans notre fichier CSS personnalisé. Le mode de fonctionnement du CSS personnalisé est le suivant. Lorsque vous exécutez la commande CLI Tailwind, transmettez le chemin vers le CSS personnalisé. Tailwind charge son contenu, qui contient également les couches Tailwind. J'expliquerai ce qu' ils sont plus tard. Ensuite, il analyse les fichiers HTML pour trouver les largeurs et les classes de vent arrière que vous utilisez. Enfin, il génère le CSS standard final que le navigateur lira. Créons maintenant ce fichier CSS personnalisé, grille et ce répertoire SRC. Et Insight crée un fichier CSS Tailwind. Il s'agit d'un exemple. Vous pouvez l'appeler comme vous voulez et le placer dans un autre répertoire. En fait, vous n'avez pas besoin de le placer dans un répertoire, mais il est généralement placé dans SRC. Et c'est là que je vous recommande de le mettre. Les parties principales de ce fichier CSS ou les couches CSS Tailwind, qui sont définies à l'aide de la directive Tailwind. Il s'agit de trois composants Tailwind de base Tailwind jusqu'à ce que, lors des utilitaires, la couche de base réinitialise le CSS afin que les styles soient identiques dans tous les navigateurs. La couche des composants définit un conteneur qui affiche le maximum de champs possible en utilisant des requêtes multimédia. Et la couche utilitaires contient le reste des classes Tailwind. Compilez maintenant ce fichier pour générer le CSS final. Répétez la commande NP X et ajoutez l'option dash I, passez dans le chemin du fichier CSS Tailwind, qui contient les couches Tailwind, le SRC, la barre oblique, le CSS tailwind. Si vous prenez le fichier CSS de style, vous verrez que le résultat est le même qu'avant. En effet, si vous n' utilisez aucun fichier CSS personnalisé, tailwind définit automatiquement les trois couches pour vous. Pour éviter de mémoriser la syntaxe de la commande Tailwind. Ajoutons-le dans des paquets Jason, afin que tu puisses l'invoquer de manière plus simple. Ouvrez les paquets Jason. Un autre nouveau bloc de scripts en haut. À l'intérieur, attribuez un nom à la commande, par exemple quoi ? Parce que ce sera la variante avec cette option, celle que je vous recommande d'utiliser. Ensuite, vous pouvez taper la commande, tailwind CSS. Moi, SRC Slash Tailwind Dot CSS. C'est 0. Style.css. Des dés, des dés quoi ? Copiez et collez cette commande et renommez-la pour la réduire. Remplacez l' option Word par un minificateur. Maintenant, dans le terminal, au lieu de taper la commande manuellement, vous pouvez taper npm run et le nom de la commande, vous l'ajoutez au fichier package, par exemple quoi. Vous êtes opérationnel. Il est maintenant temps de définir votre première classe personnalisée. Ouvrez le code HTML et sélectionnez toutes les classes qui définissent le bouton. Coupez et écrivez btn à la place. Si vous regardez, le bouton d'aperçu a perdu son style. Dans le CSS à points Tailwind dans la classe BTN, tapez à l'intérieur dans Apply. Ensuite, sur la base des classes de modèles, la directive appliquée est nécessaire pour indiquer que nous savons que vous utilisez It's classes. Le bouton apparaît maintenant correctement dans l'aperçu. De cette façon, vous pouvez réutiliser cette classe sur des pages afin que vos boutons aient la même apparence. Mais imaginez que vous voulez que le bouton apparaisse un peu plus grand sur cette page, mais pas sur les autres. Vous pouvez ajouter une classe Tailwind à la fin pour remplacer celle des Guan dans la classe elle-même. Par exemple, nous avons défini BY three pour définir un rembourrage vertical. Portons-le à cinq. Revenez au code HTML et ajoutez la classe BY five à la fin des classes de boutons. Comme vous pouvez le constater, cela ne fonctionne pas. Voyons pourquoi. Ouvrez le CSS personnalisé et remarquez la couche utilitaires. Comme je l'ai déjà expliqué, cette couche définit le reste des classes Tailwind, y compris BY five, mais nous avons défini une classe BTN ci-dessous, remplace les styles des utilitaires. C'est pourquoi le changement n' est pas appliqué. L'ordre n'est pas pris en compte même si vous utilisez la vague P 5 à la fin de l'attribut class. Ce qui importe, c'est l'ordre dans lequel les classes sont définies dans le CSS. Pour résoudre ce problème, vous devez déplacer la classe btn avant la couche utilitaires. Comme vous pouvez le constater, cela fonctionne maintenant. Vous pouvez définir votre classe comme faisant partie de la couche des composants pour éviter tout problème, sélectionner cette option, déplacer à nouveau votre classe vers le n et la placer dans le bloc de composants aide de la directive Add Layer. Il fait désormais partie des composants et sera placé avant les utilitaires Tailwind dans le CSS final, évitant ainsi les remplacements comme ceux que vous avez vus. Pour fournir, supprimez la classe B15 que nous avons ajoutée à titre d'exemple. Si vous dupliquez le bouton, vous verrez que les styles sont conservés. De cette façon, vous évitez de répéter les mêmes cours en tant que recommandation finale. Essayez de ne pas abuser de cette fonctionnalité. Comme l'avantage de Tailwind est d' avoir ses classes directement dans le code HTML, vous ne devez utiliser cette fonctionnalité que lorsque cela est évident, exemple lorsqu'un composant possède de nombreuses classes et que vous l'utilisez sur plusieurs versions bêta, les boutons étant l'exemple le plus clair. 21. Plugins : introduction: Dans cette partie du cours, je vais vous montrer quelques plugins CSS officiels de Tailwind. Cela signifie que les développeurs du framework les ont eux-mêmes créés. Nous en verrons deux. Le premier est la typographie. Imaginez que vous avez ce code HTML, qui est composé d'un div que vous avez créé et de ce qu'il contient provient d'une base de données, par exemple de WordPress Comme Tailwind CSS supprime tous les styles par défaut du navigateur, ce code produit ce résultat Avec ce plugin et sa classe de prose, vous pouvez styliser cette partie que vous ne contrôlez pas. Le deuxième plugin est Forms. Juste en l'activant, il stylise automatiquement les formulaires. Personnalisable, bien sûr. Enfin, nous examinerons l'utilitaire Line-Clamp, qui était autrefois un plugin, mais il est désormais intégré Imaginons que vous ayez ce paragraphe de texte et que vous ne souhaitiez afficher que trois lignes. Avec la classe line-clamp-3, Tailwind limite le nombre maximum de lignes et ajoute des ellipses 22. Utiliser le plugin Typographie: Le plug-in de topographie applique des styles au texte que vous ne pouvez pas contrôler, comme ceux provenant d'une base de données dans un CMS tel que WordPress Dans ce cas, il s'agirait de ce qu'il y a à l'intérieur du bain. Le résultat serait du texte non stylé. Après avoir activé le plugin, vous pouvez ajouter la classe pros au conteneur pour ajouter des styles prédéfinis. Vous pouvez télécharger le fichier texte HTML depuis la section des ressources du projet. Une fois téléchargé, faites-le glisser vers le dossier principal du projet. Le texte contient une limite. Vous pouvez également le télécharger depuis la section des ressources du projet. Une fois téléchargé, faites-le glisser vers le dossier IMG. C'est la viande. Si nous regardons l'exemple de texte, vous pouvez voir qu'il contient des titres, des paragraphes, un bloc de figures contenant l'image et une légende, au moins, un tableau et un lien Sélectionnez tous les exemples de texte et copiez-les. Revenez à l'index et créez un creux après l'index principal. Maintenant, à l'intérieur de la base profonde, le texte, en ajustant la base. Vous pouvez supprimer le fichier que vous avez téléchargé. Voici à quoi ressemble le texte. Comme je l'ai expliqué au début des leçons, imaginez que vous avez fait une requête dans une base de données à ce stade. Le texte est au format HTML, mais aucune classe Tailwind n'est appliquée car il a probablement été créé avec un éditeur tel que WordPress La seule façon de styliser ce texte serait de créer manuellement un style pour chaque élément du conteneur Vous devez prévoir tous les textes que les textes peuvent contenir Il peut donc s'avérer complexe à gérer lorsqu'un plug-in de topographie applique des styles prédéfinis lorsque vous utilisez la classe pros pour résoudre ce problème plug-in de topographie applique des styles prédéfinis lorsque vous utilisez la classe pros Ces styles constituent une bonne base que vous pouvez personnaliser, comme nous le verrons plus tard. Vous pouvez placer des styles dans le conteneur pour appliquer une marge ou la marge verticale de 20, puis une marge horizontale de cinq. Assurez-vous qu'il est toujours centré sur l'ancienne version de MX. Maintenant, je dois voir à quoi ressemble le conteneur au point de rupture du LG, mais nous devrons le voir mieux à la résolution que j'enregistre. Donc, au lieu d' agrandir l'aperçu, je vais utiliser un navigateur externe. Vous pouvez voir que le texte est plus large que l'en-tête. Résolvons-les en appliquant une largeur maximale, comme dans l'en-tête, en tapant Z, max, W27 Excel Vous avez maintenant limité la largeur. Laissons un peu plus de marge supérieure à cette taille. Par exemple 24. J'ouvre à nouveau l'aperçu. Vous pouvez voir à quoi ça ressemble. Maintenant que le texte est en place, utilisons le plugin typographique La première étape consiste à l'installer. Ouvrez le terminal et tapez npm. Installez la typographie CSS slash de Dash d sur Tailwind. a été relancé. Il a été installé. Si vous ouvrez le fichier de configuration, n'oubliez pas que le plugin est déjà en train de modifier des plug-ins. Revenez maintenant au code HTML et ajoutez la classe au conteneur. Le plugin possède des styles, des marges, des tailles et même des couleurs prédéfinis . Et le tableau contient désormais des informations bien tabulées avec des lignes séparant chaque ligne À la fin, vous pouvez voir l'exemple de lien, qui est noir par défaut. Modifions cela pour que tous les liens apparaissent ou lisons-le dans le conteneur en indiquant les avantages de la classe et la couleur, dans ce cas le rouge. Vous pouvez forcer l' aperçu à l'aide de cette icône si l'aperçu n'est pas mis à jour automatiquement. Une dernière chose à propos des liens. Si vous cliquez sur l'arrière-plan de la page et appuyez sur la touche Tab, vous verrez qu' elle est sélectionnée avec un contour orange prédéfini. Si vous souhaitez personnaliser cette couleur, vous pouvez le faire à l'aide d'un plugin modificateur Découvrons-le dans la documentation. Ouvrez la palette de commandes de Visual Studio Code et saisissez la topographie des conduits de vent arrière Si vous avez installé l'extension Tailwind dogs, vous pouvez rechercher cette section manuellement sur le site Web de documentation CSS de Tailwind Dans la documentation de ce plugin, faites défiler la page vers le bas jusqu'à la section des modificateurs d'éléments Vous trouverez ici la liste complète. Comme nous voulons personnaliser le contour des liens, il va falloir utiliser les avantages, un modificateur, qui comme vous pouvez le voir, correspond à un lien HTML. Revenez dans l'éditeur à l'état de focus et désactivez le plan avec le contour connu. Créons maintenant un nouveau plan. Également avec l'état de mise au point. Utilisez les avantages, un modificateur que vous avez vu dans la recommandation, une autre bague avec une bague pour la classe. Réglez-le maintenant sur Opacité rouge foncé , 50 % pour le mode sombre, un rouge légèrement plus clair Cliquez à nouveau sur l' arrière-plan et appuyez sur le bouton. La couleur est déjà teintée. Comme vous pouvez le voir dans la recommandation, vous pouvez personnaliser davantage de styles à l'aide des modificateurs Par exemple, imaginez 21 textes d'une couleur différente, par exemple rouge. Commençons par les paragraphes qui correspondent au modificateur P. De retour dans l'éditeur. Au texte en prose p, lisez 500. À présent, tous les paragraphes sont rouges. Faisons de même pour les deux sous-titres. Retournez à la documentation. Nous devons maintenant utiliser la prose H2. À la fin. Au niveau des frères, H2, le texte indiquait 500. Maintenant, les sous-titres sont rouges. Complétons le reste des éléments. Continuons avec le texte sous l'image, qui, si vous regardez dans le code, est une légende de figure. Dans la documentation, il est écrit Prose fig caption. Change-le. Continuons avec la liste. Dans la documentation. Il est écrit « Parcourir l'URL », modifiez-le. Enfin, il y a la table. Dans la documentation. Il y a un tableau des pros. Passons maintenant aux en-têtes qui sont D8. Recommandation : elle apparaît sous la forme de lignes D8. Enfin, les éléments des deux versions sont équivalents à ceux de pro strong dans la documentation. Tout le texte est désormais dans la nouvelle couleur. Pour continuer, supprimons les personnalisations des couleurs rouges, que nous n'avons vues qu'à titre d'exemple Nous allons personnaliser les images d' un élément pour éviter qu'elles ne soient trop grandes. Pour ce faire, chez les professionnels de la classe, IMD, max, W vers Excel Les deux tailles Excel seront la taille maximale pour toutes les images incluses dans le conteneur. Si vous prenez le point algébrique, cette image est désormais limitée car l' original est limitée car l' original est Voyons à quoi cela ressemble avec un mode sombre activé. Comme vous pouvez le constater, le résultat est plutôt mauvais. Heureusement, Tailwind possède une classe que vous pouvez utiliser pour ce mode à la tombée de la nuit et y ajouter la classe Pros Inverts C'est ça Il est désormais adapté à ce mode. Facile et rapide. Pour terminer de regarder à quoi cela ressemble dans une fenêtre plus large, vous pouvez voir que l' en-tête contient un texte volumineux. Le texte sur lequel nous travaillons est beaucoup plus petit. Pour augmenter la taille du texte à ce point d'arrêt, nous utiliserons la classe Pro LG Voici le résultat. Les résumés. Tout d'abord, vous devez installer le plug-in avec npm et l'activer dans le fichier de configuration Ensuite, dans le code HTML, dans le conteneur de texte, utilisez la classe pros. Si vous souhaitez personnaliser un style, vous pouvez utiliser les modificateurs pour adapter les couleurs au mode sombre Vous pouvez utiliser la classe Pros Invert et pour agrandir la police, ils produisent la classe Algae 23. Utiliser le plugin Forms: Si vous ajoutez des éléments de formulaire à votre page, vous verrez qu'ils n' ont pas de style par défaut. Cela vous permet de contrôler totalement l'application de l'unité d'état. Cette décision prise dans Tailwind CSS va à l'encontre la plupart des frameworks CSS qui proposent des styles par défaut Et à de nombreuses reprises, vous devez les remplacer si vous souhaitez appliquer des personnalisations Toutefois, si votre projet est simple et que vous n'avez pas besoin de le personnaliser, ou si vous souhaitez un bon point de départ, le plug-in Forms applique automatiquement des styles prédéfinis. Créons un petit formulaire d'inscription au bas de la page, demandant l' adresse e-mail et le mot de passe de l'utilisateur. Juste en dessous du dernier paragraphe, il doit y avoir le code masqué indiquant l'enregistrement. Créez ensuite un formulaire en action. Vous pouvez utiliser le hashtag pour rediriger vers le même appât sur le forum, puis commencer à créer l' étiquette de l'e-mail C'est la classe SR uniquement, c' est-à-dire uniquement un lecteur d'écran, donc elle n'est visible que dans les lecteurs d'écran. C'est utile pour l'accessibilité, mettez veille prolongée pour de vrai notre processus Courrier électronique. Définissez ensuite un champ d'e-mail de saisie en tant qu'e-mail de type espace réservé Créez maintenant l'étiquette du mot de passe. Également avec la classe ASR uniquement. Mot de passe. Générez maintenant le champ de saisie du mot de passe en tant que mot de passe de type espace réservé. Et fermez chaque paire avec un plongeon. Au bout de l'avant-bras, au niveau du bouton avec une classe BTN, que vous avez déjà créée pour le bouton d'en-tête, celui qui indique démarrer. De cette façon, nous réutilisons les styles, ce qui rend le salaire de demain homogène. Sand ajoutera des classes au formulaire pour laisser un espace entre chaque flux de champ et la direction des colonnes. Et avec un espace vertical de cinq, les champs rempliront toute la largeur en attribuant la classe complète W. Ainsi, le formulaire n'a aucun style pour le moment. Installons le plugin Forms pour ajouter des styles prédéfinis. La première chose à faire est d' installer le plug-in, ouvrir le terminal et de taper npm install dash d sur les forums CSS slash de Tailwind Et il est utile de recharger le compilateur. N'oubliez pas que dans le fichier de configuration, nous avons déjà ajouté le plug-in. Les champs sont désormais plus beaux, mais les possibilités de personnalisation sont nombreuses. Je vais personnaliser le champ d' e-mail afin que vous puissiez voir comment il change par rapport au Garfield de base, qui utilise les styles par défaut du plugin, ajuste la marge horizontale et également la marge verticale Écrivons quelque chose. Cela a l'air bien, mais soulignons-le davantage. Posez les textes dans le champ, en noir. Essayons à nouveau. Maintenant, elle se démarque davantage. Pour terminer, définissons la bordure en gris clair avec des coins un peu profonds et arrondis. Faisons quelques ajustements pour des tailles d'écran plus grandes. Et notez l'aperçu jusqu' à ce point de rupture. Les champs n'ont pas besoin de remplir toute la largeur à cette taille. Je les ajusterai pour en occuper la moitié. Avec un W, une entaille, deux verres. W représente la largeur et une barre oblique (deux représente également la moitié de cette classe dans le champ du mot de passe Cela ne semble pas correct. Le fait que le bouton occupe toute la largeur sera limité par la classe Self Start, qui appartient à Flexbox Voyons en quoi ça s'améliore. Lorsque le champ est sélectionné, une bordure bleue apparaît. Modifions-la pour qu'elle corresponde à la largeur caractéristique de cette page L'état de mise au point définit la taille de la bague sur le rouge foncé, l' opacité sur 50 % et rend la bordure des champs transparente En d'autres termes, vous verrez un anneau en forme de vent arrière, mais pas la bordure HTML La différence est que la bague se trouve à l'extérieur et enveloppe le champ, permet même de la séparer ce qui permet même de la séparer comme nous l'avons fait avec le bouton, bien que nous n'ayons pas pu le faire dans ce cas. Maintenant, ça a l'air bien mieux. Passons en mode sombre. Lorsque nous sélectionnons le champ, nous pouvons à peine voir l'anneau. Mettons-le en évidence en réglant un rouge plus clair. Pour le mode sombre. Il pourrait être mis en évidence un peu plus en augmentant la taille jusqu'à la valeur suivante, qui est quatre. Réglez également l'opacité à 50 %. Bien que nous ayons déjà défini l'opacité auparavant, le destin du mode sombre hérite de ce style C'est-à-dire si nous l'avons déjà défini pour le mode clair et que nous voulons l'utiliser pour le mode sombre. Nous devons le répéter. Je vais revenir au mode J'aime. Il est probable que vous utiliserez ces styles personnalisés pour tous les forums de votre projet. Je recommande d'utiliser votre propre cours et d' éviter ainsi de répéter les mêmes cours. Toutes les classes pourraient donc taper le nom de notre nouvelle classe, par exemple input. Et maintenant, dans Tailwind point css, créez la classe d'entrée après btn Tapez sur Appliquer, puis basez les classes. Maintenant que vous avez compris la différence entre les styles par défaut et la personnalisation, associons-les en attribuant la classe de saisie au champ du mot de passe Si vous préférez éviter de définir votre classe dans d'autres domaines, procédons d'une autre manière. Supprimez la classe d'entrée des deux champs. Maintenant, dans Tailwind, le point css a remplacé la saisie par point par type d'entrée d'e-mail, un mot de passe de type entrée De cette façon, vous pouvez définir les styles de ces champs par défaut. En résumé, comme vous l'avez fait pour la typographie, vous devez d' abord installer le package avec NPM Ensuite, dans le fichier de configuration, activez le plug-in après le précédent. C'est ça. si vous le souhaitez, comme nous l'avons vu dans cette leçon, vous pouvez appliquer votre personnalisation sur son champ ou en regroupant les lunettes partagées dans le fichier CSS Tailwind point 24. Ajouter une liste de films et de séries: Pour montrer comment fonctionne le prochain plugin vous aurez besoin de plus de matériel. Nous allons créer une petite liste de quatre films et séries. Vous pouvez télécharger les quatre couvertures dans la section ressources du projet. Une fois que vous les aurez téléchargés, ils placeront la liste après le bloc principal dans le dossier IMG . Créez une liste d'URL. Commençons par le premier élément de la liste. La première chose à afficher sera l'image. Visual Studio Code détecte les fichiers IMD 2s mr. Le robot n'a pas renseigné l'attribut alt. Séparez la liste du bouton Get Started par une marge supérieure au niveau d'un rembourrage horizontal Il ne s'en tient donc pas aux années 80. Définissez une couleur d'arrière-plan pour l'élément, par exemple un rouge très clair. Comme l'image occupe la totalité de l'élément, la couleur n'est pas visible. Appliquez un rembourrage horizontal et vertical sur le LEA. Et l'arrière-plan sera visible. Arrondissons un peu les angles aussi. Pour un effet de carte à la bordure. Stabilisez légèrement l'image en ajoutant une ombre et en arrondissant les coins Ajoutons le titre sous l' image avec NH3, monsieur. Un robot. Et en dessous d'un paragraphe, précisons s'il s'agit d'une série ou d'un film. Dans ce cas, il s'agit d'une série. Réglez la couleur rouge 600, titre inclus sur le paragraphe avec un plongeon et ajoutez le texte LG glass. Modifiez la hauteur de la police à six, augmentez le poids, le médium et séparez-les légèrement dans la marge supérieure pour les séparer du détenu. Ensuite, nous allons mettre le synopsis, créer un paragraphe, et à l'intérieur, nous allons générer du texte fictif à l'aide du générateur Lorem Ipsum Visual Studio Code pour lui donner le texte de telle sorte que seules quatre Pour séparer le synopsis du texte ci-dessus et le fermer dans un div Maintenant, dans cette définition se trouve la classe Space Y4, ce qui signifie que nous ajoutons des marges au-dessus et en dessous. À ce stade, la DMT pour les cours en profondeur ne fonctionne pas vraiment pour moi. Incluons ce div et l'image dans un nouveau div et définissons l'espace avant la classe De cette façon, nous ajoutons une certaine séparation et le vide pour la classe n' est plus nécessaire. Le synopsis est en concurrence avec un titre Réduisons donc sa permanence en le définissant dans une couleur plus claire Le dernier élément sera un bouton pour regarder la cassette vidéo, quelque chose comme quoi ? Attribuez-le. Les classes btn que vous avez utilisées auparavant. Au fur et à mesure qu'il se lit et attire l'attention, réduisez son importance en diminuant la durée de la randonnée Il s'agit du résultat final en mode mobile. Élargissez la critique jusqu'à ce que vous atteigniez le même point d'arrêt. Vous le remarquerez parce que le modèle de mots change de taille car il hérite de la classe btn, qui intègre déjà ce comportement avec cette largeur Cela n'a pas de sens d'empiler les éléments. Nous allons donc placer l'image d' un côté et le texte de l'autre. Le div qui contient l'image avec l' autre unité C'est lui qui définit le mieux cette nouvelle structure, qui sera une grille utilisant les effets S&P au niveau de la classe de grille Et définissez-la avec trois colonnes de manière à ce que l'image soit petite sur le côté gauche à un espacement de six. Si vous le remarquez, le titre est légèrement plus bas que l'image. Cela est dû à l' espace disponible avant les cours. Peut être corrigé avec un zéro espacé. Comme la grille comporte trois colonnes alors que nous n'en utilisons que deux. Faisons du champ de texte les deux colonnes de droite. Remplissez donc l'espace vide. Localisez le div qui contient les textes et ajoutez le colspan à la Plaçons le bouton Watts en bas. L'une des façons de le faire est de le positionner de manière absolue. Et pour cela, son contenant doit avoir une position relative. Et ce conteneur est le div qui remplit deux colonnes. À la classe relative Et maintenant, placez la classe absolue sur le bouton. Spécifiez ensuite qu'il doit être affiché en bas. C'est le résultat final DSM Breakpoint continue d'agrandir l'aperçu jusqu'à ce que vous le lisiez aujourd'hui et le point dépravé où le bouton À cette taille, le chariot est trop blanc. Dans la classe maximale W to Excel. Pour centrer le chariot, utilisez la classe automatique MX. Si vous êtes maintenant du ressort et que vous revenez au même point d'arrêt, vous verrez un saut Ce problème peut être résolu en attribuant les classes que vous venez d'ajouter au point d'arrêt SM. Je vois que le bouton est trop blanc. Limitons-le également avec une classe P X trois. La largeur peut également être limitée pour les écrans mobiles blancs. Réduisez l'aperçu à la vue mobile. Zoomer avec ce DSM écrit qu' ils ont créé devient absurdement volumineux. Si vous ajoutez la classe maximale d'armes de destruction massive, cela semble mieux. Et pour appliquer le centre à partir d'ici, supprimez le préfixe S M de MX odor. Vous pouvez le déplacer vers le début si vous le souhaitez. Enfin, à une marge supérieure, 36 devrait suffire. Voilà à quoi ça ressemble. Et nous arrivons au point effilé en L où leur écran a réellement une taille considérable Et nous pouvons envisager une autre façon d'organiser les éléments. Dans cette taille, affichera le panier dans une grille. Pour cela, nous devons ajouter le reste des cartes, copier et coller trois fois leur allié et tout son contenu. Nous avons maintenant quatre chats, mais ce sont les mêmes. Changeons quelques titres de couverture. Le second concerne les professionnels de l'informatique. Écrivez le titre dans la balise alt. Vous pouvez le copier et le coller dans l'arête 3. Passons à la troisième carte, la matrice. Les résurrections matricielles. Copiez le texte et collez-le dans 83. Changez la série, le film. Enfin, la dernière carte est le réseau social. Tapez la touche Alt, copiez-la et collez-la dans le 83. C'est aussi un film. Vous pouvez voir que les cartes sont collées. La séparation dans l'espace des étiquettes UL, pourquoi la 12e place ? Maintenant, ils sont séparés. Voilà à quoi ça ressemble. Définissons la liste comme étant géniale, à ce stade. Il comportera deux colonnes. Réglez la séparation horizontale et une autre verticale, légèrement supérieure. 12. Ici, vous pouvez apprécier le fait que la deuxième carte dispose d'un espace supérieur. L'espacement vertical de la grille semble exagéré par rapport à celui de la 12e valeur par rapport à l'horizontale de huit Cela est dû à l'espace. Pourquoi la 12e classe ? Remplaçons-la par une valeur de zéro. La largeur maximale doit être augmentée , définissons-la à cinq Excel. Comme vous l'avez peut-être remarqué, le monde va mal, Dani le superpose au synopsis en raison de sa position absolue Rendons les cartes plus grandes. Asseyez-vous pour une randonnée de 72. Maintenant, pour déplacer le bouton vers le bas, utilisons flexbox. Supprimez le positionnement absolu. Et également le positionnement relatif du récipient. Commencez par placer le conteneur div extérieur la hauteur maximale Maintenant, le div contenant les textes doit être une boîte flexible dans le sens des colonnes Et pour que le bouton se déplace jusqu'à la fin Un moyen simple consiste à augmenter au maximum l'espace du synopsis avec un cours en groupe Pour que le bouton n' occupe pas toute la largeur. Utilisez le verre autostylé. Reproduisez maintenant ces modifications pour les autres chats. Copiez la classe d'âge de 72 ans de l'allié et collez-la sur la deuxième carte. Au troisième. Et le quatrième. Copiez le cours complet du conteneur et collez-le dans la deuxième carte. Au troisième. La quatrième peut être constituée des lunettes souples provenant du conteneur de texte et les coller sur la deuxième carte, remplaçant la vitre correspondante. Au troisième. Et le quatrième. Copiez la classe de croissance à partir du synopsis et collez-la sur la deuxième carte. Au troisième. Le quatrième. Enfin, copiez la classe autoproclamée à l'aide du bouton et collez-la sur la deuxième carte, remplaçant la classe absolue et la classe zéro inférieure Au troisième. La quatrième, la finition de la mise en page. Nous devons contrôler la taille des images. Ce sont toutes les mêmes randonnées, mais le design pourrait mal paraître si ce n'était pas le cas. Revenons à la taille du mobile. Ici, les images sont trop hautes et beaucoup d'espace vertical est perdu. Commençons par le premier. Disons avec un rapport hauteur/largeur de 32. Cela signifie qu'il aura une large taille rectangulaire, tout le contraire de ce qu'il est actuellement. Cela se fait à l'aide d'une classe d'aspect CSS tailwind, qui utilise en interne les propriétés CSS standard du rapport hauteur/largeur Au cours d'aspect. Comme vous pouvez le constater, intellisense affiche une liste de classes prédéfinies Le premier trouble, qui montrerait la taille d'origine des images. Le second est carré, ce qui indique la taille du carré. La troisième est la vidéo, qui applique un format d'image de 16 x 9. Mais nos options se limitent à ces options car nous pouvons mettre n'importe quelle valeur arbitraire entre crochets. Nous allons utiliser la proportion trois par deux. Pour éviter que l'image ne soit déformée. Nous devons n'en afficher qu'une partie comme s'il s'agissait d'une fenêtre pour le faire au niveau du code objet de la classe. Nous allons maintenant spécifier la partie que nous voulons afficher, qui sera la partie inférieure de la classe inférieure de l'objet. Voilà à quoi cela ressemblerait. Maintenant, agrandissez l'aperçu jusqu'au point d'arrêt SM. Il est intéressant de montrer l' image verticalement de manière indécise, mais nous allons le faire de manière contrôlée, en maintenant un rapport hauteur/largeur L'aspect est libre pour la classe et centrez-le avec des objets. Entrez, copiez les classes. Nous venons d'ajouter. Base-les sur la carte suivante. Dans le suivant. Dans le dernier. C'est le résultat final. Mais pour terminer, ce mode produit adaptatif a d'abord activé. Dans le label Los Angeles. Le fond gris, intensité 800. La bordure est également grise. Intensité de 700 s. Copiez ces couleurs sur le reste des cartes. Le deuxième, le troisième et le quatrième. Enfin, définissez la couleur du titre sur le blanc. Voici à quoi cela ressemble en mode sombre 25. Utilisation de l'utilitaire de serrage de ligne: L' utilitaire de serrage de ligne est utilisé pour rayer un texte sur un maximum de lignes. Elle s'appliquait auparavant, mais elle a été incluse dans la bibliothèque de classes car les navigateurs actuels prennent réellement charge cette fonctionnalité CSS. Voyons avec un exemple. Imaginez que vous avez un design comme celui-ci. Une grille de deux lignes sur quatre colonnes. Vous avez placé du texte fictif dans chaque cellule, là où il est disposé. Notez que chaque cellule comporte six lignes de manière persistante. Lorsque vous utilisez les textes réels de la base de données, le contenu lui-même a des longueurs différentes et la mise en page est perturbée Si vous appliquez l'utilitaire line clamped à lui-même en spécifiant le nombre maximum de lignes, par exemple, les six lignes des textes La mise en page semble à nouveau correcte. Examinons ce problème à l'aide du rythme d'exemple que nous développons. Nous devons remplacer le texte fictif par un vrai synopsis. Vous pouvez télécharger ce fichier de synopsis au format TXT depuis la section des ressources du projet Une fois téléchargé, ouvrez-le, copiez le premier synopsis Remplacez le texte fictif du premier film. Comme vous pouvez le constater, le texte est plus long que prévu et il est à l'envers. L'élément s'en chargera plus tard. Copiez le deuxième synopsis et collez-le sur le texte fictif du deuxième film Copiez le troisième synopsis et collez-le sur le texte fictif du troisième élément Enfin, copiez le quatrième synopsis et collez-le sur le texte fictif du dernier élément Vous pouvez à présent supprimer le fichier synopsis. Supposons que les données de la page proviennent d'une base de données contenant un débat sur la page proviennent d'une base de données contenant un la conception avec du texte fictif qui a altéré le Tailwind possède une classe appelée truncate, qui ajoute trois points à la fin de la première ligne lorsqu'elle atteint la limite du conteneur Dans ce cas, ce ne serait pas une bonne solution car cela supprime trop de textes Ils s'occupent dans ce cas de tronquer les textes Ils ont donc un maximum de cinq lignes. Et puis ils seront tous aussi grands. Dans une propriété CSS standard appelée webkit line clamp. C'est juste ça. Mais pour que cela fonctionne, vous devez utiliser toutes leurs propriétés ensemble. L'utilitaire Line Clamps fournit cette fonctionnalité dans une classe unique Dans une balise p du premier synopsis. Commencez à taper line clamp. Et différentes valeurs apparaissent. Vous pouvez limiter jusqu'à six lignes. Il existe également une méthode connue pour annuler l'effet si vous l'avez appliqué globalement à un conteneur. Le premier, il y a un problème. Bien que les ellipses soient placées correctement, le reste du texte n' est pas tronqué Cela est dû à une incompatibilité du clampage de ligne avec Flexbox. La norme CSS est toujours en cours de développement et utilise en interne un écran compatible avec la version actuelle Si vous avez essayé de supprimer la classe de gril, vous verrez qu'elle est désormais corrigée. Repositionnons complètement le bouton. À la classe zéro absolue et à zéro la plus basse du modèle. Et par rapport au conteneur. Essayez de le limiter à trois. Nous en resterons à cinq heures , comme nous l'avons conçu. Pour terminer, reproduisez ces styles sur le reste des cartes Passons à la suivante. Enlevez, agrandissez. Dans le conteneur, relativement. Le bouton, absolument. Continuez avec le troisième. Enlevez, agrandissez. Positionnez le récipient relativement. La matraque, absolument. Maintenant, la quatrième, supprime le monde. Positionnez le récipient relativement. Le bouton, absolument. Si vous devez la limiter à d' autres lignes, par exemple dix, vous pouvez définir cette valeur dans le fichier de configuration l'intérieur du théorème extend à l'aide de la nouvelle option de serrage de ligne Et à l'intérieur du bloc, définissez la clé dix et sa valeur entre guillemets. Dix. Si vous revenez au code HTML et supprimez les cinq, vous pouvez voir comment IntelliSense cet espace, cette nouvelle valeur Si vous le choisissez, vous pouvez voir comment il a été appliqué. Bien que ce soit évidemment hors cadre. Enfin, si vous ne souhaitez utiliser cette nouvelle valeur qu'à un seul endroit, il n'est peut-être pas judicieux de ajouter au fichier de configuration Vous pouvez simplement utiliser une valeur arbitraire entre crochets. C'est le même résultat. Laissons les choses telles qu'elles étaient. Ici. Laisse-le à cinq heures. Dans le fichier de configuration. Supprimez l'option de serrage de ligne. Avec cette technique, peu importe la longueur du synopsis, le design fait une pause En résumé, vous avez vu comment adapter la hauteur des différents contenants pour conserver une harmonie visuelle. Cela se fait avec les huit classes complètes. Et en positionnant absolument le bouton. Pour tronquer le texte dans le conteneur de textes, vous appliquez le verre Line Clamp Pour ajouter de nouvelles valeurs. Vous devez les définir dans le fichier de configuration à l'intérieur de l'option line clamp. Ou si vous souhaitez utiliser directement les nouvelles valeurs, vous pouvez les mettre entre crochets 26. Aperçu des concepts avancés: Avec ce que vous avez appris jusqu'à présent, vous devriez être en mesure de gagner le salaire que vous voulez. Cependant, le cadre ne se limite pas à cela. Ouvrez le site Web Tailwind sss.com et cliquez sur conduits. Je vais vous parler de certains aspects plus avancés vous sachiez de quoi il s' agit et que vous les gardiez à l'esprit. Vous saurez alors où les chercher si vous en avez besoin. Dans ce cours, je vous ai montré comment utiliser directement le CSS Tailwind. Mais si vous utilisez un framework JavaScript, il existe des guides pour l'intégrer. Vous les trouverez dans les guides du framework d'installation, par exemple si vous utilisez Next JS, vous avez cette porte. Ou si vous utilisez des larves, vous avez celle-ci. En utilisation avec des préprocesseurs. Vous avez plus d'informations sur les deux CSS. La bibliothèque utilisée par tailwind pour compiler le CSS final. Vous avez des instructions pour faire des choses intéressantes. Si vous faites défiler l'écran vers le bas pour utiliser des fichiers distincts pour les importations, vous pouvez voir comment diviser vos classes CSS en différents fichiers et les importer. À la fin du guide, vous trouverez des informations sur l'utilisation de SAS et d'autres processus avec Tailwind. Au survol du focus et dans d'autres états. Cet alias contient des exemples de tous les états CSS gérés par Tailwind en mode sombre. Dans la dernière section, vous découvrirez comment intégrer un bouton sur vos appâts pour passer du mode clair au mode sombre et enregistrer cette préférence dans le navigateur. Sous les plugins. Dans la section d'ajout d'un style de base, vous trouverez des instructions sur la façon de personnaliser polices ou même d'en ajouter de nouvelles avec font-face. Vous gérez plusieurs projets et vous avez généralement plusieurs classes qui vous sont propres, par exemple pour les boutons. Dans la section d'ajout de composants, vous avez un exemple de la façon d'extraire ces lunettes dans un plugin que vous pouvez inclure dans vos projets. Si tu sais qu'il manque quelque chose au vent arrière. Dans cette section, Ajout d'utilitaires, trouverez un guide pour ajouter de nouvelles classes. Le thème décrit comment configurer votre projet avec des styles initiaux déjà personnalisés. Dans les préréglages. Il existe également des informations connexes. Les autres portes de personnalisation vous indiquent comment modifier valeurs par défaut des points d'arrêt, des couleurs ou de l'espacement. Reflect explique à quoi sert la couche de base Tailwind et à quoi ressemblent les styles initiaux. À partir de là, toutes les classes Tailwind sont couvertes, classées par catégories jusqu'à ce que vous arriviez à la section des plugins Officer, Lincoln au référentiel de chacune d'entre elles. Comme dernière ressource ci-dessus, dans les screencasts, vous avez accès à la chaîne YouTube de Tailwind où ils vous apprennent à créer de vrais brindilles. Si vous voulez atteindre un niveau très avancé, jetez-y un coup d'œil. 27. Étapes suivantes: Je tiens maintenant à vous féliciter d'avoir atteint la fin. Très bien Vous avez déjà les connaissances nécessaires pour créer n'importe quelle page avec Tailwind. Je vous recommande maintenant de configurer le framework dans certains projets sur lesquels vous travaillez avec ce que vous avez appris et d'en remplacer une partie l'aide des classes Tailwind du code HTML. Une autre alternative serait de créer une page à partir de zéro, celle que vous souhaitez. Parce que la clé est maintenant de pratiquer et internaliser ce framework autant que possible. Faites des erreurs et apprenez à résoudre les problèmes définis, car ce n'est qu'alors que vous les comprendrez vraiment. Avec ça. Je tiens à vous dire de ne pas vous contenter de regarder la malédiction et de l'archiver. Trop de temps s' écoule pour appliquer ce que vous avez appris et revenir à la leçon que vous devez réviser. Bien entendu, si vous avez des questions sur ce que vous avez vu, n'hésitez pas à les poser dans la leçon correspondante. En guise de recommandation finale. Gardez un œil sur la section blog. Il y aura une politique dans les nouvelles versions et expliquera ce qui a changé. Merci pour le temps et les efforts que vous m'avez consacrés.