Wie gestalte ich Href-Links in React mit Tailwind CSS?

React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Webanwendungen. Beim Erstellen einer React-Anwendung ist es wichtig, Ihre Komponenten ansprechend zu gestalten. Eine Möglichkeit, dies zu erreichen, ist die Verwendung eines CSS-Frameworks wie Tailwind CSS.

In diesem Artikel erfahren Sie, wie Sie Href-Links in React mithilfe von Tailwind CSS und den verschiedenen in Tailwind CSS verfügbaren Methoden oder Klassen formatieren.

Voraussetzungen

Um Tailwind CSS in einer React-Anwendung verwenden zu können, müssen wir es zunächst installieren. Schauen wir uns die Schritte zum Erstellen eines neuen React-Projekts und zur Installation von Tailwind CSS an.

Schritt 1: Erstellen Sie eine neue React-App

Um eine neue React-Anwendung zu erstellen, können Sie den Befehl create-react-app verwenden. Öffnen Sie das Terminal oder die Eingabeaufforderung und führen Sie den folgenden Befehl aus -

npx create-react-app my-app

Schritt 2: Tailwind CSS installieren

Um Tailwind CSS in Ihrer React-Anwendung zu installieren, müssen Sie den folgenden Befehl im Terminal oder in der Eingabeaufforderung ausführen -

npm install tailwindcss

Schritt 3: Konfigurationsdatei für Tailwind CSS erstellen

Nach der Installation von Tailwind CSS müssen Sie eine Konfigurationsdatei erstellen, um die Standardeinstellungen anzupassen. Führen Sie dazu den folgenden Befehl im Terminal oder in der Eingabeaufforderung aus.

npx tailwindcss init

Schritt 4: PostCSS konfigurieren

Tailwind CSS erfordert PostCSS, um CSS zu verarbeiten. Um PostCSS in Ihrer React-Anwendung zu konfigurieren, erstellen Sie eine neue Datei namens postcss.config.js im Stammverzeichnis Ihrer Anwendung und fügen Sie den folgenden Code hinzu

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

Schritt 5: Importieren Sie Tailwind CSS in Ihr Projekt

Um Tailwind CSS in einer React-Anwendung zu verwenden, müssen Sie es in Ihre index.css-Datei importieren. Öffnen Sie die Datei src/index.css und fügen Sie oben die folgenden Zeilen hinzu -

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

Das ist es! Sie haben erfolgreich eine neue React-Anwendung erstellt und Tailwind CSS installiert. Sie können den Stil jetzt anpassen, indem Sie die Datei tailwind.config.js ändern und die Tailwind-CSS-Klassen in Ihrer React-Komponente verwenden.

Wir können Tailwind CSS CDN auch in HTML-Dateien verwenden, ohne eine React-Anwendung zu erstellen. Zur Demonstration dieses Artikels verwenden wir daher diese Methode.

Methode 1: Verwenden Sie das ClassName-Attribut

Die erste Möglichkeit, in

-Tags in React verfügbare href-Links zu formatieren, besteht darin, die className-Eigenschaft von Tailwind CSS zu verwenden. Bei dieser Methode erstellen wir mit Hilfe von Tailwind CSS eine CSS-Klasse und wenden dann das className-Attribut des -Tags an. Nun definieren wir im className-Attribut den in tailwind verwendeten Stil. Um beispielsweise die Schriftgröße eines Textabsatzes als groß zu definieren, können wir text-lg, usw. verwenden.

Grammatik

Hier ist die Syntax, die definiert, wie das className-Attribut in React mit Tailwind CSS verwendet wird -

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;

In dieser Syntax verwenden wir das className-Attribut, um den Stil des href-Links zu definieren. Wir haben Stile wie die Klasse „text-blue-500“ definiert, um den Text auf Blau zu setzen, die Klasse „underline“, um Links zu unterstreichen, und die Klasse „font-bold“, um die Schriftstärke auf „Fett“ zu setzen.

Beispiel

In diesem Beispiel haben wir die Bibliotheken und Skripte importiert, die für die Verwendung von React und Tailwind CSS erforderlich sind. Wir haben eine React-Komponente namens „App“ definiert, die die Titel-, Absatz- und Anker-Tags einiger Komponenten rendert.

Hier verwenden wir das className-Attribut der Tailwind-Klasse, um die Hintergrundfarbe, die Textfarbe, die Schriftstärke, den Abstand und den Rahmenradius des href-Links festzulegen.

<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>

Methode 2: Tailwind JIT verwenden

Die zweite Möglichkeit, in -Tags in React verfügbare href-Links zu formatieren, ist die Verwendung von Tailwind CSS JIT oder Just-in-Time. Der JIT- oder Just-in-Time-Compiler von Tailwind CSS wird verwendet, um Stile nach Bedarf zu generieren, während wir Vorlagen schreiben, anstatt alles im Voraus zu Beginn der Entwicklung zu generieren.

Bei diesem Ansatz aktivieren wir den JIT-Modus in Tailwind CSS und wenden die Klasse mithilfe des className-Attributs direkt auf das href-Attribut im -Tag an.

Grammatik

Hier ist die Syntax, die definiert, wie Tailwind CSS JIT in React verwendet wird -

<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>

In dieser Syntax definieren wir zunächst eine benutzerdefinierte Klasse namens .new-link mithilfe der @apply-Direktive, um die Tailwind-CSS-Klasse anzuwenden. Anschließend wird diese benutzerdefinierte Klasse zum href-Klassenattribut hinzugefügt, um die definierten Stile zu verwenden.

Beispiel

In diesem Beispiel definieren wir eine CSS-Klasse namens new-link, die die Tailwind-CSS-Klasse mithilfe der @apply-Direktive anwendet. Wir haben eine React-Komponente namens „App“ definiert, die die Titel-, Absatz- und Anker-Tags einiger Komponenten rendert.

Bei dieser Methode wird das Anker-Tag beim Rendern der Komponente mithilfe der im Style-Tag definierten New-Link-CSS-Klasse gestaltet.

<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>

In diesem Artikel haben wir gelernt, wie man Href-Links in React mit Tailwind CSS formatiert. Wir haben zwei verschiedene Möglichkeiten, Href-Links zu formatieren.

Das obige ist der detaillierte Inhalt vonWie gestalte ich Href-Links in React mit Tailwind CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!