Créez un site Web avec React et Tailwind CSS

Ce tutoriel montre comment créer un site Web de produit à l'aide de React et Tailwind CSS. Nous couvrirons comment configurer React avec Tailwind CSS à l'aide de Create React App Configuration Override (CRACO); Les classes et variantes des utilitaires CSS de Tailwind et comment les utiliser; Comment rendre facilement le site Web Dark Mode compatible; quels groupes sont; et comment activer les variantes.

Vous pouvez afficher une démo du site Web que nous créons ici, et vous pouvez trouver le code de ce référentiel sur ce référentiel GitHub.

Les plats clés

• Utiliser Créer React App et Craco pour configurer REACT avec le vent arrière CSS efficacement, en évitant les complexités de la configuration manuelle.
• Tirez le parti de classes et variantes des utilitaires CSS à vent arrière pour styliser facilement les composants sans écrire des CS personnalisés étendus.
• Implémentez le mode sombre avec des modifications de configuration simples dans le vent arrière CSS pour s'adapter aux préférences du système d'exploitation de l'utilisateur.
• Explorez la puissance des classes de services publics pour une conception réactive et des pseudo-classes, ce qui rend le style plus dynamique et flexible.
• Personnaliser le thème de Tailwind pour répondre aux besoins de marque en modifiant les couleurs, les polices et autres éléments directement dans le fichier de configuration.
• Utilisez des plugins CSS à vent arrière et étendez des fonctionnalités pour inclure des styles, des services publics et des composants personnalisés supplémentaires.
• Activer des variantes CSS de vent arrière spécifiques pour les états de survol et les ajustements réactifs, améliorant les aspects interactifs et réactifs du site Web.

Prérequis

Avant de commencer, vous devez faire installer Node.js et NPM. Si vous avez installé Node.js, vous aurez installé NPM.

Pour vérifier si le nœud est installé, exécutez ce qui suit dans la ligne de commande:

<span>node -v
</span>

Vous devriez pouvoir voir la version. Faites de même pour NPM:

<span>npm -v
</span>

Il convient de noter que le vent arrière CSS nécessite Node.js version 12.13.0 ou plus.

Si vous obtenez une erreur pour l'un ou l'autre, vous devez installer le nœud. Vous pouvez suivre les instructions d'installation sur le site Web du nœud, ou vous pouvez suivre notre article «Installation de plusieurs versions de Node.js à l'aide de NVM».

Configuration de la réaction et du vent arrière CSS

Remarque: Si vous n'êtes pas familier avec Create React App, consultez "Créer une application React: OBTENEZ REACT PRÉPARTE Tout d'abord, créez un projet React avec Create-React-App:

Ensuite, modifiez le répertoire au projet créé:

npx create-react-app react-shop

Ensuite, nous allons installer les dépendances requises pour le vent arrière CSS:

<span>cd react-shop
</span>

Nous installons CSS Tailwind avec la construction de compatibilité PostCSS 7, car Create React App (ou CRA) ne prend pas en charge PostCSS 8 au moment de la rédaction de cet article. Nous installons également AutopRefixer, car il est nécessaire pour CSS à vent arrière après la version 2.0.

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Configuration de Craco

Généralement, pour configurer l'ARC, vous devez exécuter l'éjection de réactions ou les NPM Exécuter avec les scripts par défaut de l'ARC. Cependant, cela est très gênant, car il éjectera toutes les configurations qui sont cachées dans l'ARC (comme les configurations WebPack, les configurations Babel, les configurations PostCSS, et bien plus encore) dans votre projet, et la modifier peut devenir un problème ou produire des problèmes de l'ARC ne pourra plus soutenir.

C'est là que la création de la configuration de l'application React Override (ou Craco) est disponible. Craco est une bibliothèque qui ajoute une couche de configuration simple à l'ARC. Au lieu d'éjecter toutes les configurations à l'intérieur de l'ARC dans votre projet - par exemple, juste pour ajouter une configuration à WebPack - toutes les nouvelles configurations ou modifications à la configuration d'origine seront placées dans un nouveau fichier craco.config.js. Craco vous permet de configurer l'ARC pour en tirer le meilleur parti sans les tracas.

Nous avons besoin de Craco ici pour remplacer les configurations PostCSS et ajouter le plugin TailwindCSS. Alors, installons d'abord:

