Comment styliser les liens href dans React en utilisant Tailwind CSS ?

React est une bibliothèque JavaScript populaire pour créer des applications Web. Lors de la création d'une application React, il est important de styliser vos composants de manière élégante. Une façon d'y parvenir consiste à utiliser un framework CSS tel que Tailwind CSS.

Dans cet article, nous apprendrons comment styliser les liens href dans React en utilisant Tailwind CSS et les différentes méthodes ou classes disponibles dans Tailwind CSS.

Prérequis

Pour utiliser Tailwind CSS dans une application React, nous devons d'abord l'installer. Examinons les étapes pour créer un nouveau projet React et installer Tailwind CSS.

Étape 1 : Créer une nouvelle application React

Pour créer une nouvelle application React, vous pouvez utiliser la commande create-react-app. Ouvrez le terminal ou l'invite de commande et exécutez la commande suivante -

npx create-react-app my-app

Étape 2 : Installez Tailwind CSS

Pour installer Tailwind CSS dans votre application React, vous devez exécuter la commande suivante dans Terminal ou Invite de commandes -

npm install tailwindcss

Étape 3 : Créer un fichier de configuration pour Tailwind CSS

Après avoir installé Tailwind CSS, vous devez créer un fichier de configuration pour personnaliser les paramètres par défaut. Pour ce faire, exécutez la commande suivante dans le terminal ou l'invite de commande.

npx tailwindcss init

Étape 4 : Configurer PostCSS

Tailwind CSS nécessite PostCSS pour gérer CSS. Pour configurer PostCSS dans votre application React, créez un nouveau fichier appelé postcss.config.js dans le répertoire racine de votre application et ajoutez le code suivant

module.exports = {
   plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
   ],
};

Étape 5 : Importez Tailwind CSS dans votre projet

Pour utiliser Tailwind CSS dans une application React, vous devez l'importer dans votre fichier index.css. Ouvrez le fichier src/index.css et ajoutez les lignes suivantes en haut -

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

C'est tout ! Vous avez créé avec succès une nouvelle application React et installé Tailwind CSS. Vous pouvez désormais personnaliser le style en modifiant le fichier tailwind.config.js et en utilisant les classes CSS Tailwind dans votre composant React.

Nous pouvons également utiliser Tailwind CSS CDN dans des fichiers HTML sans créer d'application React. Par conséquent, dans le but de démontrer cet article, nous utiliserons cette méthode.

Méthode 1 : utiliser l'attribut ClassName

La première façon de styliser les liens href disponibles dans les balises

dans React consiste à utiliser la propriété className de Tailwind CSS. Dans cette méthode, nous créons une classe CSS à l'aide de Tailwind CSS puis appliquons l'attribut className de la balise . Maintenant, dans l'attribut className, nous définissons le style utilisé dans tailwind, par exemple, pour définir la taille de police d'un paragraphe de texte aussi grande, nous pouvons utiliser text-lg, et ainsi de suite.

Grammaire

Voici la syntaxe qui définit comment utiliser l'attribut className dans React en utilisant Tailwind CSS -

import React from 'react';
import './styles.css';
function App() {
   return (
      <div>
         <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" className="text-blue-500 underline font-bold">My Link</a>
      </div>
   );
}
export default App;

Dans cette syntaxe, nous utilisons l'attribut className pour définir le style du lien href. Nous avons défini des styles tels que la classe "text-blue-500" pour définir le texte en bleu, la classe "underline" pour souligner les liens et la classe "font-bold" pour définir l'épaisseur de la police en gras.

Exemple

Dans cet exemple, nous avons importé les bibliothèques et les scripts requis pour utiliser React et Tailwind CSS. Nous avons défini un composant React appelé « App » qui restitue les balises de titre, de paragraphe et d'ancrage de certains composants.

Ici, nous utilisons l'attribut className de la classe Tailwind pour définir la couleur d'arrière-plan, la couleur du texte, l'épaisseur de la police, le remplissage et le rayon de la bordure du lien href.

<html>
<head>
   <title>Style href Links in React using Tailwind CSS</title>
   <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
   <div id="react"></div>
   <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <script type="text/babel">
      class App extends React.Component { render() { return (
         <div className="p-4">
            <h2 className="text-2xl font-bold mb-4">Welcome to Tutorialspoint </h2>
            <p className="mb-4 text-green-700">
               Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
            </p>
            <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" className="bg-green-500 bg-green-800 text-white font-bold py-2 px-4 rounded">  Search </a>
        </div>
      ); } } ReactDOM.render(
      <App />, document.getElementById('react') );
   </script>
</body>
</html>

Méthode 2 : utilisez Tailwind JIT

La deuxième façon de styliser les liens href disponibles dans les balises

dans React consiste à utiliser Tailwind CSS JIT ou Just-in-Time. Le compilateur JIT ou juste à temps de Tailwind CSS est utilisé pour générer des styles à la demande lorsque nous écrivons des modèles, plutôt que de tout générer à l'avance au début du développement.

Dans cette approche, nous activons le mode JIT dans Tailwind CSS et appliquons la classe directement à l'attribut href dans la balise en utilisant l'attribut className.

Grammaire

Voici la syntaxe qui définit comment utiliser Tailwind CSS JIT dans React -

<style>
   /* styles for href using JIT method */
   .new-link {
      @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
   }
</style>
/*In the <body> */
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="class-name">My Link</a>

Dans cette syntaxe, nous définissons d'abord une classe personnalisée nommée .new-link en utilisant la directive @apply pour appliquer la classe CSS Tailwind. Ensuite, cette classe personnalisée est ajoutée à l'attribut de classe href pour utiliser les styles définis.

Exemple

Dans cet exemple, nous définissons une classe CSS appelée new-link qui applique la classe CSS Tailwind à l'aide de la directive @apply. Nous avons défini un composant React appelé « App » qui restitue les balises de titre, de paragraphe et d'ancrage de certains composants.

Dans cette méthode, lorsque le composant est rendu, la balise d'ancrage sera stylisée à l'aide de la classe CSS new-link définie dans la balise de style.

<html>
<head>
   <title>Style href Links in React using Tailwind CSS</title>
   <link rel="stylesheet" href="https://cdn.tailwindcss.com/just-in-time/3.3.1/tailwind.min.css">
   <style>
      /* styles for href using JIT method */
      .new-link {
         @apply bg-blue-500 hover: bg-blue-700 text-white font-bold py-2 px-4 rounded;
      }
   </style>
</head>
<body>
   <div id="react"></div>
   <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <script type="text/babel">
      class App extends React.Component { render() { return (
         <div className="p-4">
            <h2 className="text-2xl font-bold mb-4">Welcome to Tutorialspoint</h2>
            <p className="mb-4 text-green-700">
               Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
            </p>
            <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="new-link"> Search </a>
         </div>
      ); } } ReactDOM.render(
      <App />, document.getElementById('react') );
   </script>
</body>
</html>

Dans cet article, nous avons appris à styliser les liens href dans React à l'aide de Tailwind CSS. Nous avons deux manières différentes de styliser les liens href.

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!