React rencontre Tailwind CSS | Implémenter le mode sombre dans React

1. Introduction du cours: Bienvenue dans ce cours dans lequel nous expliquerons comment utiliser le CSS tailwind avec l'application React m'appelle Fesel et je suis heureuse de vous guider à travers la puissante combinaison de React et Tailwind CSS En tant que développeur Web et formateur, je suis passionné par le fait d'aider les apprenants comme vous à créer des applications propres, efficaces et visuellement époustouflantes. Dans le paysage actuel du développement Web en évolution rapide, il créer des conceptions modernes réactives est indispensable de créer des conceptions modernes réactives sans compromettre les performances Tailwind CSS, avec son approche axée sur l' utilité donne en matière de style Associez-le aux fonctionnalités dynamiques de Reacts, et vous disposez de la boîte à outils idéale pour créer une application Web adaptée à la production. Voici maintenant un aperçu de ce que nous allons aborder dans ce cours en particulier. Vous allez donc commencer par l' introduction au CSS tailwind. Nous allons d'abord décrire son utilité, son système de style, puis nous vous expliquerons comment configurer un formulaire HTML simple qui utilisera le CSS tailwind Ensuite, nous explorerons le design et le thème réactifs dans React et notre application tirera parti des facteurs favorables et de la flexibilité pour créer des mises en page qui s'affichent parfaitement sur n'importe Et pour le point culminant de notre projet de cours, vous allez créer un mode sombre entièrement fonctionnel dans React Cela vous aidera à améliorer l'expérience utilisateur et l'esthétique de toute application que vous créerez à l'avenir. À la fin de ce cours, vous aurez une solide compréhension de la façon dont vous pouvez intégrer Tailwind CSS à React pour créer des applications Web élégantes et réactives Maintenant, vous apprendrez non seulement comment, mais aussi pourquoi, en vous assurant de pouvoir appliquer ces compétences à des projets du monde réel. Maintenant, à qui s'adresse ce cours ? Donc, que vous soyez un débutant désireux d'explorer la conception Web moderne ou un développeur React qui cherche à rationaliser votre flux de travail, ce cours a quelque chose précieux pour tout le monde, les développeurs. Et quand je dis tout le monde, je parle de développeurs de tous niveaux. Que vous soyez un développeur débutant, intermédiaire ou avancé, ce cours pourrait être parfait pour vous, si vous souhaitez découvrir comment moderniser votre application Web. Alors, êtes-vous prêt à maîtriser l'art de créer de belles applications React avec Tailwind CSS ? Je le suis. Plongeons-nous dans le vif du sujet et créons ensemble quelque chose d'incroyable. Rendez-vous à l'intérieur du cours. 2. Libérer la puissance de Tailwind CSS : un guide pour débutants: Il est donc temps de commencer à parler de Tailwind CSS Maintenant, qu'est-ce que Tailwind CSS ? D'accord ? Je vous demanderais donc à tous de consulter Google Tailwind, et vous verrez ce site web tailwind CSS OK ? Maintenant, tailwind CSS est un utilitaire pour le framework CSS qui vous permet de créer des designs personnalisés très rapidement en appliquant des classes OK ? Maintenant, si vous connaissez le HTML, vous savez que les éléments HTML se trouvent ici. Vous pouvez voir quelques éléments HTML, d'accord, Image TV. Ils ont tous des attributs, d'accord, et l'un des attributs est la classe, d'accord ? Donc 1 seconde ici. OK. Maintenant, ce qui se passe, c'est que si voulez appliquer n'importe quel type de CSS, vous voulez appliquer n'importe quel type de CSS, vous devez mentionner la classe, puis vous devez simplement ajouter le CSS dans le fichier CSS, et ce CSS sera pour cette classe particulière. C'est comme ça que ça va fonctionner, non ? Vous devez donc écrire du CSS et vous assurer que les noms de classe correspondent. Mais avec Tailwind, si vous configurez ce framework en particulier, vous devez simplement utiliser les classes, et vous n'avez pas à écrire de CSS Alors laissez-moi vous montrer ce que je veux dire. Donc, si vous consultez la documentation ici, accord, disons que si vous optez pour le mode sombre, vous pouvez voir ici. D'accord, comment pouvez-vous implémenter le mode sombre en utilisant Tailwind ? Vous pouvez donc voir ici que vous pouvez simplement utiliser BGite. BGIWhite signifie fond blanc. OK, Dark BG Slate 800. Donc, en gros, en fonction des cours, ce qui se passera, c'est que tout sera appliqué. Je vais donc vous donner quelques exemples comme l'affichage ici, la taille de la boîte, d'accord. Récipient. Ainsi, si vous créez un conteneur, vous pouvez spécifier SM, qui est petit, moyen, grand ou très grand pour Excel. Tu peux t'en servir. OK ? Vous pouvez dire PX, quatre par ici. OK, donc ce sont toutes des classes, en gros, que vous utilisez dans chaque classe qui a un sens. Et sur cette base, le CSS est généré automatiquement. Maintenant, un exemple simple est le rembourrage. OK ? Si vous souhaitez ajouter un rembourrage, vous allez dire P zéro, donc celui-ci sera ajouté Rembourrage de zéro pixel. Si vous dites PX zéro, rembourrage à gauche sera ajouté et rembourrage à droite sera ajouté de zéro pixel P zéro signifie rembourrage en haut et en bas. PS signifie rembourrage en ligne de départ. C'est pourquoi vous n'avez qu' à utiliser cette classe et ces propriétés seront ajoutées automatiquement. C' est ainsi que cela fonctionne. Il y a plusieurs exemples et parlez-en, et il peut sembler : Oh, je dois me souvenir de tout cela, mais ce n'est pas si difficile. Au fur et à mesure que vous commencez à l'utiliser, vous vous y habituez rapidement et vous commencez essentiellement à mémoriser et à vous souvenir des noms de classe C'est ainsi que les choses fonctionnent. OK ? Vous pouvez donc voir ici ce sont les exemples qui complètent le top six rembourrage est donc ajouté. Rembourrage droit à quatre, donc un rembourrage est ajouté Cela fonctionne donc de cette façon. Et il y a genre, vous pouvez consulter cette documentation ici, d'accord ? Et il y en a beaucoup comme vous pouvez voir la pièce jointe d'arrière-plan, le clip d'arrière-plan, la couleur d'arrière-plan. De nombreux exemples et éléments ont été mentionnés ici. Vous pouvez donc simplement y jeter un œil. OK ? C'est donc incroyable. D'accord, parce que vous n'avez pas besoin d'écrire de CSS. Vous utilisez simplement quelque chose de préfabriqué et fait pour vous, d'accord ? C'est donc un vent arrière. Je vous encourage tous à consulter ce site Web et à y jeter un œil. OK ? Maintenant, gardez à l'esprit que ce site Web ne cesse de changer. Ils peuvent modifier l'interface utilisateur ou quelque chose comme ça. Donc, selon le moment où vous regardez cette vidéo, vous verrez peut-être une interface différente, mais ne vous inquiétez pas, d'accord ? Ce n'est toujours pas le cas, cela ne changera pas radicalement, d'accord ? Le concept et l'essentiel resteront les mêmes. OK. Alors explorez simplement ceci. également de nombreux exemples Vous trouverez également de nombreux exemples sur la page d'accueil. Vous pouvez voir pas mal d' exemples, d'accord, pour les couleurs. OK, exemple de typographie. OK, tu peux voir des ombres. OK. Alors oui, ça y est. Vous pouvez voir espiègle, élégant. OK. Vous pouvez voir à quel point y peut être ludique. Vous pouvez voir que tout ce CSS correspond aux noms de classe, vous pouvez voir les noms de classe, quels sont tous les noms de classe utilisés. Il suffit de mentionner le nom de la classe. Vous pouvez voir un look élégant, un look brutaliste. OK, symbole ludique. Toutes sortes de designs sont donc possibles comme le montrent ces exemples ici. Le responsive est également possible. OK. Vous pouvez voir SM, MD, LG. C'est donc sur les petits appareils, les appareils de taille moyenne, les appareils à grande échelle. OK. Vous pouvez donc spécifier les classes de cette façon. OK, tu peux voir ici. C'est ainsi que cela est créé. Tu peux voir. OK. Donc oui, c'est ça. Vous pouvez passer en revue les exemples. Il existe de nombreux exemples. OK. J'adore parcourir et voir ces exemples. Ils sont tellement élégants. OK. Alors parcourez-les. Vous comprendrez l'importance de savoir pourquoi c'est incroyable, d'accord ? Et comment les choses pourraient-elles changer si vous commencez à utiliser Tail Went, d'accord ? 3. De zéro : créer votre premier projet HTML avec Tailwind CSS: Il est donc temps de jouer un peu avec le CSS tail vent. Donc, ce que je vais faire, c'est que je suis ici sur le code Visual Studio. Mon navigateur est également ouvert côte à côte. OK. Ce que je vais faire, c'est créer un nouveau fichier, d'accord ? Sélectionnez une langue, bien sûr, le HTML. Nous allons créer un simple fichier HTML. OK, j'ai une prise dedans qui peut m' aider à générer un code standard. OK. Et je vais garder beaucoup de choses simples. Je vais te dire bonjour. Le titre est Bonjour » de cette page Web en particulier. Je vais juste faire un petit zoom arrière pour que vous puissiez voir quel code est généré. OK ? Vous pouvez voir ce code. C'est un outil de base pour le HTML . OK ? Maintenant, nous allons utiliser le vent arrière ici. Je vais donc venir ici. OK. Et je vais faire défiler la page vers le haut. Passons à la documentation. OK, et voyons comment tu peux t'en servir. OK ? Donc c'est toute la partie installation, d'accord ? Il s'agit de l'installation pour Tailwind CLI. Nous utiliserons le CDN. OK. Ici, vous pouvez voir comment le vent arrière peut être utilisé. OK ? Nous pouvons donc utiliser un plugin tiers. OK ? Il existe quelques exemples dans lesquels le vent arrière peut être utilisé OK ? Donc, ce que je vais faire, c'est copier ce code. OK ? Je vais dire script. Je vais récupérer l'élément de script. Viens ici. Je vais ajouter un script en tête. OK ? C'est fait. Oups, j'appuie accidentellement sur Enregistrer Le fichier n'est pas enregistré. C'est bon, mais je vais aussi le copier. Je vais venir ici. OK. Et ici, dans le corps, je vais le coller, d'accord ? Donc oui, nous profitons, vous savez, de certains cours ici. OK ? Vous pouvez voir certains cours. Maintenant, il y a une chose que je voudrais mentionner : vos cours ont été ajoutés. OK, laissez-moi d'abord enregistrer le fichier. Je vais enregistrer ce fichier sur le bureau, d'accord ? Je vais enregistrer le fichier dans mon espace de travail où je crée ce projet pour simplifier les choses. Ce que j'ai fait, c'est que j'ai accédé au dossier où ce fichier a été créé, sur mon système local, et j'ai simplement double-cliqué dessus pour l' ouvrir dans le navigateur accédé au dossier où ce fichier a été créé, sur mon système local, et j'ai simplement double-cliqué dessus pour l' ouvrir dans le Et vous pouvez le voir, sans écrire aucune sorte de CSS, simplement en utilisant, vous savez, du texte Excel. Je peux dire texte quatre Excel, sauvegardez ceci et la taille sera un peu plus grande. Vous pouvez voir, d'accord, textez sept Excel. Il doit s'agir d'une classe valide, o, et vous pouvez voir comment cela change. Police en gras. Vous pouvez également utiliser le semi-gras, semi-gras ici. OK, quelque chose comme ça. D'accord, je vais essentiellement tout ce que vous ajouterez ici, d' accord, ce sera choix qui sera pris en charge. OK. Et vous pouvez voir que le soulignement est également ajouté. Vous pouvez également ajouter des italiques, vous le souhaitez, à tout type de formatage de texte OK ? Tu peux jeter un œil ici. Et avec le temps, il ne s'agit tout simplement pas de, tu sais, il ne s'agit tout simplement pas de ça. Il ne s'agit simplement pas de cours, de mémorisation des cours. Avec le temps, vous apprendrez des choses et vous commencerez également à mémoriser les noms des classes OK ? Vous pouvez voir le style de police. Il y a tellement d'italiques. Si j'ajoute de l'italique, il sera converti en italique. Vous pouvez le voir ici. Si j'ajoute l'italique. Oups. Je veux donc continuer à souligner, je vais voir l'italique frais Tu peux voir OK. C'est donc la magie du vent arrière, d'accord ? Créons également un petit peu. Genre, je vais juste m'en débarrasser. OK ? Je vais commenter cela, et nous pourrons ajouter une autre sorte d'interface utilisateur. OK. Ce que je vais faire, c'est simplement, vous savez, étendre cette option. OK. Nous passerons en plein écran. OK ? Et ce que je vais faire, c'est enregistrer ceci, vous pouvez également créer une interface utilisateur un peu meilleure, et je veux vous le montrer. En gros, ce que je vais faire, c'est dire cours ici, je vais dire BG IphenGray et je dirais 100 Je vais dire Flex, je dirais Justify Center. Je dirais le centre des objets. En gros, je place tout au centre de l'écran horizontal ici. Je vais enregistrer ça. OK. Maintenant, si vous enregistrez ceci et si vous voyez le résultat, oups, si vous voyez le résultat ici, laissez-moi vous montrer le résultat y a donc aucune sortie car nous n'avons rien ajouté dans le corps. OK. Alors laissez-moi le faire et nous verrons à quoi ressemble le résultat. Donc, ce que je vais faire, c'est ajouter une classe div ici, désolé Div, pas un élément Divlas Div OK. Et permettez-moi d'appliquer certains cours, comme les cours de tailbin Je vais donc voir PG of White ici. OK, rembourrage de huit, arrondi. OK, LG. C'est pour Bottle Radius, Shadow of Okay. Vous pouvez voir LG arrondi. Si vous voulez connaître l' un des cours, vous pouvez suivre ces cours. Tu peux venir ici, tu peux les chercher. OK. Vous pouvez voir le rayon de la bordure. Tu peux voir. OK. LG donc arrondi, moyen arrondi, OK, arrondi. Et c'est arrondi. Ainsi, en fonction de la classe que vous utilisez, vous obtiendrez le résultat correspondant. Maintenant, ce que je peux faire, c'est que si vous l'enregistrez, laissez-moi le sauvegarder ici. Je sauvegarde ça. OK, et je vais rafraîchir ça. Vous pouvez le voir arriver ici, cette sorte de tache blanche. Maintenant, laissez-moi développer cela et laissez-moi terminer ce que j'essaie de faire. Je vais ajouter un H ici. Je vais te dire bonjour. OK. Et je dirais Tailwind, CSS, quelque chose comme ça J'ajoute juste un message de bonjour, et vous devriez voir le résultat. OK. Donc, si je fais une mise à jour, vous pouvez voir Hello, tailwind, CSS Je peux même embellir ce H, donc je peux dire classe ici OK. Laisse-moi dire texto. Je vais augmenter la taille du téléphone, donc je vais dire à Excel, police en gras, et je vais dire texte. Je veux du gris, OK, et du gris de 800. OK. Oui, voyons à quoi ça ressemble. Donc, paresseusement, ça devrait être beaucoup mieux. Tu peux voir. Hein ? Donc, le CSS Hello tailwind est ce que vous voyez comme une sortie A. Vous pouvez même ajouter un tag P. Vous pouvez simplement continuer sur cette lancée. C'est absolument génial. Un tag P par ici. Vous pouvez dire, ici vous pouvez ajouter n'importe quel type de message. C'est un sous-texte Voici un exemple simple d'utilisation du CSS tailwind. Et je vais ajouter quelques cours. OK. Je vais donc dire classe de deux textes pour Excel, police en gras ici. Sinon, je ne devrais pas avoir à utiliser Excel ici, parce que c'est un sous-texte, donc je vais juste avoir du texte, en cri, et au lieu de 800, je vais juste l'alimenter un peu Je dirais 600, un drap plus léger. Permettez-moi de me rafraîchir. Tu peux voir. Hello tailwind CSS est un exemple simple d' utilisation du CSS tailwind À quoi cela ressemble-t-il ? Tu sais ? Vous n'avez littéralement écrit aucune sorte de CSS ici. Pas de CSS. Vous venez d' ajouter cette balise de script, vous utilisez simplement des classes, et rien qu'en utilisant des classes, vous obtenez un résultat incroyable. OK ? C'est si beau que ça. D'accord, vous n'avez pas à vous concentrer sur l'écriture de CSS, vous devez simplement vous concentrer sur l'utilisation des bonnes classes, et c'est ce que Tailwind est fait pour vous Et avec le temps, je dois vous dire que cela peut sembler un peu difficile en ce moment, mais avec le temps, cela devient super facile et vous commencez à vous souvenir des cours. Par exemple, ce sont les classes pour les coins arrondis, donc vous vous en souvenez si vous les utilisez deux ou trois fois, vous savez ? On peut voir arrondi en entier, arrondi aucun. OK ? Il existe différents exemples arrondis R, LG, vous pouvez le voir. Vous pouvez voir comment il est appliqué. Il y a tellement d'exemples, et la documentation est également très bonne. OK ? J'espère donc que cela vous plaira et j'espère que vous aimerez cet exemple et les possibilités que vous pouvez exploiter avec cet incroyable framework. 4. React rencontre le vent de coupe : préparer votre premier projet comme un pro: Il est donc temps de commencer à discuter de la manière dont vous pouvez configurer votre projet React avec Tailwind ? Donc, ce que je vais faire, c'est ici, je suis sur le code Visual Studio, et je suis dans le répertoire racine du dossier où je construis tous les projets. D'accord ? Maintenant, dans ce répertoire racine, nous pouvons créer un autre projet dont j'ai déjà React Tailwind Il s'agit donc d'une commande que vous pouvez utiliser pour créer un nouveau projet React en utilisant at. Vous pouvez donc dire que les NPM créent du blé au plus tard. Cela vous posera quelques questions pour savoir si vous souhaitez savoir quel framework vous souhaitez utiliser ou quel modèle vous souhaitez utiliser. Toutes ces questions, comme le fait de sélectionner React, Vanilla Gs et tout ça. Et selon vos préférences, il créera un projet pour vous. J'ai déjà fait cette étape, donc je ne vais pas la refaire, mais je vais créer ce projet appelé React Tailwind Je vais passer à ce projet, puis je vais lancer le serveur. Je vais donc dire l'onglet NPM run ici. OK. Au moment où je l' exécuterai, vous verrez cette page par défaut ici. D'accord ? Maintenant, ce projet est créé, mais aucune configuration Tailwind n'est effectuée ici Maintenant, pour effectuer la configuration Tailwind, vous devez ajouter ou ajouter quelques fichiers de configuration ou je devrais dire un seul fichier de configuration, d'accord ? Et je vais vous montrer l'importance de ce fichier et aussi comment vous pouvez le créer. Alors maintenant, sur tailwind css.com, si vous commencez, vous serez redirigé vers ces stocks, et vous allez voir ici comment vous pouvez installer tailwind, comment vous pouvez installer tailwind Vous pouvez donc installer Tailwind de cette façon. D'accord, vous pouvez dire que NPM installe le trait d' union D tailwind CSS. Cela garantira donc que la dépendance est ajoutée à votre projet. Ensuite, vous devez également initialiser tailwind dans votre projet, ce qui signifie que vous devez exécuter cette commande NPH tailwind Css dedans, et cela générera ce fichier tailwind config point gs, qui ressemble à un fichier qui ressemble à un C'est donc quelque chose que nous devons faire. D'accord ? Ce que je vais faire, c'est copier les commandes une par une. Je vais venir ici, et je vais créer un nouvel ensemble de terminaux. OK. Encore une chose que je tiens à mentionner, c'est le contenu du fichier de configuration de tailwind. D'accord ? Tu peux voir que c'est à ça que ça ressemble, d'accord ? Vous pouvez étendre votre thème, le thème par défaut de Tailwind Si vous souhaitez ajouter des couleurs personnalisées ou une définition valide pour votre application, vous pouvez les définir ici. Les plugins que vous pouvez mentionner, d'accord ? Ensuite, vous devez ajouter ce morceau de code dans le fichier CSS principal ou dans le fichier CSS racine de votre projet, afin que votre projet prenne le relais D'accord ? Voici donc quelques-unes des étapes qui ont été données, et voici comment vous pouvez les utiliser pour vérifier si le vent arrière est correctement configuré D'accord ? Maintenant, en plus du vent arrière, d'accord, avant d'installer tailwind, je tiens à vous dire qu'il y a quelques éléments que nous devons également installer Donc c'est juste pour installer le vent arrière, d'accord ? Maintenant, vous verrez des onglets ici. En utilisant le CSS de publication. D'accord ? Nous allons donc suivre cette approche. D'accord ? Nous allons donc installer tailwind et nous allons également configurer le post-CSS Maintenant, Tailwind, bien sûr, nous savons que c'est comme un framework de force utilitaire pour CSS, d'accord ? Maintenant, qu'est-ce que le post-CSS, d'accord ? Post CSS est donc un outil de transformation du CSS avec le plugin Ja Script. D'accord, il s'agit essentiellement de traiter votre CSS et d'appliquer des transformations telles que des modifications, ajout du support pour les futures fonctionnalités CSS, les versions CSS, etc. D'accord ? C'est ce qu' il va faire, puis nous allons également utiliser le préfixeur automatique que vous pouvez voir ici Donc, cette commande dit : Installer le tiret D, le CSS tailwind, le post CSS et le préfixeur automatique Autoprefixor est donc un plugin qui ajoute automatiquement toute sorte de préfixes spécifiques au navigateur dans votre Par exemple, certains navigateurs ont besoin d'ajouter un kit de tirets Web pour être ajoutés, Et l'ajout de tirets webkit dans ce navigateur en particulier garantira Navigateurs Mozilla Firefox, Mozilla Firefox. Ils veulent ajouter un tiret d' orignal. Partout où c'est nécessaire, non ? Et c'est essentiellement pour avoir une meilleure compatibilité avec le navigateur. Les applications peuvent avoir une meilleure compatibilité. Tout cela est donc ajouté automatiquement, vous n'avez pas besoin de l'ajouter manuellement. D'accord ? Cela rend votre CSS beaucoup plus compatible et prêt pour la production. D'accord ? Je recommande donc d'ajouter ces deux éléments, d'accord. Et je pense que c'est ainsi que nous allons configurer Tailwind avec React D'accord ? Je vais donc suivre cette approche. Je vais simplement copier ces commandes. Je vais venir ici, d'accord ? Et je dirais CD. React Tailwind, je vais accéder au répertoire du projet. Je vais passer cette commande et appuyer sur Ender D'accord ? Maintenant, cela va fonctionner. D'accord, vous pouvez voir qu'il a ajouté des packages. Et si vous optez pour les colis, vous allez voir ici. Vous pouvez voir réagir. Je vais simplement le et le minimiser pour qu'il y ait une meilleure vue. Maintenant, je ne ferme pas la ligne de commande parce que nous allons en avoir besoin, mais vous pouvez voir ici Tailwind Post CSS et vous aurez également AutoPrefixor OK C'est fait. D'accord ? Maintenant, les packages ont été ajoutés, ce qui signifie que des dépendances existent. D'accord ? Maintenant, nous devons passer aux étapes suivantes comme initialiser tailwind, Et nous devons également initialiser le post-CSS. C'est donc quelque chose que je vais également faire. OK. Et cela va créer un fichier d'initialisation comme celui-ci, d'accord ? Et puis, voici le contenu ici. Il s'agit donc de la configuration JS de post CSS, vous pouvez le voir, et c' est de la configuration Tailwind D'accord ? Ensuite, nous l' ajouterons dans notre CSS racine. C'est ce que nous allons faire. Ensuite, nous allons tester des choses, d'accord ? Ce que je vais faire, c'est venir ici. Vous pouvez donc créer manuellement un point de conflit post-css. Vous pouvez le voir ici. Vous pouvez le créer manuellement ou ce que je vais faire, c'est que je le générerai automatiquement. Il y a donc une commande que nous devons connaître. Je vais donc dire N PX, tail wind CSS. Oups, tiret P. D'accord ? heure actuelle, si vous ouvrez la structure du projet, aucun fichier de conflit n'est défini, laissez-moi l'exécuter et voyons ce qui sera ajouté Vous pouvez donc voir que la configuration tailwind a été ajoutée et que la configuration CSS post a été ajoutée D'accord ? Vous pouvez également voir le résultat ici. Création du fichier de configuration tailwind et création du fichier de configuration post-CSS Il s'agit donc d'une commande NP x, du CSS tailwind dedans, un trait d'union P. D'accord ? avec du CSS tailwind dedans, un trait d'union P. D'accord ? Donc, si vous ouvrez ces fichiers, vous pouvez voir que c' est du post CSS, d'accord ? Et voici le fichier de configuration de tailwind. Tu peux voir les deux fichiers, d'accord ? Et le CSS de publication est ici, en gros. Cela utilise donc également le vent arrière et le préfixeur automatique Et voici le fichier de configuration de Tailwind. Maintenant, si vous ne savez toujours pas pourquoi nous avons ajouté le CSS de publication en premier lieu, d'accord, je voudrais répéter que le CSS de publication est un outil, accord, qui vous permet de tirer parti des plugins existants. D'accord ? Donc, comme son nom l'indique, post CSS. Donc, en gros, il fait le travail de post-traitement du CSS, d'accord ? Comme l'améliorer pour une compatibilité spécifique au navigateur et tout ça. Donc, en gros, si vous souhaitez ajouter des plugins dans votre application, vous devez utiliser le post-CSS. Vous pouvez voir ici, dans la configuration CSS de l'article, que nous avons ajouté le CSS tailwind, que nous avons configuré le CSS tailwind, et nous disons également que cela utilise le préfixeur que nous avons ajouté le CSS tailwind, que nous avons configuré le CSS tailwind, et nous disons également que cela utilise OK. Préfixeur automatique : il ajoutera balises CSS spécifiques au navigateur dans votre CSS D'accord ? C'est ce qu'il va faire. D'accord ? Donc oui, c' est ce que nous avons fait, et toutes les dépendances ont été ajoutées ici. OK. Le post CSS n'est donc qu'un outil qui vous permet de tirer parti des plugins existants. C'est ce que c'est. Vous ne pouvez donc pas ajouter de préfixeur automatique sans utiliser le CSS de publication, d'accord ? C'est donc quelque chose que nous faisons ici. D'accord ? Et j'espère que raisons pour lesquelles nous faisons ce que nous faisons ont maintenant un sens. Ce n'est donc qu'une configuration unique que vous devez faire, et plus tard, nous n'y toucherons pas, d'accord ? Donc, mais vous devez savoir pourquoi nous le faisons. D'accord ? C'est donc important. Maintenant, ce sont des choses que vous devez ajouter ici. D'accord ? Vous devez donc vous assurer que toutes les parties de tous les fichiers modèles sont, gros, comme indiqué ici. Ajoutez les parties à tous les fichiers modèles, comme tous les fichiers HTML, les fichiers JavaScript et les fichiers JSX Donc, si tu viens ici. OK. OK, donc ce n'est pas ajouté. OK, nous devons donc ajouter ça. Donc, ce que je vais faire, c'est copier ici. OK. Et je vais le coller ici, d'accord ? Et un t. OK. Maintenant, ce que je vais faire, c'est suivre cette quatrième étape. Je vais le copier , d'accord. Et revenons ici et là dans le CSS principal. Où se trouve donc le CSS principal. D'accord ? Nous allons donc aller dans le dossier SRC. Ici, nous avons le CSS app point, qui contient du CSS, puis nous avons le CSS index point, qui contient également du CSS. Je vais donc me débarrasser des deux car nous n'avons pas besoin des deux. Donc, app point CSS aussi. OK. Nous nous sommes donc débarrassés de tout. Maintenant, dans le point d'index CSS dans le fichier CSS racine, est donc utilisé point d' index CSS ici dans le point principal GSX Donc, ce que je vais faire, c'est dans Index point CSS, je vais ajouter ceci, d'accord ? Maintenant, c'est ajouté, d'accord ? Ensuite, ce que nous devons faire, c'est essentiellement tester le vent arrière, accord ? Je vais donc le copier. Et je vais en ajouter à mon projet. D'accord ? Mais avant d'ajouter quelque chose au projet, il suffit de voir une chose. Ici, nous supprimons le CSS, mais même après avoir configuré le vent arrière, d'accord, cela n'apporte pas d'effet de vent arrière, Et c'est quelque chose que je peux sentir. D'accord ? Et je sais quel est le problème. Ce que je vais faire, c'est arrêter le serveur. OK, arrêtez le serveur et je vais redémarrer pour récupérer les nouveaux fichiers de configuration. OK. Voyons si OK. Maintenant, vous pouvez voir que le vent arrière a été pris en compte ou que l'interface utilisateur a changé Le problème était dû au redémarrage. Nous avons donc créé de nouveaux fichiers de configuration qui sont récupérés lors du redémarrage. OK. De plus, une autre chose que je vais faire ici est que j'ai HTML GS. OK. J' ajouterai également GSX ici. D'accord ? Je vais donc également ajouter GSX, d'accord. Et TSX, pour dactylographié. OK. Et je vais voir si c'est le cas. OK, donc ça va être réglé. D'accord ? Ce que je vais faire , c'est fait. Maintenant, je vais copier cette pièce. OK. Venons ici. Et ici, je vais juste entrer, peut-être parler du point Aix ou du point d'application GSX App.j6 a ce code qui vous est rendu. OK. Je vais juste minimiser cela. Ce que je ferais, c'est sortir de tout ce TIF jusqu' ici, et je vais juste le reconstituer . Et je vais appuyer deux fois sur Tab, enregistrer ceci et tu pourras voir. Il indique un texte de trois Excel et une police de caractères en gras. Et soulignez ceci, d'accord ? Et vous pouvez voir une belle interface utilisateur entrer par ici, d'accord ? Et c'est un style qui utilise le vent arrière. D'accord ? Par exemple, nous n' avons pas fait grand-chose ici. D'accord, nous venons de copier le code, mais nous avons également écrit du CSS très simple. C'est pas si difficile. D'accord ? Nous pouvons même écrire du CSS par nous-mêmes. Donc, ce que je peux faire ici, c'est m'en débarrasser. OK. Et je peux écrire mon propre CSS. Je peux dire TiVo, par ici, et je dirais classe. Je vais créer une classe. OK, et je dirais que nom de la classe est BG Hyphen White Maintenant, vous pouvez voir toutes les suggestions de cours Tailwind ici Le code de Visual Studio me suggère donc toutes les classes Tailwind Ce sont toutes les classes favorables. Donc, au lieu de taper, je dois simplement dire BG gray, cela me donnera une suggestion et je pourrai simplement la sélectionner. OK. Et il me montrera également la couleur que je sélectionne. C'est donc pour le fond gris ici. Si vous n'êtes pas sûr de ce qu'est une classe en particulier, vous pouvez simplement la copier et venir ici et vous pouvez même effectuer une recherche ici. Si vous effectuez une recherche, vous verrez que c'est pour la couleur d'arrière-plan. Vous pouvez voir ici, fond noir, ardoise. Donc, au lieu de l'ardoise et du noir, nous utilisons du gris. Vous pouvez le voir ici. Si vous dites BG Indigo, 500, cela va vous donner des couleurs comme ça, quel est le CSS qu'il génère avec le recul ? Permettez-moi de vous le montrer également. Donc ici, il est écrit BG gray 100. Si je passe la souris dessus, vous verrez dans la fenêtre contextuelle de survol c'est le CSS qui est généré. Couleur de fond Il s'agit de la valeur RGB et de l'opacité d'un. Vous pouvez voir que c'est le CSS vers lequel cette classe se traduit. Maintenant, comment puis-je obtenir cette fonctionnalité de suggestion automatique, tout d'abord, pour les classes, pour l' aperçu ici, et aussi pour le CSS sélectionné ? Je vais donc vous dire qu'il existe un plugin intéressant que vous pouvez installer sur le code Visual Studio chaque fois que vous travaillez avec Tail Went. Je recommande vivement ce plugin. Donc, ici, j'ai installé pas mal de plugins, d'accord. Permettez-moi donc de développer cela. D'accord ? Le plug en est une partie. Comme vous pouvez le constater, il existe de nombreux plugins pour Angular. La balise de renommage automatique en est une, colorisation des paires de crochets en est une que j'utilise ES sept. C'est pour générer des extraits de code Donc, si vous souhaitez générer des extraits de code tels que du code de composants, du code standard, tout ce que vous pouvez faire Si vous faites défiler l'écran vers le bas, il existe un plugin intellisens appelé Intellisence D'accord ? C'est où ? Je ne vois pas Preteer est également utile ici. OK. Je n'arrive pas à le trouver ici. Live Server est également très bon. OK. Oh, ici, Tailwind CSS Intellisence. C'est donc quelque chose que vous devez installer, vous devez donc rechercher le CSS tailwind ici Ou sur le marché des plugins, et vous tomberez sur ce plugin tailwind CSS OK. Je vous encourage vivement à l'installer, car vous pouvez le voir ici dans la capture d'écran elle-même, dans la capture d'écran ici. Il vous montre la suggestion automatique. C'est donc utile. C'est vraiment utile. Il vous donne des suggestions automatiques, et en gros, il y a tellement de noms de classes. Cela vous aidera également à prévisualiser. Il est donc très utile de le brancher lorsque vous travaillez avec Tailwind Parce qu'il y a tellement de cours. Bien sûr, vous finirez par apprendre les noms de classe au fil du temps, mais cela permet d'accélérer les choses. Maintenant, si je veux ajouter du rembourrage, je peux dire P tiret huit Et vous pouvez voir qu'il génère ce CSS pour moi, en ajoutant deux RM, n'est-ce pas ? Donc je sais, d'accord, c' est en cours d'application. Si je ne veux pas deux REM rembourrés, je peux en faire quatre ici Je peux en faire cinq. OK. Donc je peux en faire six. Vous pouvez voir qu'un rembourrage de 1,5 est devenu un rembourrage de huit. OK. Donc, sur cette base, vous pouvez faire des choses, accord, avec le trait d'union arrondi LG, et vous pouvez dire Shadow Shadow of G ici, vous pouvez voir que c'est le CSS qui est généré OK ? Donc tout cela, vous pouvez absolument le faire. OK ? J'ajoute donc PG. Au lieu de BG Gray, je vais m' en tenir à BG White ici. Nous verrons à quoi cela ressemble BG White. Ajout de huit LG arrondis, Shadow LG. OK, je vais ajouter un autre div en haut, en haut, en gros. Alors voilà, je vais couper cette plongée et je viendrai ici. OK. Et je vais juste le mettre en retrait. D'accord ? C'est donc chose faite. Et je dirais ici au lieu de BG white, je dirais gris. OK, libre de 100. Je dirais Flex. OK, justifiez le centre. OK, et le centre des objets aussi, quelque chose comme ça. Et écran horizontal. OK. Donc c'est fait, d'accord ? J'ai quelques conseils. Maintenant, je vais ajouter H un ici. Je vais ajouter un H. OK. Et dans H one, je vais dire bonjour. Et Tail Wind CSS dans React, quelque chose comme ça. OK. Et vous pouvez simplement ajouter les classes ici, donc vous pouvez dire Oops, donc je peux dire le nom de la classe Et vous pouvez utiliser un trait d'union pour Excel et une police de caractères en gras OK. Et vous pouvez dire «   let's keep it 800 » en gris gris. OK. Et oui, c'est fait. Nous devrions donc avoir une interface décente ici, si vous voyez. Vous pouvez donc voir, Hello tailwind CSS dans React. C'est assez juste. Vous pouvez également ajouter un sous-texte, nous allons donc en ajouter un ici. Je vais dire Ptag ici, quelque chose comme ça. Et je dirais que c'est un exemple simple utilisant Tail Wind, CSS dans un projet React. Quelque chose comme ça. Si je sauvegarde ceci, vous verrez le résultat ici, mais celui-ci n'est pas stylé J'ajouterai donc quelques noms de classes ici pour que le résultat soit plutôt correct Je dirais Text Grey. D'accord ? Le texte est gris de « let me make it lighter de 600 et vous pouvez voir qu'il est maintenant plus clair. OK. Vous pouvez donc voir que c'est ce que c'est. Si vous passez en mode plein écran, vous le verrez au centre. Et je suis légèrement zoomé de 200. Il s'agit donc de la vue réelle à cent pour cent, comme dans la vue normale. OK. Si je zoome, je vais voir ça beaucoup plus rapidement. OK ? Voici donc comment vous pouvez configurer, vous savez, intégrer le CSS à votre projet Et cela rend la vie beaucoup plus efficace et facile, comme vous pouvez l'imaginer, n'est-ce pas ? J'espère donc que cela vous a plu et trouvé utile. Je vais voir tout cela. 5. Au-delà des bases : maîtriser le design réactif et les thèmes personnalisés dans React avec Tailwind: Aujourd'hui, chaque fois que vous créez une application Web, design réactif est vraiment très important. Étant donné que de nombreuses personnes optent pour écrans plus petits, tels que les tablettes et les téléphones portables, il est probable que votre application soit également utilisée sur des écrans de plus petite taille. Et il est très important que vous sachiez comment créer votre application pour différentes tailles d'écran. Heureusement, avec Tailwind, c'est vraiment très simple si vous comprenez ce que vous devez faire Je vais donc vous donner un aperçu de la façon dont tailwind vous permet de créer des composants adaptés aux mobiles, non seulement adaptés aux mobiles mais également adaptés différentes tailles d'écran, comme les tablettes Nous allons donc passer à Get Started, et ici, dans Get Started, sur le côté gauche, vous verrez ce design adaptatif. Et vous pouvez même rechercher un design réactif ici, d'accord ? Je vais donc passer au responsive design ici, d'accord ? Et c'est là que nous apprenons comment tailwind vous permet d' écrire des composants ou de créer composants compatibles avec différentes tailles d'écran, d'accord ? Maintenant, lorsque nous parlons de conceptions réactives dans Tailwind, chaque classe qui existe dans Tailwind a été ou peut être appliquée de manière conditionnelle pour D'accord ? Maintenant, qu'est-ce qu'un point d'arrêt ? D'accord ? Désormais, les points d'arrêt sont des largeurs d'écran spécifiques où la mise en page ou le style de la page Web changent pour garantir que le contenu s'affiche correctement sur différentes tailles d'écran ou sur différents appareils D'accord ? Ils sont donc comme une règle qui décide de la manière dont votre design s'adaptera aux différentes tailles d'écran. Permettez-moi de vous donner un exemple. Vous pouvez donc voir ici que ce sont tous les points de rupture, d'accord ? Il s'agit de tous les points d'arrêt par défaut. Et ce sont cinq qui existent par défaut dans le vent arrière. Donc, lorsque vous dites SM, vous dites essentiellement que la largeur minimale de l' écran doit être de 640 pixels. D'accord ? Lorsque vous dites MD, vous dites que la largeur minimale doit être de 768 pixels. Pour LG, la largeur minimale est de 1024. Pour Excel, c'est 1280. Pour deux Excel, c'est 1536 pixels. Et voici le CSS correspondant, d'accord ? Ceci est donc défini par défaut. Maintenant, si vous souhaitez ajouter une classe ou si vous souhaitez ajouter un type spécifique d'élément de design ou une sorte de CSS à certaines tailles d'écran, vous devez utiliser ces points d' arrêt comme préfixe. Vous pouvez donc voir ici. Ici, il y a un exemple de balise image, et vous dites une largeur d'image de 16. D'accord ? La largeur de 16 est donc la largeur par défaut. Maintenant, lorsque vous dites 32 points MD, largeur 32, comme W 32, 32 seront la largeur sur les écrans moyens, o et 48 sur les grands écrans. D'accord. Un écran plus grand signifie donc 1024 pixels et plus. Les écrans de taille moyenne signifient 768 pixels et plus. OK, c'est ainsi que cela est géré. Ce préfixe MD et LG garantit donc qu'en fonction définition du point d'arrêt existante, d' accord, ces CSS sont appliqués manière conditionnelle en fonction de la taille de l'appareil Et oui, avant cela, avant d'utiliser tout cela, vous devez vous assurer d'avoir ajouté une balise méta view pot dans le document principal. D'accord ? Dans le titre de votre document, je suis désolée. Donc, en gros, si vous venez ici dans notre application, d'accord ? Et si vous voulez indexer le HTML par points, vous devez avoir cette fenêtre ici, qui est présente par défaut D'accord ? Mais si quelque chose ne fonctionne pas, tu peux le vérifier, d'accord ? Mais cela doit être présent. Et c'est ainsi que cela fonctionne. J'espère donc que cela a du sens, d'accord ? Et cela fonctionne pour toutes les classes utilitaires du framework. Il existe donc des classes définies directement dans Tailwind. Ce sont tous les cours. C'est vrai. Et vous pouvez utiliser ce préfixe ou ces points d'arrêt avec n'importe quel type de classe Tu peux voir. C' est ce que cela signifie. D'accord ? Vous pouvez donc modifier littéralement n'importe quoi à un point d'arrêt donné, y compris des éléments tels que l' espacement des lettres ou le style du curseur D'accord ? Maintenant, voici un exemple qu'ils ont essentiellement donné. D'accord, vous pouvez modifier la taille de l'écran, vous pouvez voir comment cela change. Cela utilise donc complètement le vent arrière, vous pouvez voir comment cela change Et ici, vous avez aussi essentiellement le CSS. Tu peux voir. Ainsi, par défaut, le tif externe est un bloc d'affichage, mais en ajoutant MD flex, il devient display flex sur les écrans de taille moyenne et plus grande. Donc, si la taille de l'écran devient moyenne ou plus grande, elle devient flexible, vous pouvez le voir, n'est-ce pas ? C'est donc ainsi qu'il contrôle. Vous pouvez voir que le film rétractable est également ajouté. D'accord. Donc, pour éviter le rétrécissement sur les écrans de taille moyenne et plus grande, vous avez utilisé le MD Shrink of Zero. D'accord. Donc oui, c'est ce qu'il y a ici. Maintenant, vous pouvez voir, d'accord, tailwind utilise le premier système de point d'arrêt mobile, ce qui signifie que vous pouvez le faire, de la même manière que ce qui pourrait être utilisé sur d'autres frameworks comme D'accord. Ce que cela signifie comme des utilitaires non préfixés Donc, si vous utilisez des majuscules. D'accord, cela prendra effet sur toutes les tailles d'écran lorsqu'elles seront préfixées. Donc, si vous préfixez les majuscules avec MD, cela n'aura lieu qu' à un point d'arrêt spécifié Maintenant, pour MD, qu' est-ce qu'un point d'arrêt ? Pour MD, le point d'arrêt est de 768 pixels et plus. D'accord ? Donc ça va avoir lieu ou ça va être appliqué. Si vous utilisez des points MD MD par cas, cela ne sera appliqué qu' au-dessus de ces tailles d'écran et au-delà, d'accord ? Donc ici, vous pouvez voir, vous pouvez voir ici, centre de texte SM de la classe div. Cela ne sera donc centré que sur les écrans supérieurs à 640 pixels et plus, non sur les petits écrans. D'accord ? Maintenant, au centre du texte, cela permet de centrer le texte sur le mobile et l'aligner à gauche sur des écrans de 640 pixels ou plus. OK, donc c'est comme ça que tu peux t'en servir, tu peux tout parcourir . D'accord ? Maintenant, ce qui est étonnant, c' est que vous pouvez également personnaliser vos points d'arrêt OK, donc je vous l'ai dit, c'est ce que propose Tailwind par défaut Ce que fournit tailwind par défaut. Maintenant, disons que pour mon application, je vais définir une taille différente pour MD, LG, et que je souhaite avoir ma propre personnalisation. Vous pouvez donc personnaliser, si vous faites défiler la page vers le bas, vous pouvez le personnaliser, afin que vous puissiez avoir un sous-thème dans Tailwind Conflict a. Vous pouvez avoir des écrans, et vous pouvez définir vos propres définitions d'écran ici. D'accord. Vous pouvez le définir comme vous le souhaitez. La tablette fait donc 640 pixels. L'ordinateur portable mesure 1024 pixels, bureau 1280 pixels. D'accord ? Et il existe un document supplémentaire pour personnaliser les points d'arrêt Vous pouvez donc voir ici comment personnaliser les écrans. D'accord. Vous pouvez même personnaliser les paramètres par défaut Vous pouvez ajouter que ce sont les valeurs par défaut. Il s'agit des points d'arrêt par défaut qui sont ajoutés. Vous pouvez les personnaliser si vous en avez besoin. D'accord ? Vous pouvez ignorer un seul écran. Ainsi, par exemple, si vous souhaitez remplacer LG, le point d'arrêt pour les grands écrans, vous pouvez le faire simplement en spécifiant Vous pouvez ajouter de nouveaux points d'arrêt, comme trois Excel. Il entre donc dans deux Excel. Mais si vous souhaitez ajouter trois Excel, vous pouvez le faire. D'accord ? Tout cela est personnalisable. Cela dépend entièrement de vous et vous pouvez alors en faire usage de cette façon. Quel que soit le nom que vous avez donné sur votre tablette, vous pouvez l'utiliser de cette façon. C'est donc incroyable. D'accord ? Il suffit de passer par ça, de passer par cette excuse arbitraire, pas arbitraire. Parcourez simplement cette documentation ici, et vous en apprendrez un peu plus à ce sujet. Nous allons également mettre cela en pratique. Donc, ce que je vais faire, c'est passer à ma base de code. OK, ce que nous allons faire, c'est voir comment nous pouvons réellement personnaliser ou comment nous pouvons réellement créer des designs réactifs. C'est ce que nous allons apprendre ici. D'accord. Donc, tout d'abord, ce que je vais faire, c'est fermer ça. Je vais entrer dans App point Jex. Ici, je n'ai rien. Je vais ajouter Dev ici, quelque chose comme ça. D'accord. Le DV est donc ajouté Je vais dire le nom de la classe. Oups, nom de la classe. Je vais dire PG ou voiture de 100. D'accord ? Et je vais dire P tiret 4 D'accord. C'est donc quelque chose que je vais faire, et je vais ajouter une liste ici. Ajoutons donc une liste et voyons comment vous pouvez rendre ces éléments de liste réactifs. D'accord ? Je vais donc dire le nom de la classe. Oups, le nom de la classe sous forme de liste aucun. OK, donc je vais dire liste. Il n'y en a pas ici, tu peux le voir. D'accord. Et je vais ajouter les éléments de la liste, donc je vais dire LI ici. Je vais dire le premier point. OK, point 1. Je vais le copier. D'accord. Je dirais de copier le premier, le deuxième et le troisième, en gros, je vais ajouter. OK, il y en aura donc deux, et ce sera trois. Maintenant, si je sauvegarde ceci, vous verrez les points un, deux, trois. Si je supprime cette classe, vous verrez les éléments un, deux, trois être ajoutés. Vous voyez une couleur d' arrière-plan claire à cause du CSS que j'ai appliqué en haut. D'accord. Ce sont donc des éléments de liste. Si vous ajoutez une liste de noms de classe none, elle sera convertie en quelque chose sans liste. Maintenant, ce que je vais faire, c'est ajouter du CSS ici. Je vais dire le nom de la classe. Je vais dire BG Blue ici. D'accord. Je peux dire BG Blue de 500. Je peux dire « texte blanc ». Et je peux dire P deux, rembourrage deux, et je dirais LG arrondi, quelque chose comme ça OK, vous pouvez voir que le premier a été converti en bouton. D'accord. Je vais copier le CSS, et je vais l'appliquer aux trois ici. Je vais donc l'ajouter ici, et je vais l'ajouter ici. D'accord. Maintenant, je vais vous montrer un problème. Donc, si je passe sur un écran plus grand comme celui-ci, cela gaspille inutilement le côté droit, n'est-ce Cela gaspille inutilement le côté droit de l'écran parce que ce bouton est juste en train de s' étirer comme ça. Ce n'est pas bon Donc, sur un écran plus grand, je veux les empiler horizontalement D'accord. Et sur un petit écran, ça a l'air bien. Sur un écran plus petit, il doit être vertical. C'est très bien D'accord. Je peux donc également ajouter de la marge ici. D'accord ? Je peux dire une marge de deux, comme ça. D'accord. Une marge de deux, c'est mieux, mon avis. Permettez-moi d'ajouter cela. D'accord. Oui, marge de deux. Maintenant, il est empilé verticalement Il est à nouveau empilé verticalement sur un écran plus ou moins grand. Cette mise en page est bonne, mais elle convient aux appareils mobiles, je dirais, mais le gaspillage est un espace horizontal sur les grands écrans, ce qui ne permet pas d'utiliser efficacement l'espace disponible sur les écrans, n'est-ce pas ? C'est un problème, tu comprends. Donc, ce que je vais faire, c'est ajouter du CSS ici. D'accord ? Donc, tout d'abord, ce que je ferais, c'est de venir ici et d'ajouter quelques cours. Je vais dire MD. D'accord ? Donc, pour les appareils de taille moyenne, OK, les appareils moyens et plus grands, je dirais deux points, pixels Px sur quatre D'accord. Et oui, je vais ajouter une chose. Et en haut, lorsque nous spécifierons le type de liste « none », je vais dire MD, ClinoopsFlex Je vais le remplacer par flex. En gros, la boîte flexible ou une boîte flexible horizontale sur écran de taille moyenne ou un écran plus grand. D'accord ? Et je dirais MD de Cap of Four. Fondamentalement, ces deux classes sont appliquées sur des écrans de plus grande taille. Vous pouvez donc voir sur un petit écran rien ne change , n'est-ce pas ? Mais laissez-nous faire traîner les choses. D'accord, vous pouvez voir maintenant que le petit est passé du plus petit au plus grand. Vous pouvez voir tout à l'heure que cela ne se produisait pas. D'accord ? Vous voyez donc un écart ici, écart entre les boutons parce que j'ai ajouté cet écart de quatre. Si je m'en débarrasse, vous verrez que l'écart est réduit. Si vous ajoutez MD Gap Four, cela va se produire. D'accord ? Donc, pour une certaine taille d'écran, cela apparaît. Et c'est joli, vous pouvez le voir et sur un écran plus grand, c'est vrai. Donc, si vous consultez le site Web, la même application sur ordinateur, elle apparaît empilée horizontalement Mais sur un écran plus petit, il est empilé verticalement C'est le rythme ici. D'accord ? Donc, pour résumer, ce que nous faisons ici, c'est convertir la liste non ordonnée en une case à taches horizontale sur un écran de taille moyenne, d' accord, ou plus une case à taches horizontale sur un écran de taille moyenne, d' accord, ou Et c'est ce que nous faisons avec l'aide de MD Colon. D'accord ? C'est un point d'arrêt défini dans le CSS tailwind, et nous en faisons usage, d'accord ? J'espère donc que vous avez pu me suivre, et j'espère que vous avez une bonne idée de la façon dont cela fonctionne. Maintenant, je vais vous montrer une dernière chose. Je vais vous montrer comment configurer ou ajouter une sorte de thème personnalisé à votre environnement. Supposons que je travaille pour une grande entreprise et qu'il existe un schéma de couleurs prédéfini que je souhaite que mon application reflète. OK, donc je peux m'en servir. D'accord, et il n'y a aucun mal à le personnaliser. Je peux donc accéder à la palette de couleurs, d'accord, en ligne. OK, et vous pouvez voir ici , voici la palette de couleurs. Disons que je vais choisir ce type de bleu ici. D'accord ? Et je vais venir ici pour préparer le CSS Ce que je peux faire ici en extension, avoir des couleurs, comme ça. D'accord. Je vais dire Colin, quelque chose comme ça. OK, à la virgule ici. Et ici, je dirais, euh, Custom Blue. C'est mon bleu. D'accord. C'est ce que je précise, je vais dire Colin et j'ajouterai ceci quelque chose comme ça. Il s'agit d'un bleu personnalisé. Et maintenant, au lieu du bleu ici, j'utilise du bleu, du bleu normal, non ? Donc ce que je vais faire, c'est venir ici. Au lieu de BG Blue, 500, je peux utiliser du bleu personnalisé ici. Je dirais du bleu personnalisé. Vous pouvez voir que BG Custom Blue a été suggéré. Je peux voir si c'est le cas. OK, ça n'a pas l'air si cool que ça. D'accord. Je dois probablement redémarrer car je crois que j'ai modifié la configuration et qu'elle n'est pas prise en compte. Alors laissez-moi redémarrer et rafraîchir, d'accord. Donc, un problème que je vois ici, la raison pour laquelle cela n' est pas appliqué est que j'ai oublié le hachage ici OK, donc les codes couleurs devraient commencer par le hachage. Et dès que vous l'aurez sauvegardé, vous le verrez ici. D'accord ? Il n'est donc pas nécessaire de redémarrer. Dès que vous modifiez une configuration ici, cela applique la mode pita Et vous pouvez voir que c' est un bleu différent de celui que nous avions au départ. Je peux donc ajouter mon propre thème personnalisé ici, sans aucun problème. Et je peux m'en servir ici comme je le souhaite. Vous pouvez voir que la couleur arrive également. Il me suggère également automatiquement à partir de ce plugin que j' utilise l'Intellisense C'est tellement incroyable qu' il le récupère dans le fichier de configuration et qu'il me le montre. Il sait que j'ai configuré une couleur personnalisée ici. Si je l'enregistre, vous pouvez voir la couleur changer. Maintenant, c'est un bleu personnalisé que j'ai et non un bleu préexistant. De cette façon, vous pouvez personnaliser littéralement beaucoup de choses ici. Vous pouvez créer votre propre thème ici, d'accord ? Et vous pouvez définir vos propres polices, votre propre thème, et vous pouvez les utiliser partout dans l'application sans hésitation. Bien sûr, il existe une très bonne bibliothèque par défaut. Mais lorsque vous travaillez sur une application destinée à la production, il est courant que les entreprises souhaitent utiliser un certain ensemble de couleurs et qu'elles souhaitent refléter couleurs de leur marque dans l'application. Et ces couleurs de marque peuvent ne pas être présentes par défaut, et vous voudrez peut-être les ajouter ici. Voici donc comment vous l' ajouteriez et cela peut être utilisé dans l'ensemble du projet. J'espère que cela vous a été utile et j'espère que vous l'aimez. 6. PROJET : créer une grille de cartes dynamique avec des filtres en utilisant React et Tailwind CSS: Désormais, implémentant le mode sombre, mode clair est l'une des fonctionnalités communes des applications Web modernes d'aujourd'hui. Si vous travaillez sur une configuration de création en production, il est fort probable que votre patron vous demande d'ajouter cette fonctionnalité dans l'application existante les utilisateurs. Il s'agit d'une fonctionnalité étonnante qui permet à l'utilisateur de changer de thème en fonction de ses préférences. C'est exactement ce que je vais vous montrer dans cette vidéo dans laquelle nous allons créer un petit projet que vous voyez à l'écran, qui nous aidera à basculer entre le mode sombre et le mode clair Voici donc l'application. Il n'y a pas vraiment de design. C'est assez simple. J'ai ajouté du texte ici à dessein pour que vous puissiez voir comment la couleur du texte change en fonction du thème, et j'ai un élément de motif Vous pouvez maintenant désactiver le mode sombre ici. Vous pouvez voir le mode d'éclairage la couleur du texte passe au noir et l' arrière-plan est blanc. Vous pouvez activer le mode sombre. Donc, désactivez nm, vous pouvez basculer entre ces deux modes. Et cette préférence est essentiellement stockée localement. Vous pouvez l'actualiser et vous resterez en mode sombre. Si vous activez le mode sombre, ou si vous désactivez le mode sombre, et si vous actualisez, vous resterez en mode clair, car c'est une préférence que vous avez sélectionnée. D'accord. Les préférences sont donc également stockées dans le navigateur de l'utilisateur à l'aide du stockage local, et je vais vous montrer exactement comment et je vais vous montrer exactement comment procéder. Maintenant, pour implémenter la même documentation CSS Head Over to Tail Wind, faire une recherche rapide ici et rechercher le mode sombre. D'accord ? Maintenant, comment en venir à la documentation, je vais vous le montrer. Donc, sur le site Web, vous pouvez venir ici et dire « commencez » ou vous pouvez également effectuer une recherche ici. Vous pouvez dire mode sombre ici, et vous viendrez ici. D'accord. Vous serez donc étonné de voir qu'il prend en charge par défaut le mode sombre. D'accord ? Donc, il est dit que Tailwind vous permet d' utiliser cette fonctionnalité, et comment vous pouvez le faire, c'est de l'activer comme ça Vous pouvez dire «   mode sombre », « mode clair ». Donc, il vous permet essentiellement d' inclure une variante sombre. Il est donc indiqué que Tailwind inclut une variante foncée qui vous permet de personnaliser votre vision lorsqu' elle est activée Vous pouvez donc ajouter deux points foncés et le jeu de couleurs ou le style que vous souhaitez avoir lorsque le mode sombre est activé. Vous pouvez donc le faire ici. Tu peux dire noir. Donc, en mode sombre, je veux avoir un arrière-plan sous forme d'ardoise. D'accord. Et en mode sombre, je veux que le texte soit blanc. La couleur du texte doit également être la suivante. D'accord ? C'est quelque chose que vous pouvez définir. Et puis dans Tailwind CSS, ce que vous pouvez faire, c'est, désolé, pas Tailwind Dans le fichier de configuration, vous pouvez apporter une petite modification au fichier de configuration Donc, dans le fichier de conflit, il suffit d' ajouter ce mode sombre, refroidissement et ce sélecteur Maintenant, le sélecteur sera une classe ici dans notre cas. Je vais vous montrer comment vous pouvez implémenter cela. D'accord. Et chaque fois que vous dites classe, d'accord, cela bascule essentiellement sur la base du CSS que vous avez appliqué Permettez-moi donc de l'implémenter et de vous le montrer, mais c'est une documentation que je voulais mettre en évidence. D'accord ? Vous pouvez le voir ici. Le code complet est donné ici, d'accord ? Tu peux juste y jeter un œil. D'accord. Je vais juste passer ici à l'IDE. Il n'y a littéralement aucun code ajouté pour le moment. Nous allons donc commencer à écrire du code qui nous aidera à implémenter. D'accord ? Donc, ce que je vais faire, c'est ici, tout d' abord, dans Dev, je vais dire le nom de la classe. D'accord. Je vais ajouter quelques cours. Je dirais un rembourrage de quatre. OK, BG of White. Il s'agit donc d'un arrière-plan par défaut. D'accord. Et je vais ajouter un écran H minimum. D'accord. Oups. Quelque chose comme ça. D'accord. Et ici, je vais dire chacune d'elles, d'accord ? Et là, je vais vous dire : bienvenue sur Talk. Mode. Appli quelque chose comme ça. D'accord. Et ici, je peux dire que nom de la classe est text, Iphone to Excel. D'accord ? Vous pouvez voir l'application Welcome to Dark Mode. D'accord. Et je vais le faire, j'ajoute du PTAC, et je dirais que c' est un exemple d' implémentation du mode sombre en utilisant CSS. D'accord. Vous pouvez donc voir que cela est arrivé. D'accord ? Maintenant, ce que nous allons faire, c'est ajouter un composant qui nous permettra de basculer ici D'accord. Je vais donc dire ici que je vais appeler cela le basculement du mode tar Ce composant n'existe pas, mais nous pouvons d'abord le créer. C'est quelque chose que je peux faire. Je peux dire mode sombre, bascule, sexe ici, et je peux dire const En gros, ce composant aura toute la logique. Je peux donc dire fonction const, mode sombre, bascule, quelque chose comme ça, et je vais avoir Je vais utiliser les fonctions de flèche ici. Maintenant, d'accord. Je vais juste OK, oui, je pense, OK, j'ai fait une erreur de syntaxe ici. Je vais juste m'en débarrasser. D'accord. Donc oui, ça va. Et maintenant, je vais dire export, default, talk more toggle, quelque chose comme ça OK, et je vais le faire importer ici. Je vais le dire, plus de bascule. Comme ça. D'accord. Maintenant, je vais commencer à ajouter du code ici. Donc ce que nous allons faire, c'est ici, je vais ajouter un bouton. D'accord. Donc, tout d'abord, je vais dire « retour », d'accord ? Revenez ici et ici. Je vais dire « retourner un bouton ». Nous avons donc besoin d'un bouton qui va contrôler le bouton pour cela D'accord ? Le bouton va donc devenir noir. Il s'agit donc d'un texte. Je vais modifier ce texte, mais pour instant, gardons-le. D'accord. Je vais d'abord voir le nom de la classe. OK, nom du cours. Je vais prendre cette nouvelle ligne. D'accord. Maintenant, quel est le nom de classe que je souhaite spécifier ? Je dirais P deux, PT de gris 200. OK, gris de 200, et je dirais que le texte d'un écran de texte gris est de 800 lettres C, et je pense que c'est ça, je crois, rond. Je vais en ajouter un ici. OK, c'est donc le bouton que nous avons. OK, rien ne se passe encore au clic, mais je vais ajouter Lesner Donc, au clic, nous devons définir le mode thêta, l' activer et le désactiver, en gros D'accord. Et pour cela, je vais utiliser l'état E. Je vais avoir besoin d'un état ici dans la fonction. OK, donc je vais dire const, o et je vais dire est le mode TAC, et je vais dire set est le mode TAC Donc c'est OK, c'est la fonction, désolé, pas la fonction. C'est l'État. Je vais dire Use State. Et je vais dire ici. Nous allons donc utiliser le stockage local, d'accord ? Donc je dis ici. Ou quelque chose comme ça. D'accord. Supposons donc que dans l'état américain, j'ajouterai une fonction flèche. Et ici, je vais dire « retour ». OK, stockage local, point, Get item. J'utilise donc le stockage local, et c'est la clé ici. Donc, quel thème l'utilisateur a appliqué, c'est ce que j' obtiens du stockage local. OK Et je dirais que c'est égal à l'obscurité. Donc, si c'est sombre, ce sera vrai, sinon ce sera faux et je peux vraiment aimer avoir ça sous forme de chaîne. D'accord ? Et je vais faire une comparaison stricte. D'accord. Donc c'est fait, d'accord ? Nous avons un état maintenant, et ce que je vais faire ici, c'est cliquer , donc quand l'utilisateur clique, je vais dire ici, comme ça. D'accord. Et voilà, permettez-moi de supprimer ceci. Je dirais que le set est en mode sombre. Et je vais inverser tout ce qui se trouve en mode Stark. D'accord ? Cela permettra donc de s'assurer que la valeur s' inverse toujours lorsque vous cliquez Il bascule donc toujours lorsque vous cliquez dessus. C'est ce que cela va garantir. Maintenant, ce que je vais faire, c'est avoir un crochet d'effet E use ici. D'accord ? Maintenant, comme je l'ai dit, tout cela est contrôlé par cette sélection ici. Cette variante sombre. Ce que je veux dire, c'est que Je dois donc ajouter la variante foncée partout. D'accord ? Donc, ce que je vais faire, c'est la première chose à faire. Je vais l'ajouter au bouton lui-même. Je vais donc venir ici. Et ici, sur le bouton, je vais dire ici, noir c'est le noir, Colin , BG, le gris, et j'ai G gris, disons 900, plutôt foncé. Et puis je pourrai avoir le noir. J'ai aussi besoin d'un texto. Le texte est du texte blanc, quelque chose comme ça. C'est chose faite. Maintenant, au clic, si cela change, nous devons utiliser l'effet d'utilisation. Je vais donc utiliser le hook use effect ici. Permettez-moi de développer un peu cela, utilisez l'effet. Maintenant, que faisons-nous en cas d'utilisation ? Je vais inverser cette valeur en fonction du changement de valeur en mode sombre. Quelle est donc la syntaxe de l'effet d'utilisation ? Nous allons avoir quelque chose comme ça. Nous avons une fonction, syntaxe et un tableau de dépendances. Maintenant, tableau d'indépendance, ce dont nous avons besoin, c'est du mode sombre. Ainsi, lorsque cette valeur change, vous exécuterez cet effet d'utilisation. Maintenant, à l'intérieur de tout cela, nous devons avoir la logique. D'accord ? Je vais donc dire document, point, élément de document, liste de classes de points. D'accord. Je vais donc ajouter cette classe appelée TAC Je vais dire tot, ajouter parce que le noir est la variante, non ? Je vais donc dire ici, TAC quelque chose comme ça. Donc, ce qu'il fera, c'est qu'il ajoutera la variante sombre partout. D'accord. Et je mettrai également à jour le stockage local. Je dirais stockage local, élément défini par points. D'accord. Je vais dire équipe Je vais donc inverser leur valeur. Je vais dire quelque chose comme ça à Tak. D'accord ? Débarrasse-toi de ça. D'accord ? C'est donc chose faite. C'est bon, nous devons le faire, nous devons exécuter de manière conditionnelle, nous devons donc dire s'il s'agit du mode sombre C'est le mode sombre, quelque chose comme ça. Alors laisse-moi. Si le mode sombre est vrai, c'est ce que nous faisons. Je dois gérer le bloc Else. Je vais le copier. Je vais voir autre chose ici et je vais m'en occuper. Maintenant, si c'est le cas, je dirais liste de classes, point, suppression d' éléments de document, liste de classes point, point, suppression du noir ici. OK, cela ajoutera du noir et supprimera le noir. Et ici, je vais dire léger. J'espère que cela a du sens. Maintenant, testons cela. Voyons comment cela fonctionne. Laisse-moi résumer ça, tu vois. Oups, ça ne marchera pas. Cela ne fonctionnera donc pas car je ai pas ajouté à ma configuration. Il faut que j'aille ici. Je vais venir ici. Je dirais le mode sombre, le verre à deux points. D'accord. Laisse-moi voir. OK, la portée n'est pas valide, elle indique : OK, il y a un problème et le problème vient probablement de la syntaxe. OK, donc ce serait dans un seul code. Et maintenant, si vous voyez, vous pouvez voir que cela change. Donc, ce qui se passe dépend la valeur de is dark mode, la classe est appliquée et supprimée. Oui, vous pouvez voir cette classe dans toute la liste des classes, noir est appliqué et supprimé. Tout dépend de la valeur ici. Et qu'est-ce qu'il y a de noir ? C'est sombre. D'accord ? Maintenant, ce que nous pouvons faire, c'est appliquer cela partout. Nous pouvons également l'appliquer dans app point JSX. D'accord. Ce que je vais faire, c'est dans app.j6, j'ajouterai un arrière-plan D'accord. Donc, ici dans DIV, ici dans Dev, je peux dire « noir », « OK, noir » de Colin. Je peux dire gris PG BG gris de disons 900, un peu foncé. Je dirais que le noir est un texte blanc. Du texte blanc, quelque chose comme ça. D'accord. Je l'ai fait et maintenant voyons le mode sombre, vous pouvez voir, il bascule maintenant, n'est-ce C'est donc ce que nous avons construit. Et si vous venez ici, si vous la voyez en plein écran, ce qu'est l'application . Tu peux voir. Même si vous actualisez, car nous utilisons le stockage local. Je vais maintenant vous montrer comment il est stocké dans le stockage local. Bonne inspection, cliquez avec le bouton droit de la souris sur Inspecter, accédez à l'application et rendez-vous ici dans le stockage local. Donc, si je fais un petit zoom arrière ici dans le stockage local, vous avez cet hôte local 1573 Vous en verrez donc la valeur ici. C'est donc ici que nous stockons. Cela va donc changer. Tu peux voir. Il est donc entreposé ici. Et si vous effacez les cookies , tout cela sera supprimé. Nous utilisons le stockage local essentiellement pour implémenter le mode sombre. D'accord. J'espère que cela a du sens. Donc, pour résumer, Tailwind intègre ce support pour le mode sombre, d'accord ? Et il inclut une variante sombre que vous pouvez utiliser de cette façon. Vous pouvez donc implémenter tous les styles que vous souhaitez avoir en utilisant la variante foncée, d'accord ? Et puis ici, en mode sombre, vous pouvez dire sélecteur Donc, le sélecteur est une classe ici, d'accord ? Vous pouvez donc voir que la stratégie de sélection a remplacé cette stratégie de classe OK, c'est donc la stratégie de sélection pour le moment. Il s'agit de la dernière mise à jour ici. Donc, si j'utilise le sélecteur ici, voyons si cela fonctionne D'accord, je peux donc le mettre à jour avec le sélecteur. Vous pouvez voir OK, donc en fait, c'est dans la dernière version, sélecteur est censé être utilisé D'accord ? J'utilisais la classe, mais la classe est également bonne, d'accord ? Mais le sélecteur est quelque chose que vous pouvez utiliser. C'est parfaitement normal. accord ? Parce que je pense que Select Class ne sera pas valide dans la prochaine version. Donc, assurez-vous d'utiliser le sélecteur, d'accord ? La classe est également la même. Cela signifie la même chose. Et vous pouvez voir que ce sera blanc. D'accord, si le mode sombre n'est pas activé, et si le mode sombre est activé, alors ce qui se passera, c'est que cela se produira. Donc, ce qui se passe, c'est que lorsque vous activez le mode sombre , d' accord, cette classe est ajoutée au HTML, appelée dark. Maintenant, lorsque cela est appliqué, tout ce qui est dans le noir est applicable, et ce n'est plus valide, d'accord ? Donc, cet élément est ajouté, cet attribut est ajouté, et c'est pourquoi vous voyez toute l'application s'assombrir parce que vous avez des sélecteurs sombres partout. Vous utilisez ces sélecteurs partout, n'est-ce pas ? Ainsi, chaque fois que vous avez défini quelque chose en utilisant le noir, cela le montre D'accord ? Donc oui, c' est ainsi que les choses fonctionnent, et j'espère que vous avez apprécié la création cette petite application en mode sombre. C'est bon. J'espère donc que cela vous a été utile. 7. Conclusion du cours: Eh bien, félicitations pour avoir terminé ce cours. Vous avez parcouru un long chemin en maîtrisant l'intégration de Tailwind CSS et de React pour créer des applications réactives, personnalisables et visuellement époustouflantes De la configuration de votre projet à mise en œuvre de fonctionnalités avancées telles que le mode sombre, vous avez désormais les compétences nécessaires pour concevoir des applications Web modernes qui s'affichent parfaitement sur toutes les tailles d'écran. Votre projet final, une application React entièrement fonctionnelle avec mode sombre témoigne des connaissances pratiques que vous avez acquises dans ce cours. N'oubliez pas que le CSS tailwind ne vise pas seulement à gagner du temps, il s'agit également de vous donner une liberté créative et de simplifier les conceptions complexes Je vous encourage à continuer à expérimenter les fonctionnalités de Tailwinds et à les appliquer dans vos futurs projets. Partagez également le travail avec la communauté et n'hésitez pas à revoir les leçons si vous avez besoin d'une remise Dans ce cours, vous trouverez un projet de classe que vous pourrez consulter et partager avec l' ensemble de la classe pour recueillir des commentaires. Merci d'avoir fait ce voyage avec nous. Je suis très heureuse de participer à cette aventure particulière, et j'ai hâte de voir les applications que vous allez créer avec React et Tailwind CSS Bonne chance et bon codage.