<span>node -v
</span>

Lors de l'utilisation de l'ARC, les scripts de package.json ressemblent à ceci:

<span>npm -v
</span>

Comme nous utilisons Craco pour faire ce que nous ne pouvons pas faire avec l'ARC par défaut, nous devons modifier les scripts pour utiliser Craco pour construire le projet ou l'exécuter en développement:

npx create-react-app react-shop

Nous avons remplacé React-Scripts par Craco dans les scripts de début, de construction et de test. Nous n'avons apporté aucune modification au script d'éjection.

Ensuite, créez le fichier de configuration Craco craco.config.js à la racine du projet:

<span>cd react-shop
</span>

Ce fichier de configuration ajoute les plugins tailwindcss et autoprefixer à postcss.

Maintenant, nous générerons le fichier de configuration de Tailwind CSS:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Remarque: Si vous utilisez Node.js V14, il y a un problème rapporté sur une erreur lancée lors de l'exécution de cette commande qui dit "Impossible de trouver le module" Autoprefixer "". La mise à jour de Node.js v15 devrait fonctionner, mais si vous ne pouvez pas le faire, veuillez suivre l'une des solutions de contournement ici.

Cela créera le fichier tailwind.config.js dans la racine du projet. Il aura le contenu suivant:

<span>npm install @craco/craco
</span>

Voici ce que signifie chacune des touches de configuration:

1. Purge: Ceci est utilisé pour spécifier les fichiers que Tailwind CSS doit scanner et voir quelles classes CSS de vent arrière sont utilisées, afin de supprimer tous les styles et classes inutilisés en production.
2. DarkMode: Cela spécifie le comportement du mode sombre dans votre projet. La valeur peut être un média - ce qui signifie que le style de mode sombre sera appliqué en fonction de la requête multimédia en mode sombre, qui dépend du mode par défaut pour le système d'exploitation de l'utilisateur. Il peut également s'agir d'une classe, ce qui signifie que le style de mode sombre sera appliqué lorsqu'un élément parent du document HTML a la classe sombre.
3. Thème: Cela peut être utilisé pour modifier la palette de couleurs du thème, des polices, des points d'arrêt, etc. Nous verrons comment apporter des modifications au thème plus tard dans le tutoriel.
4. Variantes: Cela vous permet d'appliquer des variantes supplémentaires aux plugins principaux du vent arrière CSS. Nous verrons comment cela fonctionne plus tard dans le tutoriel.
5. Plugins: une section pour ajouter des plugins qui peuvent ajouter des classes d'utilité supplémentaires, des variantes personnalisées, des styles de base ou plus.

Pour l'instant, nous allons simplement apporter deux modifications. Tout d'abord, nous allons changer la clé de purge:

<span>node -v
</span>

Cela indique à Tailwind CSS de passer à travers tous les fichiers JS, JSX, TS et TSX dans le répertoire SRC et le fichier public / index.html pour déterminer quelles classes seront utilisées à partir de Tailwind CSS et supprimez toutes les classes inutilisées.

Le deuxième changement sera pour le mode sombre:

<span>npm -v
</span>

Pour des raisons de simplicité dans ce tutoriel, nous garderons le mode sombre uniquement en fonction de la préférence du système d'exploitation de l'utilisateur.

La dernière étape de la configuration de notre projet React avec Tailwind CSS est d'inclure certains des styles CSS de vent arrière dans SRC / index.css. Remplacez le contenu de ce fichier par ce qui suit:

npx create-react-app react-shop

La directive @tailwind importe essentiellement les styles dans index.css. Et par défaut, CRA importe Src / index.css dans src / index.js:

<span>cd react-shop
</span>

Cela signifie que les styles CSS du vent arrière seront appliqués dans notre projet React, et nous sommes prêts à commencer à construire un beau site Web!

Comprendre les utilitaires et variantes CSS du vent arrière

Avant d'entrer dans le codage, comprenons ce que sont les classes et variantes des utilitaires CSS de vent arrière. Tailwind CSS est conçu pour faciliter les composants de style et vous aider à vous concentrer sur la fabrication de composants réutilisables. Les classes de services publics sont un large éventail de classes qui vous permettent de styliser votre composant de toutes les manières à penser sans écrire de CSS.

