Introduction à Tailwind CSS | Chris Dixon | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Bienvenue au cours !

      3:46

    • 2.

      Prérequis et outils requis

      1:25

    • 3.

      Partagez votre travail sur Skillshare !

      1:09

    • 4.

      Présentation de Wireframe

      1:19

    • 5.

      Configuration de Tailwind

      14:19

    • 6.

      Configuration du serveur Live

      1:47

    • 7.

      Mobile first & La palette de couleurs

      9:17

    • 8.

      Utilitaires d'espacement

      6:08

    • 9.

      Utiliser la Flexbox CSS

      11:46

    • 10.

      Tableaux et débordement

      4:50

    • 11.

      Corps de tableau et divisions

      9:38

    • 12.

      Section de pagination

      7:38

    • 13.

      Modifier la mise en page avec des points de rupture

      6:19

    • 14.

      Stylisation grand écran

      6:27

    • 15.

      Utiliser les CSS et directives personnalisées

      6:14

    • 16.

      Les directives @layer & @apply

      7:02

    • 17.

      Utilitaires de lecteur d'écran

      2:10

    • 18.

      Déploiement

      2:08

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

965

apprenants

5

projets

À propos de ce cours

-----------------------------------------------------------

Lien vers le code final du projet :

https://github.com/chrisdixon161/healthy-juice-bar

Vous pouvez consulter le projet final :

https://healthy-juice-bar.netlify.app/

-----------------------------------------------------------

Introduction au projet Tailwind CSS

Lors de la construction de sites Web, la plupart d'entre nous appartiennent à deux camps.

Vous êtes coder ou designer. Je ne suis certainement pas le meilleur designer d'un long chemin, mais j'ai encore besoin de mes sites pour être bon. Il existe de nombreux cadres et bibliothèques pour y aider, mais bon nombre d'entre eux appliquent leur propre façon de faire. C'est là que Tailwind CSS entre en jeu.

Nous pouvons rédiger notre HTML comme nous le faisons normalement, puis utiliser des noms de cours soigneusement conçus pour vous proposer un regard propre et professionnel à vos projets. Tout en restant dans notre HTML.


C'est particulièrement utile pour la croissance d'un projet. Plutôt que de réfléchir à de nouveaux noms de cours et à des feuilles de styles en constante croissance,

Tailwind propose un système de conception cohérent que votre équipe peut également utiliser.


Fournir des services simples pour contrôler presque tous les contenus tels que l'espacement, les couleurs, la typographie et la mise en page, et la réactivité.

Ce cours est une introduction complète à Tailwind pour les débutants, mais vous devriez avoir une expérience en HTML et CSS avant de le tirer le meilleur parti de ce cours.

Nous couvrons tous les éléments essentiels tels que :

  • La configuration du vent à queue en utilisant différentes méthodes
  • Accélérer le développement avec un serveur en direct
  • Les cours d'utilité à queue et comment les utiliser.
  • Le style mobile
  • La palette de couleurs
  • L'espacement des services publics
  • Flexbox pour une mise en page générale et réactive
  • Conception et points d'arrêt réactifs
  • Ajouter un CSS personnalisé
  • Directives sur les ailes
  • Déploiement
  • Et bien plus encore !

Tailwind est une compétence à apprendre et peut vraiment vous aider à réaliser vos projets sans beaucoup de travail. J'ai hâte de vous en apprendre plus sur ce sujet, et je vous y trouverai !

Rencontrez votre enseignant·e

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Voir le profil complet

Compétences associées