Par exemple, pour styliser un élément avec une bordure, changer la taille de la police, changer l'arrière-plan et la couleur du texte, vous devrez écrire quelque chose comme ça avec CSS:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

À l'aide de CSS de vent arrière, vous pouvez le faire simplement en utilisant les classes de services publics:

<span>npm install @craco/craco
</span>

Voici ce que chaque classe signifie dans cet exemple:

1. Border: définit la largeur de la bordure à 1px
2. Border-Red-100: Définit la couleur de la bordure à une nuance de rouge (basée sur le thème)
3. text-lg: donne la taille de la police 1.125rem et la hauteur de ligne 1.75rem
4. BG-RED-400: Définit la couleur d'arrière-plan sur une nuance de rouge (basée sur le thème)
5. Text-blanc: définit la couleur du texte sur blanc

Il existe de nombreuses autres classes que vous pouvez utiliser, avec de nombreuses nuances de couleurs différentes, ce qui facilite le thèse. En utilisant les cours d'utilité, vous avez rarement besoin d'écrire des CSS.

D'accord, mais qu'en est-il des requêtes avec les médias? Qu'en est-il des cours PSUedo? Et le mode sombre? Cela peut-il être fait sans avoir à écrire un CSS vous-même?

C'est à ce moment que les variantes entrent. Les variantes vous permettent d'ajouter du style aux éléments en fonction des points d'arrêt de l'appareil, des états d'éléments, ou si le mode sombre est activé ou non.

Donc, auparavant, vous l'avez peut-être fait pour modifier la largeur d'un élément basé sur la taille de l'appareil:

<span>node -v
</span>

Avec CSS de vent arrière, cela peut être fait simplement comme ceci:

<span>npm -v
</span>

Cela applique la classe W-1/2 (qui signifie largeur: 50%) Lorsque la largeur min: 1025px s'applique à la largeur de l'écran actuelle, applique la classe W-3/4 (qui signifie largeur: 80%) lorsque Min -Width: 768px s'applique à la largeur de l'écran actuelle et s'applique à la classe W-Full (ce qui signifie la largeur: 100%;) lorsque les autres variantes ne s'appliquent plus.

Cela rend définitivement le travail fastidieux que vous devez faire dans chaque projet plus facile et plus rapide. Au début, cela peut sembler déroutant, mais lorsque vous commencez à vous attaquer davantage, vous vous rendrez compte comment il devient une seconde nature d'utiliser les classes et variantes des services publics.

Vous pouvez en savoir plus sur la configuration du vent arrière dans la documentation officielle du projet.

Implémentation de nos composants

Retour sur notre site Web. Nous créons un site Web simple qui affichera des produits dans une conception soignée. Pour plus de simplicité, nous utiliserons de fausses données de la fausse API de magasin. Au lieu d'effectuer réellement les demandes de l'API, nous prendrons un exemple de réponse JSON et le placerons dans un fichier JSON dans notre projet. Encore une fois, c'est juste pour la simplicité du tutoriel.

Accédez au point de terminaison des produits et copiez la réponse. Ensuite, créez le fichier src / data / produit.json et collez la réponse. Ce devrait être un tableau d'objets similaires à ceci:

npx create-react-app react-shop

Commençons par implémenter le composant de produit. Ce composant sera un composant de carte qui affiche des informations sur le produit. Créez SRC / Components / Product.js avec le contenu suivant:

<span>cd react-shop
</span>

Comme vous pouvez le voir, le composant produit affiche simplement les détails du produit. Nous n'avons ajouté aucun cours de style pour le moment.

Ensuite, accédez à Src / App.js et modifiez le contenu par ce qui suit:

<span>node -v
</span>

Ici, nous importons le fichier ProductS.json en tant que produits. Ensuite, nous enroulons sur les produits et affichons chaque produit en utilisant le composant de produit que nous avons créé plus tôt. Encore une fois, remarquez que nous n'avons ajouté aucun cours de style.

Commençons le serveur maintenant. Exécutez la commande suivante:

<span>npm -v
</span>

Vous verrez qu'il y a juste un tas de texte, mais pas de style.

Ajout de la couleur d'arrière-plan

Commençons par ajouter du style. Tout d'abord, nous modifierons la couleur d'arrière-plan de la page. Pour ce faire, nous utiliserons les classes de couleur de fond de Tailwind. Les classes de couleur d'arrière-plan sont dans le format BG- {Color} - {NumericsCale}, où NumericsCale est facultatif.

Les couleurs par défaut peuvent être blanches, noir, gris, rouge, bleu, vert, jaune, orange, indigo, violet et rose. L'échelle numérique définit l'ombre de la couleur, où 50 est la teinte la plus légère et 900 est la plus sombre. Par exemple, si vous voulez que la couleur d'arrière-plan soit rouge clair, vous pouvez utiliser BG-red-200.

Dans notre site Web, nous allons définir la couleur d'arrière-plan pour être gris clair, nous allons donc ajouter la classe BG-GRAY-200

npx create-react-app react-shop

Si vous consultez le site Web maintenant (si vous n'avez pas encore le serveur, assurez-vous de l'exécuter à nouveau), vous verrez que l'arrière-plan a changé en une nuance légère de gris.

Modification de la largeur du contenu

La prochaine chose que nous allons faire est de modifier la largeur du contenu à 50% de la largeur réelle de l'écran lorsque la largeur de l'écran est d'au moins 768px, mais gardez-la pleine largeur sur les petits appareils. Nous utiliserons les cours de largeur de Tailwind, ce que nous avons passé avant un peu. Les classes de largeur sont dans le format w- {size}, où la taille peut être une plage de 0 à 96, ce qui fait référence à une valeur dans REM; un rapport comme 1/2 ou 3/5, ou d'autres ratios qui se réfèrent à un pourcentage; ou un mot-clé comme l'auto pour la largeur automatique ou complet pour une largeur de 100%.

Pour spécifier la largeur en fonction d'une taille d'écran, nous utilisons des variantes comme SM, MD, LG, etc. Ces variantes spécifient la taille minimale de l'écran requise pour qu'une règle soit appliquée.

Dans notre cas, car nous voulons que la largeur soit de 50% du parent pour les écrans ayant une largeur d'au moins 768px, nous utiliserons la variante MD avec W-1/2:

<span>node -v
</span>

La largeur sera désormais modifiée pour être la moitié de la largeur de l'écran. Cependant, il fera de bien mieux le centrer horizontalement. Pour ce faire, nous utiliserons les cours d’utilitaire de marge de Tailwind. Les classes de marge sont au format m {côté} - {valeur}, où le côté est facultatif et peut être spécifique à chaque côté de l'élément comme t pour le haut, B pour le bas, L pour gauche et r pour droit ou spécifique Horizontalement en utilisant y, ou en utilisant verticalement x. La valeur peut être dans la plage de 0 à 96, peut être PX pour seulement 1px ou auto. Non seulement cela, mais vous pouvez également ajouter une marge négative en ajoutant - au début de la classe. Par exemple, -m-2.

Puisque nous centringons l'élément horizontalement, nous utiliserons MX-Auto:

<span>npm -v
</span>

et vous pouvez voir qu'il est centré.

Styler le composant produit

Passons maintenant au composant produit. Nous ajouterons également une couleur d'arrière-plan pour la carte du produit. Nous allons le rendre blanc pour que nous utiliserons BG-White. Nous allons également le faire pleine largeur afin que nous utiliserons W-Full. Pour séparer les cartes de produit les unes des autres, nous ajouterons un fond de marge aux éléments à l'aide de MB-5:

npx create-react-app react-shop

et vous pouvez voir le changement sur le site Web:

Comme vous pouvez le voir dans notre composant de produit, à l'intérieur de l'élément le plus extérieur, nous avons deux éléments, l'un ayant une image d'arrière-plan du produit et une autre ayant les informations. Nous voulons les afficher l'un à côté de l'autre. La première chose que nous devons faire est de modifier l'affichage du

le plus externe pour fléchir. Pour ce faire, nous utiliserons les cours d'affichage de Tailwind. Contrairement aux classes précédentes que nous avons mentionnées, les classes d'affichage n'ont pas de format. Ils sont juste le nom de l'écran que nous voulons. Donc, pour modifier la propriété d'affichage d'un élément en flexion, il suffit d'ajouter la classe Flex:

<span>cd react-shop
</span>

Ensuite, nous modifierons la largeur des éléments en utilisant les classes de largeur comme précédemment:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Si vous consultez le site Web maintenant, vous verrez que l'image et le texte sont maintenant côte à côte.