Développement Langages de programmation CSS
Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Bienvenue dans le cours !: Quand il s'agit de créer des sites Web, la plupart d'entre nous se divisent en deux groupes : nous sommes soit un concepteur, soit un développeur. Personnellement, je ne suis pas le meilleur designer là-bas , mais j'ai toujours besoin de mes sites Web pour être beaux, et c'est là que Tailwind intervient. Il est également d'autres frameworks et bibliothèques disponibles , mais beaucoup d'entre eux appliquent leur propre façon stricte de faire les choses. Nous pouvons écrire notre HTML comme nous le ferions normalement, puis utiliser les noms de classe soigneusement conçus. Toutes les classes d'utilité pour fournir un look propre et professionnel à votre projet tout en restant à l'intérieur de notre HTML. Ceci est particulièrement utile lorsqu'un projet se développe plutôt que penser systématiquement à de nouveaux noms de classe et à des feuilles de style toujours croissantes. Tailwind offre un système de conception cohérent que toute votre équipe peut utiliser. Acheter des utilitaires simples pour contrôler presque tout comme l'espacement, les couleurs, la typographie, la conception réactive et la mise en page. En tant que quelqu'un qui n'est certes pas le meilleur designer là-bas, Tailwind a vraiment aidé à donner à mon site une base professionnelle sur laquelle s'appuyer. C' est actuellement mon incontournable au début d'un nouveau projet. Permettez-moi de me concentrer sur ce que je fais le mieux. Comment ça marche ? Une fois que Tailwind est inclus dans votre projet et que nous aborderons comment le faire dans la classe, l'utiliser dans votre projet est facile. Nous commençons par ajouter notre HTML comme nous le ferions normalement, ajouter le contenu à l'écran. Cet exemple montre une section contenant du texte à l'intérieur sans aucun style que vous voyez dans le coin inférieur droit. Cela semble assez ennuyeux sur l'écran. En restant ici à l'intérieur de notre HTML, Tailwind nous fournit ces classes d'utilitaires que nous pouvons appliquer. En commençant par ces enveloppes de section, j'ai ajouté trois de ces classes qui sont assez descriptives pour chacune. Chaque classe fait une chose simple, et la première est bg-gray-800. Cela définit l'arrière-plan pour être gris, puis vous ombrage de 800. Nous examinerons également les palettes de couleurs plus tard dans le cours. P-six est une valeur de modèle de six et nous pouvons augmenter ou diminuer ce nombre avec plus ou moins d'espace dans. Le centre de texte est utilisé pour centrer le texte contenu à l'intérieur. Bien sûr, le texte à l'intérieur est maintenant difficile à lire, donc nous allons passer au style des éléments p. Encore une fois, nous ajoutons les attributs de classe qui sont des éléments, et tout comme l'enveloppe extérieure, nous utilisons à nouveau la couleur du gris. Mais cette fois, nous appliquons la nuance plus légère de 200. Text-LG est pour le texte plus grand et le moyen de police est le poids de la police que nous allons appliquer. Le résultat est une section propre sans même écrire de code CSS. De plus, nous ne voulons pas que tous les sites que nous créons soient identiques, et nous pouvons toujours écrire nos propres styles si nous le voulons. Tailwind a beaucoup d'options de personnalisation disponibles pour rendre notre site plus unique. Cette classe vous apprendrez sur ces utilitaires et bien plus encore que Tailwind a à offrir. Tout en construisant un projet d'administration de style Tableau de bord, affichez une liste des produits disponibles dans notre boutique. Comme nous le voyons ici, il sera réactif et il prendra soin de la mise en page grand et petit écran. Cette classe est axée sur les débutants, bien que vous devriez être à l'aise avec HTML et CSS avant d'apprendre Tailwind. Le vent arrière est une grande compétence à apprendre, et j'ai hâte de vous apprendre tout à ce sujet pendant ce cours. 2. Prérequis et outils requis: Tailwind est un framework CSS, et par conséquent, il est essentiel que vous compreniez au moins les bases du HTML et du CSS avant de suivre ce cours. Si vous avez utilisé HTML et CSS dans le passé, soit pendant le cours existant, l' un de mes cours, ou construit n'importe quel projet simple, vous devriez être prêt à partir. Il y a très peu de choses dont vous avez besoin pour suivre ce cours. Si vous avez construit n'importe quel type de site dans le passé, vous avez probablement déjà ces compétences dont vous aurez besoin. Un éditeur de texte est essentiel, et j'utiliserai Visual Studio Code. Vous pouvez télécharger ceci, ou vous pouvez utiliser n'importe quel autre que vous préférez. Si vous avez besoin de télécharger, le site est terminé sur la droite, qui est code.visualstudio.com. Il est disponible gratuitement sur Mac, Windows et Linux. Si vous n'en avez pas déjà un, allez-y et téléchargez-le. Un terminal est également nécessaire. Ne vous inquiétez pas si vous n'en avez jamais utilisé. Nous avons juste besoin de quelques commandes simples. Visual Studio Code est livré avec un terminal déjà pré-intégré, ou si vous avez déjà un terminal autonome que vous préférez utiliser, c'est tout aussi bien. n'y a pas d'outils supplémentaires auxquels nous avons besoin pour nous abonner ou acheter. Tout autre outil ou logiciel dont nous avons besoin, nous allons télécharger au fur et à mesure du cours. 3. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de cocher une autre conférence. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de éloigner de la classe . Vous pouvez même prendre du recul une fois que vous avez terminé le cours et revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare et je suis le seul à y jeter un coup d'œil, mais il inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous l'onglet Projet et ressources, où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 4. Présentation de Wireframe: Pour vous aider à mieux comprendre ce que nous allons construire à travers cette classe, j'ai créé un croquis filaire que vous pouvez télécharger. Si vous le souhaitez, il peut être utile de télécharger et de garder à vos côtés comme référence de ce que nous allons construire au cours de ce cours. Wireframe montre l'aspect général de base de la façon dont tous les projets seront aménagés. Sur la gauche, nous avons la pleine taille, plus grand écran, qui a une barre latérale sur la gauche, et le détail du produit à côté sur la droite. Ensuite, sur le côté droit de cette image, nous avons une petite vue d'écran qui a le contenu empilé, et également optimisé pour les écrans plus petits. Tailwind sera également utilisé pour cette mise en page réactive, ainsi que le style général aussi. Si vous souhaitez l'utiliser comme référence, vous pouvez le télécharger dès maintenant. En outre, j'ai fourni les mêmes images que j'ai utilisées, et celles-ci sont disponibles à télécharger avec cette classe. Vous pouvez en faire usage ou si vous préférez, vous pouvez utiliser certains des vôtres. Créez un style de projet différent. Si vous le souhaitez, allez de l'avant et téléchargez ces images, ainsi que le filaire. Ensuite, nous allons jeter un oeil sur la façon de commencer avec ce projet et comment également mettre en place le tail up. 5. Configuration de Tailwind: Tailwind nous offre plusieurs options de configuration, en fonction de ce que nous utilisons pour construire notre site Web et aussi des fonctionnalités que nous voulons prendre en charge. Cette vidéo, nous allons jeter un oeil à certaines des différentes options de configuration. Mais d'abord, nous devons créer un nouveau projet. Le projet aura besoin d'un dossier de projet et je vais créer le mien sur le bureau. Cliquez avec le bouton droit de la souris sur « Nouveau dossier » et vous pouvez le placer n'importe où sur votre machine que vous préférez. Le mien s'appellerait le Healthy Juice Bar. Encore une fois, c'est facultatif, vous pouvez changer le thème et le style de votre projet, mais le mien va être basé sur une barre de jus, puis différents types de smoothies. Aussi à partir de la dernière vidéo, vous devriez avoir téléchargé les images et le filaire, vous aimeriez les utiliser. Je vais pouvoir faire glisser ces images dans le projet pour une utilisation ultérieure. Si vous voulez utiliser le vôtre, créez un dossier d'images, puis vous pouvez ajouter les différentes images à l'intérieur d'ici. La seule que vous n'aurez pas est cette photo de moi, mais vous pouvez télécharger une photo de vous-même pour l'utiliser dans ce projet. Ouvrez ensuite votre éditeur de texte ou Visual Studio Code. Faites glisser le curseur sur le dossier du projet pour l'ouvrir. Ensuite, comme toujours nous créons un nouveau site Web, nous devons créer un nouveau fichier qui est notre index.html. Vous pouvez utiliser les raccourcis Commande ou Contrôle N, qui créeront une nouvelle page, ou si vous le souhaitez, vous pouvez survoler le titre et barre latérale et utiliser cette icône pour créer une nouvelle page. Donnez ceci une sauvegarde, et c'est le index.html. Juste avant de commencer à écrire un code si nous regardons le filaire, ce que nous devons faire est de décider d'abord ce que nous allons créer. Nous pouvons voir par ces images que nous avons deux sections distinctes. Nous avons cette zone de barre latérale, et nous avons également cette zone de contenu principale sur la droite. La même chose avec le plus petit écran, nous avons la barre latérale qui est en haut, puis la zone de contenu principale juste en dessous. Nous avons deux sections distinctes que nous devons créer. Retour à notre page d'index, si vous utilisez Visual Studio Code, vous pouvez utiliser la commande Emmet intégrée, qui est un raccourci pour créer notre standard HTML. C' est HTML:5, appuyez sur « Enter », cela nous donnera la structure de base dont nous avons besoin. Le titre du document est Healthy Juice Bar. Comme nous l'avions vu auparavant à l'intérieur de la section du corps, nous avons nos deux sections principales, et la première est les éléments de côté. A côté de cela se trouvent la section principale du contenu. Commençons à travailler à l'intérieur de la section de côté, nous allons ajouter un peu de contenu à travailler avec. Comme vous pouvez le voir à l'intérieur de la barre latérale sur le filaire, nous avons un logo ou une image en haut de la barre latérale, puis le titre juste en dessous. C' est la même chose pour les deux de la mise en page. Le côté, créer les éléments d'image, et à l'intérieur du dossier images fourni, nous avons une image qui est le logo.png, l'ancien texte. Ensuite, juste en dessous de notre image, comme nous venons de le voir, nous allons créer un titre de niveau 1 pour le titre de côté. Voici le Healthy Juice Bar, ou le nom de votre choix. Ouvrons cela dans le navigateur. Tout d'abord, enregistrez ce fichier, puis je vais copier le chemin vers cela, ouvrez Google Chrome, puis collez-le à l'intérieur. Un look assez standard comme prévu, nous avons l'image et notre titre. Maintenant, ce que nous allons faire est de nous diriger vers la documentation Tailwind et de voir comment nous pouvons mettre cela en place dans notre projet. Pour l'installation Tailwind, nous devons aller sur « TailwindCS.com », et à partir de la page d'accueil, nous avons un lien ici vers la documentation. De la documentation la page dont nous avons besoin est ce lien d'installation juste ici. Cette page d'installation contient des guides différents sur la façon dont nous pouvons configurer Tailwind en utilisant différents frameworks et bibliothèques. Par exemple, si vous utilisez dans Vue ou React ou Gatsby, disposez de guides d'installation dédiés pour ceux-ci. Nous allons rester simple et inclure Tailwind dans un projet HTML régulier. En commençant par le moyen le plus simple qui est d'utiliser un lien CDN. Sur la droite, dirigez-vous vers le lien qui utilise Tailwind via CDN. Cela va nous donner un lien de feuille de style que nous pouvons utiliser pour déposer directement dans notre projet. CDN est un réseau de diffusion de contenu et c'est une façon d'avoir notre contenu, dans notre cas, le fichier CSS Tailwind, disponible dans le monde entier sur plusieurs serveurs ou centres de données. Si nous copions ce lien et le collons dans un nouvel onglet, c'est le fichier CSS auquel nous lions. Bien sûr, pour le moment, cela semble un peu gâché parce qu'il n'est pas formaté. Nous allons jeter un coup d'œil sur cela dans l'éditeur de texte très bientôt. Mais la chose clé à noter ici est que nous lions à un fichier CSS Tailwind, qui est hébergé sur un serveur externe, plutôt que de télécharger ce fichier et de l'inclure dans notre projet. Pour l'instant, copions ce lien complet de la documentation et puis nous pouvons coller cela à l'intérieur de la section tête de notre page d'index. Donnez une sauvegarde à ça. Maintenant, si nous passons à notre projet, actualisons le navigateur, nous voyons instantanément un léger changement à notre contenu. C' est une bonne chose car cela signifie maintenant que le fichier CSS Tailwind a maintenant pris effet. La raison pour laquelle nous voyons un changement au départ est due un ensemble de styles de base que Tailwind appliquera. Ces styles de base ne sont pas vraiment conçus pour ajouter du style à notre projet, mais plutôt, ils sont un ensemble de styles pour rendre notre site plus cohérent sur différents navigateurs. Si vous avez utilisé un fichier CSS normalisé dans le passé, beaucoup de celui-ci est basé sur cela. Qu' en est-il des classes d'utilitaires Tailwind ? Eh bien, ils sont également disponibles avec le lien CDN aussi. Nous allons maintenant jeter un oeil à quelques exemples simples à l'intérieur d'ici. Tout d'abord, nous allons travailler sur la section de côté et tout ce que nous devons faire est d'ajouter une classe régulière attributs. Ensuite, ajoutez notre première classe d'utilitaire qui est p-4. Maintenant, si nous actualisons le navigateur, nous pouvons voir une valeur de remplissage de quatre, il est appliqué à ces éléments. Assez simple, la prochaine chose à jeter un oeil est d'ajouter un arrière-plan, et nous pouvons le faire avec bg, suivi de la couleur que je vais utiliser comme gris. Puis la nuance de gris, qui est 800. Nous allons examiner plus en profondeur toutes les nuances et les couleurs dans une future vidéo, mais pour l'instant, cela devrait l'appliquer à notre section latérale, étant donné que c'est la couleur de fond gris foncé. L' image, déplacez vers le bas vers les éléments de l'image et ajoutez notre classe dans. L' image aura besoin d'une hauteur et d'une largeur. En utilisant Tailwind, c'est relativement simple. Utilisez h pour la hauteur, la valeur de 32. Nous allons jeter un coup d'oeil à ce que toutes ces valeurs signifient très bientôt. La largeur, nous pouvons aussi faire avec w et faire le carré. Nous garderons ceci comme la même valeur. Actualiser. La taille a maintenant pris effet. Puisque nous avons ce fond sombre couleur gris, nous devons également ajouter quelques classes à notre H1, pour le faire ressortir sur ce fond sombre. La couleur blanche, nous pouvons ajouter du texte, tiret, blanc. Rafraîchissez, et cela prend instantanément effet. Nous pouvons également transformer cela en majuscules avec cet utilitaire. Nous aurons des classes d'utilitaires disponibles pour presque n'importe quel type de propriété CSS, que vous souhaitez ajouter. Nous pouvons définir la police et dans ce cas, passons à notre milieu de police. Sauver. Ils devraient être un peu plus audacieux qu'auparavant. Nous avons beaucoup de différentes tailles de texte et options. Pour cette rubrique, je vais aller pour le texte pour exceller. dernier pour le titre de niveau 1 va être suivi plus large. Cela ajoutera un espace supplémentaire entre nos lettres. Nous pouvons déjà commencer à voir en ajoutant quelques noms de classes utilitaires simples, nous pouvons vraiment faire une grande différence dans le style de notre site. Le lien CDN, que nous avons mis en place en haut, est idéal pour apprendre le vent arrière, et il sera bon pour la majorité de ce cours, ainsi que pour certains projets plus simples aussi. Il y a aussi quelques inconvénients de l'utiliser. Nous pouvons voir certains d'entre eux si nous revenons à la documentation Tailwind, nous pouvons voir certains des inconvénients que nous avons ici lors de l'utilisation du lien CDN, comme nous ne pouvons pas utiliser de directives telles que apply, nous allons jeter un oeil à plus tard dans le cours. En outre, nous ne pouvons pas faire quelque chose appelé tremblement d'arbre, ce qui est un moyen de supprimer tous les styles inutilisés de toutes les versions finales, ce qui signifie que la taille du fichier sera plus grande. Pour vous aider, nous allons installer le vent arrière à l'aide de l'interface de ligne de commande. Cliquez sur le lien Tailwind CLI à droite. Pour ce faire, nous devons installer node.js, et nous devons également utiliser quelques commandes de terminal. Cela peut souvent effrayer les gens, mais ce ne sont vraiment que quelques étapes simples que je vais vous guider à travers. Commençons par installer node.js, qui est disponible à partir de nodejs.org. J' ai déjà installé node.js sur mon ordinateur, mais si vous ne l'avez pas déjà installé, allez-y et téléchargez la dernière version maintenant, et revenez une fois que cela a été fait. Une fois cela fait, vous pouvez soit ouvrir votre propre terminal que vous voulez utiliser, soit dans mon cas, je vais le garder simple. Dans Visual Studio Code, si nous allons à l'option de terminal, ouvrez un nouveau terminal à partir d'ici. Une fois que vous ouvrez le terminal à l'intérieur du code Visual Studio, il devrait s'ouvrir automatiquement à l'intérieur de votre répertoire de projet. Étape 1, est de s'assurer d'abord que nous avons installé node.js avec succès. La façon de le faire à l'intérieur du terminal, est d'écrire la commande qui est node-v. Si cela renvoie un numéro de version, cela signifie que nous avons installé node.js avec succès. La prochaine chose que nous devons faire est d'exécuter l'interface de ligne de commande Tailwind. Pour cela, revenons aux documents. Nous pouvons voir ici, nous avons une commande, et avons besoin de copier ceci et ajouter cela à l'intérieur du terminal. Cet outil MPX est disponible depuis que nous venons de télécharger node.js, qui est également livré avec MPM sur cet outil MPX. Prenons cette commande complète. Copiez ceci et collez-le à l'intérieur du terminal. Appuyez sur « Entrée ». Nous pouvons accepter d'installer dans le paquet Tailwind. Donnez juste quelques instants pour mettre en place les choses. Une fois cela terminé, nous pouvons aller dans la barre latérale. Nous pouvons voir que nous avons maintenant ce fichier tailwind.css. C' est le même fichier CSS que nous avons utilisé plus tôt. Je vais lier ça au CDN. Nous pouvons maintenant le voir plus clairement puisque cela est formaté à l'intérieur de l'éditeur. La première chose que nous voyons en haut est l'ensemble des styles de base, qui est utilisé pour rendre notre site plus cohérent sur différents navigateurs. Il fait des choses comme la réinitialisation des valeurs de remplissage et de marge, il va configurer des familles de polices par défaut, et généralement donner une apparence cohérente à nos éléments HTML. Mais qu'en est-il des classes d'utilité que nous venons d'utiliser ? Eh bien, faisons une recherche. L' un de ceux que nous avons utilisés avant est cette couleur de fond de gris. Passons à notre fichier CSS. Utilisez Commande ou Contrôle F pour utiliser le Finder. Cherchons notre LBG gris 800. Plus loin dans le fichier CSS ou 15.000 lignes dedans, nous pouvons voir que nous avons une référence à cette classe. Ceci définit notre couleur de fond gris. Juste au-dessus, nous avons l'ombre de 700, qui est une version plus légère. Nous pouvons voir, si nous faisons défiler un peu plus loin, nous avons toutes ces options, qui est de l'ombre gris 50 jusqu'à 900, ce qui est le plus sombre. Nous avons ensuite les versions rouges avec toutes les mêmes valeurs d'ombre. Vous trouverez aussi beaucoup d'autres couleurs. Si un autre que nous avons déjà utilisé est la classe de hauteur, faisons une recherche pour h-32 et regardons la toute première occurrence. Pour chacune de ces valeurs, telles que 32 ou 28, elles correspondront toutes à une seule valeur de hauteur, qui est en grammes. Dans notre cas, le h-32, que nous avons appliqué à notre image, appliquera huit jantes de hauteur. Nous pouvons augmenter ou diminuer ces valeurs pour nous donner une valeur RAM différente. Regardons un de plus. Nous avons aussi eu quatre médium juste entendre. Si nous recherchons et nous pouvons voir le poids de la police de 500 a été appliqué. Nous avons également de la lumière supplémentaire, nous avons de la lumière, normale, semi gras, audacieux, et aussi extra gras aussi. Maintenant, nous avons notre propre copie de notre dossier Tailwind dans le projet. Ce que nous devons faire est de remplacer ce lien CDN. Supprimez ceci et puisque notre fichier Tailwind est directement à côté de notre index, nous pouvons lier à cela avec le nom de tailwind.css. Dis ça. Actualisez le navigateur. Tous nos styles de vent arrière sont toujours appliqués. Mais cette fois, nous allons remplacer le lien CDN par notre propre version locale. 6. Configuration du serveur Live: Ajouter constamment de nouvelles choses à notre projet, enregistrer le fichier, aller sur le navigateur, puis rafraîchir pour voir les mises à jour, peut au fil du temps devenir vraiment fastidieux. C' est pourquoi je voulais vous montrer rapidement par plugin qui est disponible à partir de Visual Studio Code que nous pouvons utiliser pour nous faire gagner du temps. Ce plugin nous permettra d'apporter des modifications à notre éditeur, cliquez sur « Enregistrer » et puis un serveur en direct gardera constamment notre projet mis à jour à l'intérieur du navigateur. L' installation est facultative et vous n'avez pas besoin de le configurer si vous ne le souhaitez pas. Au lieu de cela, vous pouvez simplement continuer à rafraîchir le navigateur après tout changement d'éditeur. Si vous voulez installer ceci pour gagner un peu de temps, ce que vous pouvez faire est d'aller dans le bouton Extensions juste ici. J' ai déjà ce plug-in configuré que vous pouvez voir ici. Si vous ne le faites pas, faites une recherche en haut pour le serveur en direct, puis cliquez sur cette option, juste ici. Puisque le mien est déjà configuré et activé, vous pouvez voir le bouton de désactivation en haut. C' est la première visite de ce plugin. Vous devriez voir le bouton Activer juste ici. Ensuite, exécutez cette extension et configurez notre projet avec le serveur live. Tout ce que nous avons à faire est de cliquer sur ce bouton « Go Live » en bas. Cela devrait alors ouvrir cela dans le navigateur par défaut, puis garder une trace des modifications apportées à notre site. Par exemple, si nous allons de l'avant et que notre arrière-plan soit rouge, il est enregistré et cela sera automatiquement mis à jour dans le navigateur sans avoir besoin d'actualiser. Rétablir cette couleur grise du projet. C' est votre outil d'état que j'aime utiliser, et j'espère que vous le trouverez aussi utile. 7. Mobile first & La palette de couleurs: Tout comme avec de nombreux cadres modernes, Tailwind a également le concept de première conception mobile. Cela signifie que nous commençons par concevoir pour la petite vue d'écran, pour commencer, puis que nous obtenons plus d'espace d'écran disponible, nous pouvons ajouter ou remplacer n'importe lequel des styles existants. Cela peut avoir du sens car beaucoup de style de cours resteront pour toutes les tailles d'écran, telles que les couleurs et les polices, et nous pouvons simplement apporter quelques modifications de mise en page ou de taille lorsque nous avons plus d'espace à l'écran disponible. Retour au filaire. En regardant le petit écran sur la droite, c'est ce que nous allons commencer. La mise en page pour cela n'a pas vraiment besoin de beaucoup de travail, car beaucoup d'éléments de site Web ont tendance à circuler naturellement de cette façon de toute façon. Nous avons déjà un logo en haut et aussi le titre. Ensuite, nous descendons au menu. Retour au projet. Puisque nous traitons de la vue de petit écran, nous pouvons réduire le navigateur, prendre seulement la largeur minimale. Ce que nous allons faire, c'est aller à la section de côté, juste en dessous du titre de niveau 1. Ici, nous pouvons créer nos liens à l'intérieur de la liste non ordonnée. Mais maintenant, nous allons créer nos articles de liste. Nous avons six liens différents et ceux-ci vont juste être déstylés pour l'instant. Le premier, encore une fois sans classes d'utilitaires à passer dans le lien. Pour l'instant, nous n'avons pas de pages supplémentaires pour lier ces deux, donc un href vide est très bien. Le premier lien concerne les produits. Le deuxième élément de la liste, celui-ci va avoir le contenu des commandes. Numéro 3, celui-ci est pour l'inventaire, et ensuite, nous avons les clients. Le numéro 5 est pour l'analyse. Le dernier sera pour des coupons. Enregistrez ceci et vous pouvez même actualiser. Je vais démarrer le serveur en direct. On peut voir en haut, j'ai six liens. Comme mentionné précédemment, lorsque nous utilisons HTML seul, il peut généralement pour assez bon pour la vue de petit écran en termes de mise en page, aurait juste besoin d'ajouter un style pour le faire paraître bien. Pour que ça paraisse bien, nous allons avoir besoin d'utilitaires Tailwind. Pour voir la liste de tous les utilitaires auxquels nous avons accès, rendez-vous sur la page d'accueil Tailwind, puis cliquez sur le lien de documentation. Le Tailwind Docs est une excellente référence pour toutes les classes d'utilitaires. J' utilise Tailwind depuis un certain temps maintenant, et je l'utilise toujours comme référence. Sur la gauche, nous avons une liste de toutes les sections utilitaires que nous avons disponibles, comme si vous voulez utiliser la flexbox, que vous serez bientôt, nous pouvons utiliser des utilitaires d'espacement, des utilitaires de dimensionnement, différentes typographies telles que la police tailles, différentes couleurs, la famille de polices, ainsi que beaucoup d'effets et de bordures différents que nous pouvons ajouter à. Bien sûr, il y a beaucoup de sections différentes ici, mais celle sur laquelle nous allons nous concentrer est la palette de couleurs. Faisons une recherche par le haut pour la palette de couleurs. C' est celui dont nous avons besoin ici. Ensuite, faites défiler vers le bas, nous pouvons voir une liste de toutes les couleurs que nous avons disponibles. Nous avons déjà utilisé certains d'entre eux dans notre projet, comme la couleur grise, et nous pouvons voir qu'ils ont une nuance de 50 jusqu'à 900, comme nous l'avons vu à l'intérieur du CSS Tailwind. Vous pouvez voir toutes les différentes couleurs que nous avons disponibles pour commencer. Ceux-ci conviendront à de nombreux cas d'utilisation différents. Toutes ces couleurs, qui sont les mêmes, peuvent être appliquées à beaucoup de choses différentes. abord, nous sélectionnons une couleur telle que le rouge et la nuance de 400. Ensuite, sur la droite, nous avons quelques applications pour cette couleur. Nous avons le préfixe BG, que nous avons utilisé pour définir la couleur d'arrière-plan. Nous avons également les préfixes de texte à la couleur du texte, et aussi si nous voulons une bordure, nous pouvons utiliser une couleur pour cela aussi. C' est une belle façon de garder les choses cohérentes dans nos projets. Nous avons toujours accès à toutes ces couleurs et nuances, et nous pouvons ensuite utiliser un préfixe différent pour l'appliquer à différentes sections. Retour au projet, appliquons quelques couleurs à nos liens et réduisons cela. abord, nous allons définir la couleur du texte pour chacun de ces liens. Nous devons sauter dans l'élément a à l'attribut class. Le premier, nous allons commencer par le préfixe du texte, la couleur, tout sur l'ombre. Il y a notre premier, et souvent ce que nous voulons faire avec ce type de liens est de créer un style différent ou un effet différent lorsque l'utilisateur survole le texte. Pour cela, je vais appliquer un effet de vol stationnaire. La façon de le faire est d'appliquer l'une de ces classes d'utilitaires, tout comme nous le ferions normalement, mais nous ajoutons le préfixe de survol suivi par les deux-points. Par exemple, si nous voulions changer l'arrière-plan, nous utiliserons BG et définirons la couleur que nous voulons appliquer. Je dois aller pour la 700 année, sauf. Maintenant, lorsque nous survolons les produits, nous pouvons maintenant voir le changement de couleur de fond. Nous pourrions également ajouter autant de statut de vol stationnaire que nous le voulons. Puisque nous avons changé la couleur d'arrière-plan, je vais également changer la couleur du texte aussi. Encore une fois, placez dans l'état survol suivi des deux-points, changez-le pour être le texte blanc. Nous pouvons essayer cela dans le navigateur. Dès que vous passez la souris sur ce point, nous pouvons voir un changement subtil de la couleur du texte. Heureux avec cela pour l'instant, nous pouvons donc l'appliquer à tous nos liens. Copions simplement cette section de classe. Eh bien, premier lien et placez-le dans tous les autres liens. Assurez-vous que c'est dans tous les six. Nous pouvons voir cela s'applique maintenant à l'intérieur du navigateur, ainsi que ce préfixe de survol. Tout comme avec CSS régulier, nous pouvons également cibler d'autres états aussi. Au lieu de survoler, nous pourrions passer à un autre état tel que actif ou focus. Nous le faisons exactement de la même manière. Juste avant de passer à la vidéo suivante pour regarder un peu d'espacement, il y a quelques éléments que nous devons d'abord ajouter à cette section. A l'intérieur du filaire. Si va regarder les liens en haut que vous venez d'ajouter, à côté du lien des commandes, nous voyons un numéro 5. Ceci est pour montrer combien de commandes nous avons actuellement disponibles. Il a également ce fond de cercle aussi. Ensuite, après le dernier lien, nous pouvons également voir cette icône d'engrenage, qui est un lien vers les paramètres. Commençons par l'icône de numéro, qui va juste après notre lien de commande. Placez ceci dans et toujours dans notre élément de liste, puis placez le contenu en tant que numéro 5. Nous pouvons à peu près le voir à l'écran, mais c'est un peu trop sombre, donc nous devons ajouter quelques classes d'utilitaires. Pour le texte, je vais appliquer une couleur verte avec la nuance de 900, et aussi une couleur de fond vert trop si bg vert, et cette fois l'ombre 100. La taille de police que nous pouvons appliquer avec le tiret sm, pour lui donner la petite taille. Ensuite, pour tamponner la couleur de fond du vert. Ajoutons une valeur de remplissage, qui va être égale à 1,5. On commence à aller quelque part dans le navigateur. Maintenant, si on regarde ça, on a une couleur carrée. Nous devrons également arrondir les bords en utilisant les classes d'utilitaires Tailwind. Nous, tout d'abord, avons la classe arrondie, ce qui donne un petit bord arrondi. Nous avons également différentes tailles arrondies. Par exemple, nous pouvons appliquer un gros arrondi et c'est un peu plus grand, mais nous pouvons aussi faire cela complètement arrondi, avec arrondi plein. C' est bien. La dernière chose à faire est de placer l'icône d'engrenage en bas et ceci est juste en dessous de notre lien de coupons. Assurez-vous également que cela est en dehors de la liste non ordonnée. Encore une fois, cela peut être placé à l'intérieur d'un des éléments de span. Pour l'icône d'engrenage, cela va être une entité HTML. Une entité HTML est un moyen d'inclure une icône dans nos projets, et nous pouvons les appliquer en utilisant certains codes. Si vous n'êtes pas sûr d'utiliser des entités HTML, une recherche rapide Google vous donnera beaucoup de sites Web où vous pouvez trouver les codes disponibles que vous pouvez utiliser. abord, le code que nous devons appliquer est l'esperluette, le hachage, la valeur de 9881, suivi du point-virgule. Si vous voyez maintenant une icône d'engrenage en bas ici, et que cela soit un peu plus grand, nous pouvons utiliser une classe d'utilitaire Tailwind de texte et la taille de ce texte sera 2xl. On y va. Le contenu est maintenant en place, mais tout ce contenu que nous venons d'ajouter, semble un peu trop encombré. C' est là que les utilitaires d'espacement entrent en jeu. C' est ce que nous examinerons plus en détail. 8. Utilitaires d'espacement: Lors de la conception ou de la construction d'un site Web, espacement est toujours une considération importante, et avec CSS régulier, nous avons à la fois marge et rembourrage pour aider à contrôler cela. Comme nous l'avons vu brièvement dans les vidéos précédentes, Tailwind fournit également quelques classes d'utilitaires pratiques. commençant par le remplissage, qui est l'espacement à l'intérieur d'un élément, nous pouvons ajouter le remplissage aux quatre côtés d'un élément en utilisant P suivi d'une valeur. Nous verrons quelles sont ces valeurs dans un instant, mais en dessous, nous pouvons également voir que nous pouvons appliquer le remplissage à un seul site aussi, soit en haut, à droite, en bas ou à gauche. Comme un petit raccourci, nous pouvons également appliquer le rembourrage sur les deux côtés. Si vous avez utilisé une coordonnée dans le passé, vous connaissez l'axe x et l'axe y. X est horizontalement, donc cela applique le rembourrage à gauche et à droite, et l'axe y ajoute le rembourrage à la fois le haut et le bas. La marge, cela fonctionne exactement de la même façon, mais nous utilisons le préfixe m plutôt que le P. Encore une fois, nous pouvons ajouter du rembourrage à tous les côtés ou les contrôler individuellement. Aussi à gauche et à droite ensemble, ou nous pouvons regrouper le haut et le bas. Eh bien, qu'en est-il de ces valeurs comme quatre ? Ce sont des pixels ? M REM sont une partie de l'unité ? Eh bien, tout cela se rapporte à une valeur REM que nous pouvons voir dans le fichier CSS. Nous pouvons voir quelles sont ces valeurs exactement, si nous allons dans la barre latérale et puis ouvrons le fichier CSS tailwind. À partir d'ici, recherchons certains de nos utilitaires d'espacement. Allons pour P-0, et regardons la toute première occurrence. Parcourez ceux-ci et ce que nous recherchons est une classe P-0 que nous venons de voir dans les diapositives. Comme prévu, cela applique une valeur de remplissage de zéro. Après chaque taille supplémentaire, nous en avons un, nous en avons deux, nous en avons trois, chacun d'entre eux ajoute une valeur de remplissage différente dans REM. Un quart de REM, la moitié de REM, trois quarts et un REM est P-4. Tout ça passe sous les paliers de quart et ils vont jusqu'à la hauteur. Si nous faisons défiler jusqu'au dernier, c'est la valeur de 96, qui applique un remplissage de 24 REM. Si vous voulez savoir exactement quelles sont ces valeurs, faites une recherche rapide dans le fichier. En fait, nous avons déjà utilisé certaines de ces valeurs de remplissage à l'intérieur de notre page d'index. Nous avons utilisé une valeur de remplissage de quatre avec les éléments de côté, et continuons et ajoutons un peu plus d'espacement dans ce projet. Le titre, un espacement en haut et en bas que nous allons appliquer avec la marge y. Ceci est un H1 et plaçons ceci à la toute fin. Marge, l'axe y, puis la valeur de quatre. Enregistrer, et un certain espacement s'applique maintenant en haut et en bas de notre titre. La même chose pour chacun de ces liens. Ces liens, nous allons également utiliser une valeur de remplissage plutôt qu'une marge. C' est parce que si nous survolons l'un de ces liens, nous pouvons voir que nous avons un petit arrière-plan appliqué. Nous voulons que cet arrière-plan soit un peu plus grand pour entourer le texte, alors appliquons une valeur de remplissage de deux, p-2. Si nous survolons ce lien, nous pouvons voir que le rembourrage a été appliqué. Quelques choses à noter ici tout d'abord, le texte du produit a été poussé de la gauche. Eh bien, c'est bien pour l'instant parce que nous allons déplacer tout le texte au centre de cette section très bientôt. Aussi très bientôt, nous allons appliquer un peu d'espace entre chacun de ces liens. Nous pouvons également appliquer la classe d'utilité arrondie à ce lien. Nous pouvons voir cela mieux si nous survolons et nous pouvons voir les bords arrondis sur ce fond. Maintenant, si nous appliquons ceci à nos six liens, copiez le remplissage et la classe arrondie, et ajoutez-le à notre deuxième lien. Juste pour la durée donc nous laissons ceci, laissez ce lien, 4, 5 et 6. On va tester ça avant de passer à autre chose. Super. Tout cela fonctionne et la prochaine chose à faire est d' ajouter l'espacement vertical entre chacun de ces liens. Une façon de le faire est d'ajouter une marge à chacun de ces liens, ou encore plus facile Tailwind fournit un utilitaire appelé espace entre. Nous avons de nombreux éléments enfants comme celui-ci, tels que plusieurs liens. Nous voulons généralement un peu d'espace entre chacun. Mais certaines des solutions communes posent des problèmes. Par exemple, nous pourrions essayer d'ajouter une marge au bas de chaque lien. Cela fonctionne mais aussi noter la marge supplémentaire tout en bas, ce que nous ne voulons peut-être pas. Marge supérieure provoque le même problème, mais laisse l'espace supplémentaire en haut, ce qui peut également ne pas être voulu. Qu' en est-il de l'utilisation de la marge ? Pourquoi l'utilité ? Eh bien, c'est probablement encore pire parce qu'il ajoute aussi l'espace supplémentaire au début et à la fin, et aussi l'espace entre chaque lien est doublé. L' utilitaire d'espace Tailwinds résout ces problèmes en ajoutant seulement une quantité égale d'espacement entre chaque élément. Cet exemple est espacé verticalement sur l'axe y, mais nous pouvons également avoir de l'espace sur la page en utilisant l'espace x. Plutôt que d'utiliser plusieurs classes et de les appliquer à chacun des liens, nous pouvons également ajouter un espace unique entre classe et c'est le cas des parents. Dans notre cas, ce sera la liste non ordonnée. Localisons ceci sur d'autres listes. Juste en haut, ajouter la classe, ajouter l' utilitaire d'espace et puisque nous voulons l'espace sur l'axe y, nous ajoutons de l'espace y et la valeur qui est quatre. Cela nous donne maintenant un bel espace égal entre chacun de ces liens. Comme vous pouvez l'imaginer, nous utiliserons des utilitaires d'espacement très régulièrement. Ensuite, nous verrons comment nous pouvons utiliser la CSS Flexbox avec Tailwind. 9. Utiliser la Flexbox CSS: Ce filaire montre que le grand changement de mise en page se produit avec la barre latérale et le contenu principal. petits écrans sont généralement empilés verticalement et la vue grand écran est côte à côte. Une façon courante de le faire est avec la CSS Flexbox, et Tailwind a également des classes d'utilitaires pour le faire aussi. Les deux sections que nous allons changer sont la section de côté, et aussi construire à côté de ceci est la section principale. Nous pouvons voir que ces deux sections sont des éléments enfants au corps, alors appliquons la flexbox à cette section. Nous allons mettre une classe, et cela va contenir deux classes. Le premier est flex et le second est flex-col. Le premier ou flex, cela appliquera le type d'affichage de flex, puis flex-col. C' est la même chose que de définir la direction flexible pour être colonne, ce dont nous avons besoin pour la mise en page de petit écran. Cela s'appliquera à l'écart sur la section principale. Maintenant, si nous enregistrons cela dans le navigateur, nous ne voyons pas beaucoup de changement pour le moment. Nous ne voyons pas beaucoup de différence, parce que le contenu est déjà présenté de cette façon, mais nous allons changer cela de flex-col à flex-row dans une vidéo ultérieure. Comme je l'ai mentionné dans la vidéo précédente, la prochaine chose à faire pour la vue à petit écran est de placer tout le contenu au centre. La façon de le faire est d'aller à la section de côté. Il a déjà la classe, donc nous allons juste ajouter quelques autres à la fin. Encore une fois, en utilisant le type d'affichage de flex. Si nous enregistrons ceci, la valeur par défaut pour la flexbox est flex-row. Par conséquent, si nous allons au navigateur, nous pouvons voir tout ce contenu est placé sur la page. Tout comme ci-dessus avec la section du corps, nous pouvons également retourner cela avec flex-col et placer le contenu sous forme de colonnes. Au centre du texte, nous pouvons utiliser le centre de texte, et cela s'appliquera à notre titre et aussi à nos liens. Le texte est centré, mais nous devons également centrer l'image aussi. Puisque l'image est parent, qui est le côté, utilise actuellement la flexbox. Si nous descendons maintenant à l'image, nous pouvons également utiliser une propriété flex appelée self-center. Self-center est exactement le même que si nous avions notre propre fichier CSS et que nous définissons l'image pour être align-self centre. Nous pouvons voir cela si nous allons dans les outils de développement, cliquez avec le bouton droit de la souris et Inspecter. Passons la souris sur les éléments de l'image. Cela a appliqué la valeur align-self à être centre. Cela nous laisse maintenant à peu près où nous devons être pour la vue de petit écran et aussi avec la section de côté. Passons plus loin au contenu principal. Vous pouvez voir que nous avons un nom d'utilisateur, un avatar, le titre Tous les produits, puis deux boutons pour travailler avec les produits. Flexbox sera également utile pour cette section. Je peux aller juste en dessous de la section de côté, et jeter un oeil à l'élément principal. Ouvrez ceci et nous pouvons placer notre nouveau contenu à l'intérieur. Pour l'avatar, vous aurez besoin d'une photo de vous-même à inclure dans le dossier images. À l'intérieur du mien, j'ai une image appelée me.jpg. Si vous n'avez pas d'image personnelle à utiliser pour l'avatar, vous pouvez simplement utiliser l'une de ces images de smoothie comme porte-place. Maintenant, créons la section avatar qui sera entourée dans un div. Cette div contiendra l'image de l'avatar. Sauter dans le dossier images, et celui comme mentionné était me.jpg, le texte alt. Ensuite, à l'intérieur de ces petites balises, nous allons y placer le nom de l'utilisateur. Mettez ceci, appuyez sur Enregistrer, et il y a l'image et aussi le texte juste en dessous. Pour que cette section ressemble plus à un 1,2, nous devons également ajouter quelques utilitaires Tailwind. Pour l'enveloppe à l'intérieur de la div, mettons une marge au sommet de cet élément ou quatre. Cela nous donnera un peu d'espacement en haut, et aussi nous pouvons faire usage de la flexbox. Cette flexbox fera apparaître instantanément ces deux éléments dans une rangée puisque la direction de flexion par défaut est la ligne. Bien sûr, l'image est aussi beaucoup trop grande, donc nous pouvons ajouter la classe. Nous pouvons à nouveau utiliser la largeur et les utilitaires de hauteur à l'intérieur d'ici, donc la hauteur, la valeur de huit, et aussi la même pour la largeur, tout comme nous l'avons utilisé pour le nombre de commandes. Nous pouvons également appliquer un bord arrondi à cette image. À la valeur arrondie, vous pouvez ajouter n'importe quelle valeur arrondie à l'intérieur d'ici. Je vais juste garder ça aussi plein pour ajouter un cercle. À côté du parent, nous devons les aligner au centre du contenu et aussi les aligner verticalement. À l'intérieur de la div et juste après le flex, définissez le contenu de justification pour être centre. Cela placera tout le contenu au centre de la section. Ensuite, nous devons également prendre soin de l'alignement vertical. Nous pouvons le faire en utilisant items-center. Cela placera le texte au centre de notre image. Enfin sur le texte, nous allons juste ajouter une classe à l'intérieur d'ici, et ce sera de définir la couleur du texte. Allons pour gris-500, et aussi pour donner un peu d'espace à partir de l'image, définissez la marge sur l'axe des x pour être une valeur de quatre. Bien. En descendant de cette section avatar, nous allons créer une nouvelle section, qui sera un wrapper principal pour tout le reste du contenu. À l'intérieur de la section principale, et juste après la div finale avec un nouvel élément div, et ce sera le conteneur pour tous les contenus, y compris la table. Pour garder les choses organisées, nous allons juste placer un commentaire rapide juste au-dessus. Nous dirons conteneur pour tout le contenu principal, y compris la table, puis à l'intérieur de cette div, placer dans un nouveau div à l'intérieur. Ce sera aussi un conteneur. Nous ajouterons également un commentaire en haut. Ce conteneur sera utilisé pour aligner le titre Tous les produits sur tous les boutons. Le commentaire dira conteneur pour aligner les boutons et le titre. Tout d'abord, nous allons placer le cap à l'intérieur. Titre sera un h2, et le texte de Tous les produits. En dessous de cela, un div qui va contenir les boutons. Le premier, placez un nouvel élément de bouton, et ce sera le texte de Add. Ensuite, nous avons également besoin de l'icône Plus. Encore une fois, nous pouvons utiliser une entité HTML. Le symbole plus, nous pouvons utiliser l'esperluette, le hachage, la valeur de 43, un point-virgule, puis cela ajoutera cette icône plus à l'intérieur du bouton. Nous avons ce titre Tous les produits en haut. Ensuite, cette div a le premier bouton d'ajouter. Aussi à côté de cela, nous avons l'option select. Juste après le bouton, placez dans notre sélection, et la sélection signifie diverses options. La première option sera celle que l'utilisateur voit d'abord, et celle-ci sera des actions en vrac. Dupliquez ceci. Le second sera pour Edit, et le dernier sera pour Supprimer un produit. Essayons ça. Nous voyons la liste déroulante et aussi notre bouton Ajouter à côté de cela. Revenons maintenant à notre HTML et appliquons quelques classes d'utilitaires pour rendre cela meilleur look. Tout d'abord, le wrapper de contenu principal, qui est celui en haut, nous pouvons ajouter un peu d'espacement à gauche et à droite avec px-2. Ensuite, pour appliquer un peu d'espace à cette section avatar, nous pouvons également appliquer une certaine marge au sommet. Allons-y pour huit. Ensuite, le wrapper div, qui contient le titre et aussi les boutons. Pour demander quelques alignements à cette section, nous pouvons utiliser la flexbox. Changer la direction pour être colonne flex, puis nous pouvons commencer à aligner notre contenu, ainsi items-centre. Cela déplacera tout le contenu au centre de votre section lorsque nous avons la direction définie sur colonne. Pour ajouter un peu d'espacement entre ceux-ci, nous allons descendre à l'en-tête de niveau 2 et appliquer une marge juste au bas de l'élément avec mb-4. Jusqu' à la toute dernière section et nous pouvons commencer à travailler sur notre bouton et aussi sur les entrées sélectionnées. Tout d'abord, le bouton, cela aura la couleur du texte de gris-100. Cette couleur gris clair ne se distingue pas trop bien sur la couleur de fond blanc, mais nous allons changer la couleur de fond pour être indigo, une nuance de 500, et cela le fait se démarquer. En outre, un état de vol stationnaire modifiera à nouveau la couleur d'arrière-plan pour être une nuance plus claire d'indigo. Allons-y pour 400. Bien. Nous avons également besoin d'un rembourrage à l'intérieur de cela et aussi pour arrondir les coins. Le remplissage à gauche et à droite, valeur 4, réduira le texte à une petite taille. Puis enfin sur les bords arrondis. Bien, cela semble beaucoup mieux maintenant et sur la sélection. Jusqu' à la balise d'ouverture. Le nom et l'ID n'ont pas vraiment d'importance à la minute parce que nous n'envoyons pas notre formulaire à un serveur, mais nous allons juste définir le nom de masse et aussi l'identifiant pour être le même. Les classes, pour correspondre à notre bouton, nous garderons le texte à une petite taille. Appliquez une marge à gauche pour donner cet espacé du bouton, une valeur de remplissage de quatre sur l'axe des x, puis nous allons également définir la bordure pour que cela se démarque. Pour appliquer une bordure, nous utilisons simplement la classe d'utilitaire de bordure. Nous pouvons également jouer avec la couleur aussi. Comme nous l'avons regardé plus tôt avec les utilitaires de couleur, nous pouvons utiliser le préfixe de bordure, puis vous utilisez l'une de nos couleurs que vous voulez. Allons-y pour le gris-300. C' est le bord arrondi. Nous pouvons utiliser l'état de mise au point. Lorsque cet élément est mis au point, nous allons supprimer le contour et le remplacer par un état focus, qui inclut une bordure indigo avec la valeur 500. Si nous allons au navigateur, cela semble beaucoup mieux maintenant. Nous allons juste commencer un petit espace à l'axe y de ces éléments. Faisons cela à l'intérieur de la sélection. A côté du rembourrage, nous ajouterons un peu de rembourrage sur l'axe Y. Essayons une valeur de deux. Bien. Nous ferons aussi la même chose pour le bouton. Cela semble maintenant beaucoup mieux. Juste pour tester le focus si nous cliquons sur le navigateur, puis utiliser le bouton d'onglet pour parcourir tous nos éléments. Une fois que nous arrivons à cette entrée select, nous pouvons voir le contour de focus, que nous avons changé pour être la bordure indigo, donnant à l'utilisateur une indication visuelle de l'élément sélectionné. Nous faisons maintenant de bons progrès avec le contenu et aussi la vue sur petit écran. Ensuite, nous allons commencer à travailler à l'intérieur de notre table. 10. Tableaux et débordement: Le filaire pour le petit écran sur la droite a une table sur laquelle nous allons maintenant travailler. Les tableaux de données pour ce type de produit pourraient également contenir beaucoup plus de colonnes. Puisque la largeur de l'écran sur un petit appareil est limitée, plutôt que de réduire la taille de cette table et essayer de tout presser sur un petit écran. Je pense que la meilleure chose à faire dans ce cas est de permettre à l'utilisateur de glisser vers la droite pour afficher le reste des données de la table. Dans la vidéo précédente, nous avons ajouté ce commentaire en haut autour de ce div, qui était le conteneur principal. Il contient tout le contenu que nous avons créé ainsi que le tableau. Ce que nous devons faire est de localiser la balise de fermeture, qui est juste au-dessus du principal, et de garder cette section de tableau à l'intérieur. Pour cela, créez une nouvelle section, puis à l'intérieur de notre table. La raison pour laquelle nous avons ajouté cette section autour de notre table est d'ajouter une classe de débordement. Nous verrons le résultat à cela en seulement une seconde si nous ajoutons la classe sur l'utilitaire de débordement dash x, dash auto. Cet utilitaire est le même que la propriété CSS Overflow x standard. Nous avons défini la valeur sur auto. Cela signifie que si le contenu est trop large pour l'écran, ce qui sera le cas pour notre table, plutôt que de cacher la table ou de la couper, une barre de défilement sera alors introduite. À l'intérieur de la table, ajoutez notre premier élément qui est t-head. Ce sera le wrapper pour tous nos en-têtes de table placés dans une classe de bg-gray-100. Puis à l'intérieur d'ici nous ajoutons notre première rangée. Avec les tables, nous utilisons la ligne tr pour la table. Ensuite, chacun des titres sera entouré dans l'élément th. Le premier, si vous vous souvenez de mon filaire, est l'article. Le second, le statut de l'article et le troisième concerne la catégorie, le niveau du stock, le prix. Puis enfin un bouton Modifier. Sauvegardons ceci et voyons ce qui se passe à l'intérieur du navigateur. Je vais configurer le serveur en direct pour ouvrir, mettre à jour les modifications. Il y a notre en-tête de table sur la page. Comme prévu, nous devons ajouter des classes d'utilité, rendre cela beaucoup mieux. Pour les th éléments, pour les titres, placer dans la classe. Tout d'abord, un peu de rembourrage sur l'axe X. J' ai besoin de textos sur la gauche. Nous pouvons également rendre le texte extra petit ou moyen pour le faire ressortir et un peu plus audacieux. Ensuite, une couleur pour le texte, qui va être gris 500 et tourner ceci pour être en majuscules. Ensuite, à la toute fin, nous allons ajouter une classe d'utilité supplémentaire, qui va suivre plus largement. Si vous regardez de près l'article avant de l'enregistrer, appuyez sur « Enregistrer ». Cela augmentera l'espacement des lettres. Avec celui-ci maintenant en place, nous allons copier l'attribut de classe complète et au moins chacun de nos en-têtes de table. Le second, la catégorie, le stock, le prix, et enfin la section d'édition. Si vous vous souvenez du filaire, la première cellule sur la gauche a également une case à cocher pour sélectionner tous nos éléments. Cela va être à l'intérieur du premier titre de table. Juste avant le texte de l'élément, placez dans l'entrée. L' entrée est le type de case et aussi pour donner un peu d'espace au texte qui est juste à côté. Nous pouvons également ajouter la classe pour lui donner une marge sur la droite et la valeur de quatre. Ce que nous avons maintenant, c'est un titre de tableau avec deux éléments d'information. Nous avons les entrées et aussi le texte. Nous devons également faire quelques alignements, faire apparaître cela à côté de l'autre à l'intérieur de la cellule. Nous pouvons ajouter un peu de rembourrage et d'alignement à la section. Je vais juste faire en classe. Nous allons ajouter un peu de rembourrage sur l'axe Y. La valeur de quatre nous donne juste un peu plus d'espace vertical dans. Maintenant, nous devons trouver un moyen de placer la case à cocher à côté de notre texte d'élément. Eh bien, nous pouvons le faire en changeant l'en-tête de la table pour utiliser la flexbox. Rappelez-vous par défaut que la flexbox a la direction flexible de la ligne. Cela signifie que les deux éléments enfants seront placés les uns à côté des autres dans une rangée, laissant notre section de tête maintenant terminée et notre table est maintenant prête à ajouter des données dans la prochaine vidéo. 11. Corps de tableau et divisions: En descendant de la partie de la tête de table et vers le corps où nous pouvons avoir chaque ligne de produits. Vous pouvez également ajouter autant de ces produits que vous le souhaitez. Plus à l'éditeur, et nous pouvons commencer à ajouter la section. Dans la dernière section, nous avons créé l'en-tête du tableau. Si nous localisons la balise de fermeture pour ces éléments, nous pouvons travailler sur la section du corps. Juste en dessous de la tête, ajouter le tbody. Ensuite, placez à l'intérieur d'une classe qui nous donnera la couleur de fond blanc. À l'intérieur de la première rangée avec les éléments tr, la première pièce de données de table contient trois choses. Il contient une case à cocher, donc ajoutez les entrées avec le type de case à cocher. Ça va s'asseoir juste en dessous de celui-là. À côté de notre case à cocher, nous allons ajouter les éléments de l'image, et l'élément image sera l'image, que nous voulons placer à côté de chaque smoothie. Enfin, l'élément p, et allons-y pour le smoothie aux mangues. Oups, c'est juste au-dessus de la table. Nous devons en fait couper tout cet endroit, et les placer dans une cellule qui est td, les données de la table. Placez ceci est dans. Ils devraient maintenant résoudre notre problème. La cellule a également besoin de certaines classes pour les aligner correctement, donc puisque nous voulons que ces trois éléments traversent la page, nous pouvons à nouveau utiliser la flexbox, puis les aligner verticalement en utilisant item-center. Un peu de rembourrage sur l'axe des x, et nous allons aller pour la valeur de six, et aussi le rembourrage y de quatre. La case à cocher est bien telle qu'elle est, et nous allons descendre à l'image et sauter dans le dossier images. Nous avons une image à l'intérieur ici, qui est le mango.jpg, et c'est l'image que je vais placer à côté de cet élément, le texte alt de mangues smoothie, et aussi quelques classes à ces éléments. Pour notre image, nous devons la rendre un peu plus petit, donc nous pouvons le faire avec h-10 pour la hauteur, et aussi la même chose pour la largeur aussi pour garder cela égal. Ensuite, si nous regardons notre image à l'intérieur du navigateur, nous avons également besoin d'un espacement de chaque côté. Nous pourrions le faire avec la propriété de marge sur l'axe des x et une valeur de quatre. À côté de nos textes, nous ajouterons également quelques classes dans les éléments p. Tout d'abord, nous faisons le texte pour être une petite taille, le poids de la police du milieu, la couleur du texte de gris 800. Mais basons sur l'utilisation également de l'utilitaire de suivi plus large que nous avons examiné auparavant, puis une classe que nous n'avons pas utilisée jusqu'à présent, qui est whitespace-nowrap. Vous verrez, dès que nous enregistrons ceci, le texte smoothie mangue apparaîtra sur la même ligne. Cela signifie qu'il arrête l'habillage du texte sur une nouvelle ligne s'il est trop long pour la cellule réelle. Le prochain élément de données est juste en dessous de l'état. Ce sera une étiquette active verte. Allons juste en dessous de notre td, ajoutez un nouveau morceau de données de table. Nous devons également ajouter quelques classes dans cette section. Nous n'allons pas refléter les classes de la première, parce que rappelez-vous, cela devait faire usage de la flexbox pour aligner les trois éléments à l'intérieur, alors revenons vers le bas, et nous pouvons ajouter nos classes. Celui-ci va être text-gauche, text-small, il suffit de le garder cohérent, peu de rembourrage à gauche et à droite de six, suivi plus large, et aussi whitespace-nowrap. À l'intérieur de la cellule, ajoutez un élément span avec le texte d'actif. Pour que cela ressemble plus à un bouton, nous allons aller dans les éléments span et ajouter quelques classes. abord, nous allons changer la couleur du texte pour qu'elle soit verte, nuance de 900, puis décaler cette couleur avec un arrière-plan plus clair. Ceci est également vert, mais la valeur de 100, une valeur de remplissage de quatre sur x, puis pour y, valeur de deux. Puis autour des bords, nous l'arrondissons comme plein. Ça a l'air bien. Aussi, si nous rendons le navigateur plus petit que la largeur réelle de la table, vous remarquerez une barre de défilement en bas. Comme mentionné, il s'agit de la barre de défilement pour faire en sorte que tout le contenu entre en jeu. Nous avons cela parce que si nous allons au début de notre table. Défilons vers le haut. Rappelez-vous que nous avons ajouté un wrapper de section autour de cela, qui a la classe de overflow-x-auto. La section suivante, nous aurons est la catégorie, alors revenez vers le bas. Juste en dessous du dernier élément de données de la table, ajoutez une nouvelle cellule. De là, nous pouvons commencer à garder le style plus cohérent. Nous pouvons récupérer les classes à partir des données de la dernière table. Collez ces dans. Ensuite, entre les balises, nous pouvons ajouter le texte des smoothies. C' est un peu simple. Il contient juste le texte à l'intérieur. Maintenant, nous allons à travers et nous ajoutons la section pour ce doc. En gardant un cohérent, copiez les éléments td complets d'en haut, collez ceci ci-dessous, puis insérez un intérieur d'ici puisque nous ne suivons pas les niveaux de tige pour ces smoothies. Quelle est la prochaine ? On va traverser et regarder. C' est le prix basé dans un nouveaux éléments td avec les mêmes classes. Ajoutez un prix pour notre smoothie. Puis enfin, sur la droite juste en dessous de la section d'édition, ce sera un bouton d'édition. Cela peut également faire usage des mêmes classes afin de coller dans un td. Mais cette fois, cela a aussi besoin d'un lien. Puisque nous n'avons pas de pages vers lesquelles lier, nous pouvons simplement laisser le href vide. Mais nous avons besoin d'ajouter quelques classes pour styliser le texte des modifications. Ensuite, revenons à nos classes, nous pouvons commencer à ajouter une couleur de texte différente, texte indigo 500, et aussi une nuance plus foncée une fois que vous utilisez un survol de cette section. Texte indigo, et cette fois nous irons pour une valeur de 900. Bien. Tout cela fonctionne, et c'est notre premier point. Vous pouvez maintenant aller de l'avant et ajouter autant d'éléments que vous le souhaitez. Nous avons plusieurs images fournies dans le dossier images. Si vous souhaitez vous entraîner, vous pouvez soit taper à nouveau toute cette section, soit copier et coller cette section de ligne complète, puis modifier les détails à l'intérieur. La façon la plus simple de le faire, si nous allons à la section du corps de la table que nous venons de créer. Ensuite, à l'intérieur, nous devons copier directement cette ligne de tableau, donc copier tout le contenu, la balise de ligne de table de fermeture. Copiez ceci. Juste en dessous, il y en a un nouveau juste à l'intérieur, et nous allons le faire une fois de plus. Celui-ci sera pour le smoothie à la fraise. Jetez un oeil. Plutôt que de la mangue, on changera ça pour être de la fraise. Le bouton actif va bien. Cela encore, il a besoin de passer à sa catégorie. Vous pouvez changer le prix si vous voulez, mais je vais juste laisser ça tel quel. Tout ce que nous avons à faire maintenant est juste de changer cette image, alors faites défiler vers le haut. Cette fois, nous voulons changer la source de l'image pour être le strawberry.jpg, et aussi changer l'ancien texte aussi. Nous ne rendrons pas cette vidéo vraiment longue et passons en revue toutes ces options, mais vous pouvez maintenant y ajouter autant de celles-ci que vous le souhaitez, et utiliser les images à l'intérieur du dossier. Mais juste avant de terminer cette vidéo, nous pouvons également ajouter une ligne de séparation entre chacun de nos articles. Nous pouvons le faire si nous localisons la section du corps de table, que nous avons créée au début de cette vidéo à côté de l'arrière-plan, ajouter une classe qui est divisée-y. Tout de suite, lorsque nous enregistrons ceci, nous voyons que la ligne est placée entre chacun de ces éléments. Nous pouvons également changer la couleur de cette division aussi. Tout ce que nous devons faire est d'utiliser le préfixe de division, puis ajouter n'importe quelle couleur. Je vais utiliser gris-200. Cette division est vraiment utile pour ajouter une ligne de séparation entre chacun des éléments enfants à l'intérieur d'ici. Comme vous pouvez le voir, nous pouvons utiliser les divisions horizontales ou verticales en utilisant y ou x. Une chose pratique à propos de cette division, c' est qu'il ne fera qu'ajouter une ligne entre chacun des éléments. Cela n'ajouterait pas de ligne au début ou à la fin, ce qui se produirait si nous utilisions quelque chose comme une bordure inférieure. Si nous voulions également une ligne de division entre la tête de table et le corps de la table, nous pourrions également ajouter la même chose aux classes d'utilitaires, mais cette fois à l'élément parent. Maintenant, dans ce cas, le parent est la table, donc copiez ces deux utilitaires. Les parents, notre tête et notre section corps, c'est la table. Je vais localiser ceci sur les attributs de classe, et ensuite nous pouvons coller dans nos utilitaires. Ensuite, sur la droite, nous pouvons maintenant voir cet utilitaire est placé la division entre la tête et la section du corps. Bien, on va quelque part maintenant. Il y a juste un peu plus de contenu à ajouter juste en dessous de ce tableau. Nous ne pouvons pas continuer à ajouter plus de produits si vous le souhaitez. Puis une fois terminé, je vous verrai dans la vidéo à venir. 12. Section de pagination: Le dernier morceau de contenu sur cette vue mobile sur la droite va être la petite section vers le bas. Nous avons un texte qui indique combien de produits nous montrons, combien de produits nous avons au total, ainsi que la section à retourner entre chacune de ces pages. Sur le petit écran, cela est empilé verticalement, donc nous avons le texte en haut, puis la pagination en bas. Nous devons insérer cette section en bas, donc si nous regardons la balise principale de fermeture, puis juste au-dessus de cette div finale. Nous pouvons ensuite placer dans une nouvelle section pour tout ce contenu, en commençant par les éléments p, qui est le texte. Nous dirons, montrant 10 sur 108 produits. Rappelez-vous, c'est complètement fictif, sorte que vous pouvez changer les chiffres. Ensuite, la liste non ordonnée, notre premier élément de liste, puis chaque page peut être insérée comme un lien. Nous n'avons pas de pages vers lesquelles lier, donc nous pouvons garder ceci vide, et la première est le numéro 1. Copions ceci et collez-le dans pour créer quatre liens différents. À la page numéro 2, page 3, et aussi 4. Sauver. Il y a tout le contenu en bas. Rappelez-vous à partir du filaire qui est à gauche de ce numéro 1, nous avons le support d'angle gauche, puis à droite du numéro 4, nous avons le support d'angle droit. Ce que nous allons faire pour les insérer, c'est d'inclure une travée. Nous allons insérer ceci dans les éléments de la liste et juste au-dessus du numéro 1. Nous pouvons insérer ceci avec une entité HTML, utiliser esperluette LT, et un point-virgule. Pour donner à cela un peu d'espace à notre numéro 1, ajoutez également la classe, qui est margin-right, et la valeur avant. Passons au dernier élément de la liste. Celui-ci va aller après notre numéro 4. La plage, l'entité cette fois est l'esperluette et GT supérieure à, le point-virgule. Cela aura également une certaine marge. Mais cette fois, nous devons le placer sur la gauche. Commençons maintenant à travailler sur la mise en page de cette section, et si nous commençons à l'emballage principal, nous pouvons utiliser la flex-box. Contrôlez cela sur la vue petit et grand écran. Pour le petit écran, comme la plupart du contenu, cela sera présenté sous forme de colonnes. Les éléments seront au centre. Ajoutez un peu d'espacement sur le haut et le bas à la valeur y du rembourrage de six. Un texte sera un peu plus petit, donc nous utilisons text-SM, et aussi un poids plus léger. Le texte juste en dessous est correct, donc nous allons passer à la liste non ordonnée et les numéros doivent être placés sur la page. Cela fera également usage de la flexbox. La direction flexible par défaut est la ligne, ce qui les place sur la page. Nous allons ajouter un peu d'espace dans le texte ci-dessus avec mt-4. Il ne reste plus beaucoup à faire pour cette section, nous allons simplement ajouter un peu d'espace à ces numéros. Nous allons le faire à l'intérieur des éléments A et de la classe de p-2. Nous pouvons également copier ceci et l'ajouter à chacun de nos numéros. Bien, donc juste pour finir cette section, nous allons le mettre en évidence au numéro 1. Ceci est juste pour permettre à l'utilisateur de savoir exactement sur quelle page il sera sur. Comme jamais le fera est en l'ajoutant quelques utilitaires. abord, nous allons changer la couleur du texte pour être gris, une nuance de 100, l'arrière-plan serait bg-indigo-500. Les effets de vol stationnaire, nous allons également en faire une couleur indigo. Eh bien, comme nous l'avons fait avec le bouton d'édition, ce sera une nuance légèrement différente. L' état survol de cet élément, l'arrière-plan, indigo-400, et courir sur les bords avec arrondi plein. Bien. C'est la dernière section que je vais compléter et aussi tout le contenu dont nous avons besoin pour ce projet. l'avenir, ce que nous allons faire est de rendre ce contenu plus approprié pour les écrans de plus grande taille, et aussi d'en apprendre davantage sur les fonctionnalités que Tailwind a à offrir. Juste quelques petites choses cependant, avant de passer à autre chose, en commençant par l'arrière-plan de cette section principale,nous commençant par l'arrière-plan de cette section principale, allons localiser la balise principale d'ouverture, qui est près du haut du corps. C' est ce côté et la section principale. Placez dans une classe, qui va être bg-gris-200. Nous pourrions garder cela simple comme ça si nous le voulions et ajouter une seule nuance de gris ou toute autre couleur. Ou, si nous le voulions, nous pourrions aussi définir cela comme un gradient. Les dégradés sont disponibles en CSS standard et nous permettent de fondre entre deux ou plusieurs couleurs différentes. Vous pouvez aller extrême et se fondre entre deux couleurs opposées, mais je vais garder les choses belles et subtiles et changer entre deux nuances similaires. La façon dont nous pourrions le faire, au lieu de la couleur grise, est de définir l'arrière-plan comme un dégradé, suivi de la direction du dégradé. Le mien va être à r. Cela changera la couleur de gauche à droite. Si vous le vouliez aussi, vous pouvez également changer ceci pour être le haut, le bas ou la gauche, un long chemin pour les combiner aussi. Par exemple, tr serait en haut à droite, et tl serait en haut à gauche avec un espace entre. Nous utilisons ensuite, le vers et de pour définir les couleurs que vous souhaitez utiliser. Pour les rendre tous visibles, ajoutons une valeur rouge et bleue pour commencer. On dira à partir de rouge-200, puis on ira à une valeur bleue de 100. Cela le rend maintenant plus visible. Nous avons la couleur rouge, que nous avons commencé à partir de plus sur la gauche, puis nous passons la bonne direction et transformons ceci pour être la couleur bleue, que nous voyons ici. Mais comme mentionné, je vais garder cela un peu plus subtil et changer les deux pour être gris. Mais n'hésitez pas à jouer avec l'une de ces couleurs ou tout autre morceau de style dans lequel vous voulez. En continuant, nous devons également ajouter un peu d'espace juste au-dessus de ce tableau. Si nous faisons défiler un peu vers le bas, nous pouvons voir que nous avons le conteneur que nous avons créé plus tôt, et cela est utilisé pour envelopper nos boutons. Ajoutez un peu d'espacement, nous pouvons ajouter une marge au bas de cette section avec une valeur de six. Pour compléter cette vidéo, comme nous l'avons fait avec ce numéro 1 en bas, les faits saillants de l'utilisateur sur lequel nous sommes, page 1. Nous allons également mettre en évidence le lien produit en haut. C' est parce que nous sommes sur la page de tous les produits, il est donc logique de faire savoir à l'utilisateur quelle page est active. Remettez cela à l'éditeur et faites défiler le lien du produit tout en haut. Ensuite, à l'intérieur des classes, nous commencerons par ajouter l'arrière-plan pour être gris-500. Cela permet à l'utilisateur de savoir que la page du produit est maintenant active. La configuration du petit écran est maintenant terminée. approche, vous découvrirez plus de ce que Tailwind a à offrir, y compris le design réactif. 13. Modifier la mise en page avec des points de rupture: Le design réactif n'est pas seulement une bonne chose à avoir sur les sites Web modernes. C' est un élément essentiel du développement. Nous devons nous assurer que notre design semble bien sur les petits écrans, directement sur une grande taille de bureau. Heureusement, comme il y a des milliers de tailles d'écran différentes là-bas, nous n'avons pas besoin de créer un design distinct pour chacune de ces tailles. Ce qui, au lieu de cela, nous avons besoin d'appliquer quelques règles raisonnables pour couvrir est pour toutes les tailles d'écran. Sans CSS régulier, nous avons accès aux requêtes multimédias. Une utilisation courante pour les requêtes multimédias est de couper certains styles pour ne s'appliquer qu'à certaines tailles d'écran. Et Tailwind a également des utilitaires intégrés pour ces deux. Une chose importante à comprendre est que toutes les classes d'utilitaires nous avons déjà appliquées s'appliqueront à chaque taille d'écran. Vous pouvez les considérer comme des styles de base généraux. Construire en plus de ceux-ci. Nous pouvons ensuite ajouter des styles spécifiques pour certaines tailles d'écran. En regardant cette rangée supérieure, par exemple, gardez à l'esprit que tous les styles actuels que nous avons s'appliquent à toutes les tailles. Ensuite, une fois qu'un navigateur atteint une largeur de 640 pixels ou plus, nous pouvons ajouter de nouveaux styles ou remplacer ceux que nous avons déjà. Nous voulons peut-être une police plus grande, plus d'espacement ou une modification complète de la mise en page. Pour que ces modifications s'appliquent, nous utilisons les mêmes classes d'utilitaires qu'avant, mais avec le préfixe SM. Puisque nous travaillons avec le mobile first, ces styles s'appliqueront aussi aux écrans plus grands. Sauf si nous les remplacons à nouveau en utilisant un autre préfixe, tel que LG pour les grands écrans. Chacune de ces tailles de navigateur est appelée un point d'arrêt. Puisque c'est le point, nous pourrions changer le style ou la mise en page. Nous savons déjà à partir de ce cadre large à quoi ressemblera la plus grande vue d'écran. Comment décider quand changer la mise en page ? Eh bien, c'est quelque chose que vous devez juger par vous-même en fonction de chaque projet, mais une règle simple est de commencer par un petit écran, puis de mettre à l'échelle le navigateur et d'apporter des modifications lorsque la mise en page commence à paraître trop étirée ou cassé. Pour plus de simplicité, je vais juste faire face à un seul changement de point d'arrêt, qui sera à la grande taille , comme vous le souhaitez. Ses mises en page vont essentiellement passer d'avoir du contenu empilé verticalement, nous avons nos deux sections principales côte à côte. Passant à partir de cette petite vue d'écran, je vais faire un peu plus d'espace, et si nous allons dans les outils de développement avec « Clic droit » et « Inspecter ». Si vous commencez à rendre le navigateur grand ou petit à l'intérieur des DevTools, vous verrez dans le coin supérieur droit, nous pouvons voir à quel point il est large en pixels. Actuellement, la mise en page semble assez fine, quand nous sommes autour de 600 pixels. Si nous sommes jusqu'à 700s, 800s, tout semble toujours bien sur une vue d'écran de tablette souple. Cependant, si nous commençons à obtenir peut-être environ 1 000 pixels ou plus, certains ici, nous pouvons voir, nous commençons à avoir besoin d'un changement de mise en page. C' est cette grande taille d'écran qui est de 1 024 pixels, que je vais utiliser pour créer un changement de mise en page. Fermons ça. Si nous allons dans le code, dans notre page d'index, et nous rappelons que la section du corps en haut contrôle la disposition de nos deux sections principales. C' est le motif pour les deux côtés, qui est cette zone supérieure et aussi le contenu principal aussi. Il contrôle cela à l'aide de la flex-box et les définir actuellement, à une disposition de colonne deviendra des changements pour être une ligne sur des écrans plus grands. La façon de le faire est d'utiliser le préfixe de point d'arrêt et dans mon cas, c'est avec une vue à grand écran. Ensuite, tout ce que nous devons faire est d'ajouter notre classe d'utilité. Cela changera cela pour être ligne flexible et si nous enregistrons cela, actualisez le navigateur, ces deux sections et sont placés dans une rangée. Nous pouvons également voir le point d'arrêt avoir lieu si nous réduisons le navigateur à la plus petite taille. Cela reviendra ensuite à la mise en page de style colonne. Ce que nous devons maintenant faire est de dimensionner nos deux sections, car cela ne couvre pas toute la largeur de la page. Pour dimensionner le côté, et les sections principales. Nous allons utiliser la propriété width. Nous savons que nous pouvons définir la largeur de ces sections en rems, ou une meilleure option pour ces sections est d'utiliser des fractions. Ce que nous devons faire, c'est d'abord localiser l'écart. Ensuite, nous pouvons définir pour la vue grand écran, une largeur égale à 1/4. Descendez. Localisons la section principale. Après cela, ciblant également les vues de grand écran. Cela remplira les 3/4 supplémentaires d'espace. Maintenant 3/4 et 1/4. Allons vivre dans le navigateur. On n'a pas besoin de se rafraîchir. Nous pouvons voir que cela occupe 1/4 de l'espace de l'écran, et ce côté prend la valeur restante. Cela s'étirera également si nous rendons le navigateur plus large ou plus petit pour toujours être en proportion. Maintenant, nous savons que nous travaillons avec l'écran de bureau pleine grandeur. Il serait préférable sur cette vue si tout le contenu était étiré verticalement à toute la hauteur de l'écran. Nous pouvons le faire si nous allons à vous une des sections telles que l' écart et retour dans les classes. Encore une fois, cela ciblera toujours la vue grand écran. Nous pouvons définir la hauteur pour être égale à la hauteur de l'écran. Cela définira la hauteur à 100vh, qui est la pleine hauteur de la fenêtre. Ça a l'air beaucoup mieux. Nous avons maintenant une barre latérale pleine hauteur. Aussi depuis la section principale est long côté est également suivi la pleine hauteur aussi. En ce qui concerne le changement de mise en page principale, vous pouvez ajouter plus de points d'arrêt si vous le souhaitez. Ensuite, nous allons nous concentrer sur le contenu de ces deux sections. 14. Stylisation grand écran: Le cadre y indique sur le grand écran que dans la section de la barre latérale, les liens sont alignés sur le côté gauche. Nous allons commencer là, puis passer à travers le reste des styles d'écran plus grands. Comme nous le savons, ces liens sont à l'intérieur de la section UL parmi le contenu assigné. Localisons. Beaucoup sur une autre liste. Nous avons déjà l'attribut class en place. Tout ce que nous avons à faire est de commencer avec notre style de grand écran. Le petit écran, nous avons déjà un peu d'espace sur l'axe y entre chacun de nos éléments de liste. Nous aurons maintenant plus d'espace disponible. Je vais augmenter cela pour être une plus grande valeur. Espace y, la valeur de huit. Le texte va être aligné à gauche comme nous venons de le voir dans le cadre y. Maintenant, j'ai plus d'espace entre chacun de ces éléments. Nous pouvons également ajouter un peu de marge sur le haut et le bas. Donnez-moi un peu d'espace à partir du titre sur cette icône. Nous allons le faire avec une marge sur l'axe des y et une valeur cohérente de huit. C' est mieux, mais nous devons également aligner l'icône des paramètres. Allons à notre plage qui enveloppe cette section qui est tout en bas sur la liste non ordonnée à l'intérieur des classes ou sur le grand écran seulement. Nous allons définir le text-align pour être à gauche. Bien. Ceci est aligné sur le côté gauche, mais si vous regardez de près, cela est légèrement plus à gauche que le texte réel. Cela nécessite également un rembourrage pour les films en ligne avec le reste du lien juste au-dessus. Pour cela, nous allons ajouter une valeur de remplissage gauche de deux. Garder ceci maintenant en ligne avec le reste des liens ci-dessus. Je pense que la barre latérale a l'air plutôt bien. C' est tout ce qu'il veut faire pour cette section. Maintenant, passons au contenu principal de sur la droite. Puisque nous avons plus d'espace disponible, commençons par un peu de rembourrage autour de cette section. Cette section complète est la section principale, alors allons dans les clusters ici et basculez les grands écrans avec un remplissage d'une valeur de quatre. Ça a l'air un peu mieux. La prochaine chose à faire est de déplacer l'avatar dans le coin supérieur droit. Tout l'avatar de l'utilisateur et aussi le nom d'être dans le coin. Aussi l'éditeur, nous pouvons chercher cette section. On doit aller juste à l'intérieur de la section principale. C' est le premier div au sommet. n'y a pas grand-chose à voir avec cette section car nous avons déjà la propriété flex définie pour cette section. Tout ce que nous avons à faire est de remplacer la mise en page pour la vue grand écran. Nous pouvons le faire en ajoutant justify-end. Déplaçons ça dans le coin supérieur droit. C' est l'équivalent de certitude justifier la propriété de contenu à être égale à flex-end. En descendant, nous avons le titre Tous les produits et aussi les boutons que je vais placer les uns à côté des autres sur la même ligne. Juste un peu plus bas. Avoir notre titre sur ce conteneur pour les boutons. C' est la section div environnante juste ici. Comme nous l'avons dit avec les commentaires plus tôt, c'est le conteneur à la ligne, les boutons et aussi le titre. Ajoutons quelques classes à l'intérieur d'ici. Le grand préfixe sur et comme il fait déjà usage de la boîte flexible et de la colonne flex, tout ce que nous avons à faire est de rendre cette ligne égale à flex. Placons maintenant ces deux éléments sur la même rangée. Mais si vous regardez de près, le titre est un peu plus élevé qu'il ne devrait l'être. C' est à cause d'un rembourrage que nous avons en bas de la vue de petit écran. Pour cet endroit soigné dans un override. C' est la marge d'origine sur le fond que nous avons ici. Nous devons déplacer cela pour la vue grand écran en définissant cela sur zéro. Sauvegardez. Cela corrige les alignements, et aussi maintenant, nous avons un peu plus d'espace à l'écran disponible. Nous pouvons rendre le texte un peu plus grand. Le texte. Allons-y pour extra-large. Bien. Enfin, l'espacement entre ces deux sections. Puisque nous utilisons également cette boîte flexible pour cette section, nous plaçons la valeur de justification entre. J' ai presque eu la section supérieure où je voulais être. Le prochain point de notre liste est ce tableau. La table n'est pas très loin de là où nous en avons besoin. Cependant, cependant, ce serait bien d'être pleine largeur de l'écran. Allons à notre section de table, qui est juste ici, et Tailwind nous fournit une classe appelée min-w-full. Faites de cela la largeur minimale de l'écran. Si vous le vouliez, nous pourrions également placer cela derrière la grande requête multimédia. Mais comme il doit toujours y avoir la largeur minimale de l'écran sur toutes les tailles d'écran, cela semble bon sur la vue petite et grande écran. On y est presque maintenant. La dernière section est ce nombre de produits et les liens tout en bas. Tout ce que je vais faire pour cette section est de placer ces deux éléments sur la même ligne. Dirigez-vous vers le bas du projet. C' est la section wrapper. Comme d'autres sections, puisqu'il utilise également la flexbox et la direction de flexion de la colonne, nous pouvons changer cela pour être la direction de flexion de la ligne. Passons à la même section, mais nous devons encore ajouter un peu d'espacement entre ces deux éléments. De plus, supprimez une partie de la marge par défaut que nous avons en haut de nos liens. Tout d'abord, nous allons traiter de la marge en haut de notre liste non ordonnée, qui est juste ici. On peut remplacer ça. Pour être la marge supérieure zéro pour la vue large, ce qui signifie, tout ce que nous devons faire maintenant est de justifier l'espace pour être entre ces deux éléments. Nous le faisons sur l'emballage. À la toute fin, juste après que nous avons défini la ligne flex-à l'utilitaire grand écran de justifier entre, et c'est maintenant exactement comme nous le voulons. Tout cela est maintenant fait pour la vue grand écran. Vous pouvez voir à quel point il est facile de modifier une mise en page et un contenu avec seulement quelques remplacements. 15. Utiliser les CSS et directives personnalisées: Vous les classes d'utilitaires Tailwind nous a couverts pour la plupart des cas d'utilisation. Ceci est assez flexible car généralement, une classe d'utilitaire Tailwind est égale à une propriété CSS. Et si nous voulions aussi ajouter le nôtre ? C' est également tout à fait possible. Nous pouvons le faire en créant nos propres feuilles de style. Dans le projet et ouvrez la barre latérale. Ensuite, à côté de notre page Index, créez un nouveau fichier. Celui-ci est le custom.css. Assurez-vous que cela est à côté du reste des fichiers et dossiers. Ensuite, à l'intérieur ici, nous pouvons ajouter n'importe quelle classe à titre d'exemple. Appelons cela la coutume qui définira la couleur pour être orange. C' est juste CSS normal comme nous l'écririons normalement quand nous n'utilisions pas Tailwind, et cela définira la couleur du texte à être orange. Ensuite, tout comme un projet HTML et CSS régulier, nous pouvons l'inclure dans la section tête avec un lien. Il suffit de souffler notre fichier CSS Tailwind, ajouter un nouveau lien. Le href est juste le custom.css Cela devrait maintenant être notre lien de fichier et nous pouvons tester cela. Allons pour notre titre de niveau un et ajoutons la classe de personnalisé. Donnez ceci une sauvegarde et plus au navigateur. Maintenant, nous pouvons voir instantanément que cette classe orange personnalisée s'est appliquée à notre texte. Cela fonctionne et si vous le souhaitez, vous pouvez inclure plusieurs feuilles de style dans un projet. Parfois, certains plug-ins ou bibliothèques ont leur propre feuille de style que vous devez ajouter et vous pouvez le faire de cette manière exacte. Ou si vous le souhaitez, au lieu d'avoir nos fichiers séparés dans le fichier CSS de son client, nous pourrions plutôt fusionner ces styles personnalisés dans le fichier Tailwind. Nous pouvons le faire avec une commande de terminal. Si vous n'avez pas encore de terminal ouvert, accédez au terminal, puis au nouveau terminal dans un code Visual Studio. Ensuite, à partir d'ici, nous allons apprendre une commande Tailwind, qui est npx tailwindcss. N' oubliez pas que nous utilisons n'importe quelle interface de ligne de commande arrière pour cela. Ce que nous devons faire ensuite est -i, puis y placer le chemin du fichier pour deux feuilles de style différentes. Le premier va l'être. /, et c'est le custom.css. Cela pointe vers notre fichier CSS personnalisé que nous venons de créer. Ensuite, nous utilisons -o, suivi du chemin du fichier vers notre CSS Tailwind. Ce que cela fera, cela va fusionner notre fichier personnalisé dans le fichier Tailwind alors appuyez sur « Entrée » et nous pouvons exécuter cette commande à l'intérieur du terminal. Localisez ceci. notre fichier personnalisé et nous pouvons toujours voir que notre classe personnalisée est en place. Cependant, si nous allons à notre fichier tailwind.css plutôt que tous les milliers de classes que nous avions auparavant, tout cela est complètement supprimé et remplacé par notre CSS personnalisé. Nous pouvons également voir cela si nous allons au navigateur aussi, nous n'avons aucun des styles Tailwind. Nous avons juste notre couleur orange personnalisée pour la rubrique. Évidemment, ce n'est pas juste. Nous avons besoin d'un moyen de fusionner nos styles personnalisés avec les classes Tailwind originales. Ce que nous devons faire est d'aller à notre fichier CSS personnalisé, puis autre haut nous devons importer Tailwind. Pour importer Tailwind, nous avons diverses directives Tailwind, toutes qui commencent par le symbole at. Nous avons @tailwind, suivi de quelle partie de Tailwind nous voulons importer. Le vent arrière est organisé en différentes sections. Rappelez-vous plus tôt, nous avons dit que Tailwind a un ensemble de styles de base, qui inclut des choses comme les réinitialisations et les styles pour rendre notre site plus cohérent sur différents navigateurs. Eh bien, pour commencer, nous pouvons importer ces styles de base avec base. Après cela, nous allons également inclure la même directive Tailwind, mais cette fois nous allons importer les composants. Nous allons examiner les composants très bientôt, mais ensuite, nous allons opter pour les utilitaires, la même directive Tailwind, et importer les classes d'utilitaires. Enfin, nous pouvons importer les écrans. Screens est les utilitaires Tailwind supplémentaires qui commencent par ces préfixes d'écran. Par exemple, si nous avions un préfixe commencer par SM pour les petits écrans, ou LG pour les grands écrans. La directive Screens est facultative. Si nous l'oublions, il sera automatiquement ajouté à la fin du fichier. Nous n'avons vraiment besoin d'inclure cela que si nous avions un cas d'utilisation pour réorganiser ce CSS. Maintenant, si nous retournons au Terminal et exécutons cette même commande, appuyez sur « Up », il est entré pour exécuter ceci, puis dans notre fichier CSS Tailwind, puis jusqu'au bas de ce fichier et nous voyons notre CSS personnalisé vers le bas. n'y a que 800 lignes donc j'ai pensé qu'on avait un problème juste à l'intérieur. Comme notre style personnalisé à la fin, nous avons les écrans, ceux-ci devraient juste être des utilitaires. Enregistrez ceci et puisque j'ai fait une erreur d'orthographe, j'ai également besoin de réexécuter cette commande dans le terminal. C' est fait. Revenons à notre dossier Tailwind. Vous pouvez voir que nous avons beaucoup plus de styles qui sont maintenant plus en ligne avec le fichier Tailwind original. Jusqu' au bas de ce fichier est notre classe personnalisée placée à la toute fin. Cela a été ajouté dans le même ordre que vous avez ajouté tous ces éléments dans notre fichier personnalisé. Ensuite, revenez au navigateur et les styles Tailwind ont maintenant été réappliqués. Nous pouvons également supprimer notre fichier CSS personnalisé, les enregistrer dans le navigateur et notre couleur orange s'appliquera toujours car elle n'est pas fusionnée avec notre CSS Tailwind. C' est ainsi que nous pouvons créer nos propres feuilles de style personnalisées et l'inclure avec Tailwind. Ensuite, nous allons découvrir plus de directives, aider à organiser nos styles. 16. Les directives @layer & @apply: Précédemment dans le fichier généré par Tailwind. En bas, nous avons ajouté notre propre classe personnalisée qui est construite. Tout cela fonctionne très bien et c'est bon pour beaucoup de cas d'utilisation, mais nous commençons à gâcher avec l'ordre des groupes de vent arrière créés par les catholiques. A l'intérieur de notre fichier personnalisé ici, nous avons tous ces groupes de vent arrière juste ici. Le CSS Tailwind est généré dans le [inaudible] remplacer ces dans, puis notre classe personnalisée est tout en bas. Une façon de changer l'ordre du fichier généré est de déplacer nos classes comme ceci, afin que nous puissions déplacer notre fichier personnalisé à peut-être juste au-dessous des styles de base. Si nous devions enregistrer ceci et aller au terminal, puis relancer notre commande de génération, cela va alors régénérer notre fichier Tailwind basé sur cette nouvelle commande. Une fois cela fait, si nous allons au fichier Tailwind et maintenant plutôt que d'être au fond, nous ne voyons pas notre coutume. Alors faisons une recherche. Cela a maintenant été déplacé vers la ligne 603, qui est juste en dessous de tous ces styles de base. Cela pourrait nous aider si nous avons besoin de déplacer quelques CSS autour, peut-être pour éviter tout remplacement ou simplement généralement pour le placer dans l'ordre que vous voulez. Une alternative à cela est Tailwind fournit également une directive pour aider avec cela, nous pouvons affecter notre classe personnalisée à être groupée avec l'une de ces sections. Si notre classe personnalisée était basée sur un utilitaire d' un composant ou si nous voulions juste un style de base pour notre projet, nous pourrions le fusionner dans l'un de ces groupes. La façon de le faire est avec la directive de couche, donc nous créons la couche en utilisant le symbole at suivi du nom du groupe dans lequel vous voulez la fusionner. Allons pour une base pour cet exemple, puis ouvrons un ensemble d'accolades pour insérer notre code personnalisé. Nous pouvons saisir notre classe personnalisée d'avant et ajouter cela à l'intérieur de notre couche. Cela peut contenir autant de règles CSS que nous voulons inclure, donc nous pourrions continuer, en ajoutant différentes classes et celles-ci seront toutes fusionnées. Non, enregistrez ce fichier et, encore une fois, dans un terminal, régénérez ceci. C' était notre fichier Tailwind, c'est sur la ligne 603 avec nos styles de base. Si nous essayons de changer cela, peut-être des composants puis relancez nos commandes de terminal. Voyons ce qui se passe après ça. Une fois cela fait et de retour à notre fichier Tailwind, faites encore une fois notre recherche pour une coutume et cela a maintenant été déplacé vers la ligne 637, fusionné avec le reste des composants. Ceci est utile pour réorganiser nos classes personnalisées. Une autre directive utile s'applique et nous l'utilisons pour créer nos propres composants réutilisables. Voyons ça, faisons un peu de nettoyage. Nous pouvons supprimer cette section personnalisée d'avant et aussi dans notre page d'index, regardons notre classe personnalisée. Ceci est juste à l'intérieur de notre titre de niveau 1 et la couleur orange a maintenant été supprimée. Retour à cette directive d'application et ceci est utilisé pour résoudre un problème avec l'utilisation de Tailwind. Le problème est que notre fichier HTML peut être vraiment rempli avec des données et beaucoup de noms de classe différents. En outre, nous dupliquons souvent les mêmes classes sur plusieurs éléments. Un exemple de ceci est tous ces liens dans la barre latérale. Jetons un coup d'oeil à notre inventaire, par exemple, et nous mettons en évidence toutes les classes ici. On peut voir qu'on l'a utilisé plusieurs fois. Nous les avons utilisés pour les commandes, faisons défiler vers le bas, nous les avons utilisés pour l'analyse, pour les clients, pour les coupons, nous avons beaucoup de code dupliqué à l'intérieur d'ici. La directive appliquée nous donne la chance de retirer toutes les classes HTML et de créer une configuration de type composant réutilisable. La façon de le faire, si nous copions toutes ces classes à partir d'un de nos liens, copiez-les puis passez à notre fichier CSS personnalisé. Nous pouvons commencer par donner à cela un nom de classe de notre choix, alors allons-y pour nav-link. Cela ressemble un peu à une configuration CSS normale , mais ce que nous devons faire à l'intérieur est d'ajouter la directive apply. Après cela, collez dans les classes utilitaires que vous voulez inclure, ajoutez un point-virgule à la fin, puis descendez à notre terminal, réexécutez la même commande, donnez quelques secondes à exécuter et cela devrait insérer ceci dans notre fichier Tailwind. Copions notre lien Nav-link vers notre fichier Tailwind, commande ou contrôle F2 fichier de recherches, collez-le dans, et maintenant avons notre lien Nav-link vers le bas. Nous avons le rayon de la frontière, que nous pouvons voir si nous allons dans notre section ici. C' est la section arrondie, nous avons un rembourrage, nous avons des couleurs de texte, et nous avons aussi ces effets de survol aussi. Nous pouvons voir à l'intérieur de notre fichier Tailwind que ces effets de survol ont été générés comme notre remplissage, comme nos couleurs, et aussi la couleur de l'effet de survol aussi. Maintenant, ce que nous pouvons faire est d'aller à notre page d'index et plutôt que d' avoir toutes ces classes insérées, nous pouvons ensuite utiliser notre classe personnalisée, nous venons de créer, qui était nav-link, et ensuite nous pouvons l'utiliser à la place de tous les le reste des classes juste au-dessus. L' analyse, les clients, l'inventaire, les commandes. Veillez à ne pas ajouter cela aux éléments de portée et nous avons les produits. Je pense que c'est toutes les sections que nous devons remplacer et maintenant si nous sauvegardons cela et revenons au projet, assurez-vous que le navigateur est rechargé et que toutes les mêmes classes s'appliquent toujours. Nous pouvons le confirmer si nous supprimons le lien de navigation de l'un de ces éléments et cela a maintenant supprimé le CSS. Restons simplement cela et pour réorganiser cela, nous pouvons également l'ajouter dans le groupe de composants en l'entourant dans la directive de couche. Tout comme nous l'avons regardé précédemment, allez dans notre fichier personnalisé, puis mettez notre place, notre section d'avant, notre section d'avant, ajoutez la directive de couche, et nous allons placer cela à l'intérieur de nos composants, regardez la accolades, puis nous pouvons coller la section complète avant de retour à l'intérieur. Jusqu' au terminal, exécutez la commande rebelle. Essayons cela dans le navigateur, actualisons. Nous ne devrions voir aucun changement car tout ce que nous avons fait est de déplacer ceci dans la section composant du fichier CSS Tailwind. 17. Utilitaires de lecteur d'écran: Bienvenue de retour. Cette vidéo va jeter un oeil à quelques utilitaires de lecteur d'écran utiles. Je suis actuellement à l'intérieur de la documentation Tailwind et dans la section lecteurs d'écran, que vous pouvez également trouver sous Accessibilité. Les lecteurs d'écran sont importants pour l'accessibilité et ils lisent tout le contenu de notre page Web, les utilisateurs malvoyants. Donc, si un utilisateur a une déficience visuelle et qu'il ne peut pas voir notre site Web comme prévu, il peut utiliser un lecteur d'écran pour lire le contenu. Nous avons deux classes d'utilitaires de lecteur d'écran que Tailwind fournit. Le premier est SR seulement, et SR seulement l'élément élevé de la vue. Mais il reste toujours en place pour permettre à un lecteur d'écran de lire le contenu. Nous pouvons alors utiliser Not SR seulement et celui-ci va essentiellement annuler ce que nous venons de cacher et de rétablir à l'intérieur du navigateur. Donc, sur le projet, nous allons jeter un oeil à la façon de faire cela à l'intérieur de la table, bouclés à l'intérieur de nos lignes, nous avons ce bouton Modifier à la toute fin. Donc, nous n'avons peut-être pas besoin de ce titre d'édition en haut. C' est parce que, pour un utilisateur non malvoyant, ces boutons d'édition sont probablement suffisants pour leur dire quoi faire. Ce que nous pouvons faire est de cacher cette rubrique en haut, tout en permettant à un lecteur d'écran de lire si nécessaire. Faisons-le en localisant notre table. Descendez à la section requise et à l'intérieur de la tête de table, nous devons aller à la fin de cette section pour trouver notre texte Modifier juste ici. À l'intérieur des clusters, nous pouvons utiliser la classe de verrouillage SR uniquement. Enregistrez ceci et cette rubrique est maintenant cachée de la vue, mais elle sera toujours lue par les lecteurs d'écran. Rappelez-vous que nous avons aussi la classe Not SR seulement 2, qui va annuler cela. Cela peut également être utilisé pour afficher et masquer le contenu sur différentes tailles d'écran, mais nous n'en avons pas besoin pour notre cas d'utilisation. C' est juste un petit changement, mais cela pourrait être vraiment utile dans votre site, si nous avons une section que nous devons cacher, nous garderons toujours en place pour les lecteurs d'écran. 18. Déploiement: Une fois que nous avons terminé nos sites et que nous sommes satisfaits du contenu, nous pouvons alors déployer le site à l'aide d'un service tel que Netlify. Si vous le souhaitez, vous pouvez apporter d'autres modifications et personnalisations à ce projet. D' abord, je vais juste le laisser tel quel. Netlify facilite la mise en œuvre de nos projets sur le web. Pour l'utiliser, rendez-vous sur netlify.com, c'est gratuit. Si vous ne l'avez pas utilisé auparavant, vous devrez créer un nouveau compte gratuit avec ce lien d'inscription en haut. Une fois que vous vous êtes connecté, vous serez pris dans une zone d'administration, qui devrait ressembler à ceci. Si vous avez un site actuel que nous avons utilisé dans le passé, cela sera disponible à partir de ce lien sur le haut. Pour ajouter un nouveau site à Netlify, nous avons quelques options différentes. Si vous utilisez GitHub, vous pouvez utiliser ce bouton en haut et le lier à votre référentiel. Cela a l'avantage de mettre à jour automatiquement chaque fois que nous poussons des modifications à ce dépôt. Ou un moyen vraiment simple si vous n'avez pas de configuration de référentiel est de simplement glisser sur notre dossier de projet. Cela va aller de l'avant et construire nos sites, puis nous donner un lien vers le haut, que nous pouvons cliquer sur pour ouvrir à l'intérieur d'un nouvel onglet. S'ouvre. Cela nous donnera un lien de site web en direct que nous pouvons partager avec vos amis et votre famille. Vous pouvez voir à quel point il est facile et rapide de déployer votre site à l'aide de Netlify. Nous pouvons également modifier cette URL. Si nous allons dans les paramètres du domaine, cliquez sur les « Options », nous pouvons modifier le nom de notre site, disons Mon super projet, et ensuite nous pouvons enregistrer cela. Maintenant, nous pouvons cliquer sur cela, ouvrir cela dans un nouvel onglet. Cela indiquera également notre projet. Si vous souhaitez accéder à un domaine personnalisé afin que nous n'ayons pas l'application Netlify à la toute fin, vous pouvez également suivre les étapes pour le faire avec le bouton Ajouter un domaine personnalisé. C' est ça. C'est à quel point il est facile de déployer un site statique à l'aide de Netlify.