ajoutant de l'espacement

Il y a encore beaucoup à réparer. Tout d'abord, ajoutons un peu de rembourrage pour le conteneur d'informations sur le produit. Pour ce faire, nous utiliserons les cours de rembourrage de Tailwind. Les classes de rembourrage sont exactement similaires aux classes de marge que nous avons vérifiées plus tôt, sauf que nous utilisons P au lieu de m.

Ainsi, nous allons ajouter du P-5 au conteneur des informations du produit. Nous allons également ajouter une marge au conteneur description à l'aide de MT-4:

<span>npm install @craco/craco
</span>

Nous allons également ajouter une marge supérieure et inférieure à l'ensemble du conteneur dans src / app.js afin que les premiers et derniers produits ne soient pas juste au bord de la page des deux côtés. Pour ce faire, nous ajouterons la classe Py-4:

<span>node -v
</span>

Nous verrons que le site Web commence à être plus beau maintenant.

Amélioration de la typographie du composant

Travaillons un peu sur la typographie. Vous pouvez voir que les informations sur le produit se ressemblent toutes. Nous ne pouvons pas distinguer le titre de la catégorie de la description et ainsi de suite. Tout d'abord, changeons la couleur de une partie du texte. Pour ce faire, nous utiliserons les cours de couleur de texte de Tailwind. Le format de ces classes est similaire aux classes de couleurs d'arrière-plan, mais remplacez B par du texte. Par exemple, pour rendre la couleur de votre texte en vert, vous ajoutez le texte de la classe-100.

Donc, changeons la couleur du texte de la catégorie en texte-gris-400 pour le rendre un peu décoloré par rapport à un autre texte, et changeons le prix de la couleur du texte en Text-Red-500 pour le faire ressortir. Nous ajouterons également une marge supérieure au prix pour nous assurer qu'elle se démarque le plus:

<span>npm -v
</span>

Si vous allez sur le site Web maintenant, vous verrez que le texte semble un peu plus clair en termes de distinction entre les différentes parties:

Ensuite, changeons la taille de la police. Pour ce faire, nous utiliserons les cours de taille de police de Tailwind. Le format de ces classes est textuel {taille}, où la taille va de SM à 9xl.

Nous rendrons la taille de la police du prix plus grand en ajoutant la classe Text-4xl pour les écrans qui ont une largeur au moins 768px en utilisant la variante MD et Text-XL pour les écrans plus petits, et nous ferons le titre Plus grand en ajoutant la classe Text-2xl pour les écrans qui ont une largeur d'au moins 768px également:

npx create-react-app react-shop

Le texte semble maintenant beaucoup mieux.

Positionner l'image du produit

Ensuite, corrigeons l'image pour la faire apparaître entièrement et positionner correctement l'image d'arrière-plan.

Tout d'abord, nous modifierons la taille de l'image d'arrière-plan. Pour ce faire, nous utiliserons les cours de taille de fond de Tailwind. Le format de ces classes est bg- {taille}, où la taille peut être automatique, contenir ou couvrir. Dans notre cas, il sera conforme à BG pour s'assurer que l'image entière est vue.

Deuxièmement, nous allons modifier l'attribut de la répétition d'arrière-plan pour nous assurer que l'image ne se répète pas plusieurs fois. Pour ce faire, nous utiliserons les cours de répétition de fond de Tailwind. Le format de ces classes est BG- {répétervalue}, où RepeatValue est la valeur que vous donneriez à la propriété de répétition d'arrière-plan, ou BG-Repeat-Round pour la valeur ronde et BG-Repeat-Space pour la valeur de l'espace. Dans notre cas, nous utiliserons BG-NO-Repeat.

Troisièmement, nous modifierons l'attribut de position d'arrière-plan afin que l'image soit toujours centrée. Pour ce faire, nous utiliserons les classes de position de fond de Tailwind. Le format de ces classes est BG- {position}, où la position est la valeur que vous donneriez à la propriété de position d'arrière-plan. Nous allons ajouter la classe BG-Center:

<span>node -v
</span>

Maintenant, nous pouvons voir les images complètement.

Vous remarquerez que certaines images touchent le bord du conteneur. Pour résoudre ce problème, nous allons ajouter un élément en wrapper à l'élément d'image d'arrière-plan et y ajouter un rembourrage:

<span>npm -v
</span>

Notez que nous avons déplacé la largeur que nous avons précédemment donnée à l'image d'arrière-plan à l'élément de wrapper et que nous avons ajouté W-Full et H-Full vers l'élément d'image d'arrière-plan pour nous assurer qu'il prend 100% de la largeur de ses parents et hauteur.

Ajout de l'ombre de la boîte et des coins arrondis

Nos produits sont maintenant beaucoup mieux. Nous ajouterons deux touches finales au style actuel. Tout d'abord, nous ajouterons de l'ombre à chaque produit. Nous utiliserons les classes Box Shadow de Tailwind. Le format de ces classes est Shadow- {size}, où la taille est facultative et peut aller de SM à 2xl. Il ne peut pas non plus de supprimer une ombre de boîte ou à l'intérieur pour rendre l'ombre intérieure. Deuxièmement, nous rendrons la frontière de la carte du produit un peu arrondie. Nous utiliserons les cours de rayon de bordure de Tailwind. Le format de ces classes est arrondi - {position} - {taille}, où la taille est facultative et peut aller de SM à 3xl ou peut être aucune pour le rayon de bordure 0 ou pleine pour le rendre complètement arrondi. La position est également facultative et peut être une position spécifique comme t pour le haut ou L pour la gauche, ou peut être spécifique à un certain bord comme TL pour le haut à gauche.

Nous allons ajouter Shadow-SM à la carte de produit pour y ajouter une petite ombre, et arrondi-LG pour rendre la bordure arrondie:

npx create-react-app react-shop

Enfin, notre page de liste de produits ressemble à la capture d'écran ci-dessous.

Personnalisation du thème

Jusqu'à présent, tout le style que nous avons fait a été basé sur le style par défaut de Tailwind. Cependant, Tailwind nous permet également de personnaliser notre thème. Nous pouvons changer les couleurs, la famille des polices et plus encore. Tous ces modifications sont effectuées dans tailwind.config.js.

Essayons un peu de modification des couleurs. Il existe différentes façons de changer les couleurs du thème.

Une façon de le faire est de définir vos propres couleurs. Par exemple, pour ajouter une nouvelle couleur à notre thème, nous pouvons effectuer ce qui suit dans tailwind.config.js:

<span>cd react-shop
</span>

Remarquez qu'à l'intérieur du thème.extend, nous avons ajouté un objet Couleurs, puis à l'intérieur que nous avons ajouté la turquoise clé avec le code hexadécimal pour la couleur turquoise. Maintenant, nous pouvons utiliser cette couleur comme nous utiliserions les couleurs par défaut. Par exemple, pour définir la couleur d'arrière-plan sur la turquoise, vous pouvez utiliser BG-turquoise.

Une autre façon de personnaliser les couleurs du thème est de modifier les couleurs par défaut. Comme mentionné précédemment, les couleurs par défaut dans le vent arrière sont le blanc, le noir, le gris, le rouge, le bleu, le vert, le jaune, l'orange, l'indigo, le violet et le rose. Vous pouvez modifier la valeur réelle de ces couleurs.

Par exemple, pour changer le jaune en plus d'un jaune moutarde, faites-le:

<span>node -v
</span>

Maintenant, lorsque vous utilisez les classes par défaut pour le jaune, vous obtiendrez la couleur jaune que vous avez définie ici. Vous pouvez également spécifier la valeur des différentes nuances de la couleur à l'aide d'échelles numériques:

<span>npm -v
</span>

Vous pouvez également utiliser des clés comme les plus claires, les plus claires, par défaut, sombres, les plus sombres:

npx create-react-app react-shop

Ajout d'une palette de couleurs

Une troisième façon de changer la couleur est d'utiliser d'autres palettes de couleurs dans le vent arrière CSS, ce que nous ferons.

Tout d'abord, nécessitent des couleurs de tailwindcss / couleurs au début de tailwind.config.js:

<span>cd react-shop
</span>

Ensuite, nous changerons de rouge en rose et de gris à bleu-gris:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Si vous consultez le site Web maintenant, vous verrez un léger changement dans les couleurs que nous avons utilisées.

Si vous voulez bien voir la différence de couleurs, vous pouvez essayer de changer de gris en ambre:

<span>npm install @craco/craco
</span>

Vous verrez que l'arrière-plan est maintenant jaune-ish.

Vous pouvez également changer la famille des polices, et bien plus encore, tous à partir de tailwind.config.js, tout en utilisant les mêmes classes fournies avec CSS de Tailwind. De cette façon, vous pouvez facilement personnaliser le thème en fonction de votre conception.

ajoutant le mode sombre

La variante sombre nous permet de styliser facilement nos éléments pour le mode sombre en même temps que nous les stylisons pour le mode léger.

Au début, lorsque nous créions notre site Web, nous avons changé la clé sombre dans tailwind.config.js en média. Cela signifie que le mode sombre sera appliqué lorsque le navigateur ou le système d'exploitation est réglé sur le mode sombre.

Si vous souhaitez tester l'apparence du site Web en mode sombre mais que vous ne l'avez pas réglé sur le mode sombre, vous pouvez imiter cela dans Chrome Devtools. Ouvrez les Devtools en appuyant sur f12 , puis appuyez sur Ctrl Shift p (ou cmd shift p sur macOS) et dans la liste déroulante qui apparaît, entrez "Afficher le rendu" et choisissez l'option qui affiche. Enfin, faites défiler vers le bas pour «imiter CSS Media Feature Prefers-Color-Scheme» et choisissez Prefers-Color-Scheme: Dark. La même chose peut être faite pour tester le mode lumineux en choisissant les préfers-color-schémas: lumière.

Commençons par modifier la couleur d'arrière-plan du site Web en mode sombre en ajoutez la classe Dark: BG-GRAY-800 dans src / app.js:

<span>"scripts": {
</span>  <span>"start": "react-scripts start",
</span>  <span>"build": "react-scripts build",
</span>  <span>"test": "react-scripts test",
</span>  <span>"eject": "react-scripts eject"
</span><span>}
</span>

Si vous vérifiez maintenant et que votre navigateur / os est défini sur le mode sombre (ou imité), vous verrez que la couleur d'arrière-plan a changé en une nuance plus foncée de gris.

apportons maintenant des modifications à la carte du produit. Nous ajouterons la classe sombre: BG-GRAY-300 à l'élément le plus extérieur:

<span>node -v
</span>

Si vous vérifiez maintenant, vous remarquerez que la couleur d'arrière-plan de la carte de produit a changé, mais vous remarquerez également que l'image n'a pas l'air bien, car elle a un fond blanc.

Renvons-le meilleur en ajoutant un fond blanc à l'emballage d'arrière-plan lorsqu'il est en mode sombre. Cela peut être fait en ajoutant la classe sombre: bg-blanc. De plus, la couleur du texte de catégorie est désormais à peine visible, nous allons donc le changer en quelque chose de plus sombre en ajoutant la classe sombre: text-gris-700:

<span>npm -v
</span>

L'aspect final de notre site Web est illustré ci-dessous.

Groupes et activez les variantes pour les plugins

Certaines variantes ne sont pas activées pour tous les plugins par défaut, car cela conduirait à une grande taille de fichier. Donc, si nous devons utiliser ces variantes, nous devons les activer manuellement dans tailwind.config.js pour le plugin que nous voulons. Les plugins voici les classes que nous utilisons depuis le début. Par exemple, les couleurs d'arrière-plan appartiennent au plugin BackgroundColor.

L'une des variantes qui ne sont pas activées est le groupe de groupe. Un groupe est un certain nombre d'éléments qui sont regroupés, de sorte que tout état (par exemple, survol) peut affecter l'ensemble du groupe. Un groupe est déclaré en ajoutant la classe de groupe au conteneur. Ensuite, vous pouvez utiliser la variante du groupe de groupe avec l'une des classes d'utilité sur un élément qui est l'enfant du conteneur. La classe d'utilité sur laquelle vous avez utilisé le groupe sur le groupe ne sera appliquée que si aucun élément du groupe (c'est-à-dire tout élément à l'intérieur de l'élément de conteneur) est plané.

Nous allons faire de chaque carte de produit un groupe, puis sur planer, nous zoomerons sur l'image. Donc, nous allons ajouter la classe de groupe à l'élément le plus extérieur du composant de produit, puis nous ajouterons à l'élément qui a une image d'arrière-plan les classes suivantes:

1. Transition de transition: l'une des classes de transition de Tailwind. Il applique les propriétés de transition pour transformer les changements uniquement.
2. Durée-300: L'une des cours de durée de transition de Tailwind. Il applique une durée de transition avec une valeur 300 ms.
3. Groupe-Hover: Transform: Comme expliqué ci-dessus, la variante de groupe de groupe garantit que la classe de transformation n'est appliquée que lorsqu'un élément du groupe est plané. La transformation est l'une des classes de transformation de Tailwind. Il permet d'ajouter d'autres classes liées à la transformation.
4. Group-Hover: SCALE-125: La classe SCALE-125 est l'une des classes d'échelle de Tailwind. Il définit l'échelle pour X et Y à 1,25, mais vous devez d'abord ajouter la classe de transformation.

En utilisant les classes ci-dessus, l'image zoomera une fois que tout élément du produit a survolé. Nous ajouterons également le débordement de la classe à l'élément le plus extérieur du composant produit pour garantir que si l'image se développe à l'extérieur de son conteneur, il ne déborde pas. Nous utiliserons également Hover: Shadow-2xl pour agrandir l'ombre de la carte de produit avec la durée de transition-shadow-300, pour garantir que la transition est transparente:

<span>node -v
</span>

Remarque: Si vous émulez le mode sombre (ou utilisez le mode sombre), vous pouvez voir l'effet mieux en mode lumière, alors assurez-vous de passer en mode lumière.

Si vous essayez de survoler le produit maintenant, vous verrez que l'ombre s'élargit et l'image zoom.

Conclusion

Nous avons créé un site Web soigné et réactif avec React sans avoir à écrire de CSS! C’est la magie du vent arrière CSS. CSS à vent arrière supprime le travail fastidieux et répétitif ou l'écriture de CSS. Il facilite également la création de thèmes et vous permet de vous concentrer sur la création de composants réutilisables avec un design élégant, qui est parfait pour réagir. Ce que nous avons couvert dans cet article, c'est simplement gratter la surface de toutes les belles choses que vous pouvez facilement créer avec le vent arrière CSS.

FAQS sur l'utilisation de réact avec le vent arrière

Qu'est-ce que le vent arrière CSS, et pourquoi devrais-je l'utiliser avec React?

Tailwind CSS est un framework CSS-First Utility qui fournit un ensemble de classes prédéfinies pour les applications Web de style. L'utilisation de CSS de vent arrière avec React peut accélérer le processus de développement et maintenir un système de conception cohérent.

Comment intégrer le vent arrière CSS avec un projet React?

Vous pouvez intégrer CSS Tailwind dans un projet React en l'installant avec NPM ou YARN et en configurant votre processus de construction pour traiter les classes CSS du vent arrière.

Puis-je utiliser Create React App (CRA) avec CSS du vent arrière?

Oui, vous pouvez utiliser CSS Tailwind avec Create React App. Il existe plusieurs méthodes, y compris la configuration de Craco ou la configuration REACT-Script PostCSS, pour la rendre transparente.

Comment appliquer les cours CSS de vent arrière à mes composants React?

Vous pouvez appliquer directement les classes CSS du vent arrière à vos composants React à l'aide d'accessoires ClassName. Par exemple,

Bonjour, tailwind!

.

Quels sont les avantages de l'utilisation de classes de services publics dans le vent arrière CSS avec React?

L'utilisation de classes utilitaires peut rendre vos composants réagis plus concises, et il favorise un système de conception cohérent. Il simplifie également la conception réactive et encourage la réutilisabilité.

Comment puis-je utiliser des classes réactives dans le vent arrière CSS avec des composants React?

Tailwind CSS fournit des classes réactives qui vous permettent de définir différents styles pour différentes tailles d'écran. Vous pouvez utiliser ces classes en ajoutant des points d'arrêt comme MD: pour vos définitions de classe.

Y a-t-il des limites ou des inconvénients à l'utilisation de CSS de vent arrière avec React?

Bien que Tailwind CSS soit puissant, il peut entraîner des tailles de fichiers plus grandes si vous ne faites pas attention à l'utilisation des classes. Cela peut également être difficile pour les concepteurs qui préfèrent travailler avec le CSS traditionnel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!