Wie man Tailwind CSS mit ReactJS integriert

Tailwind CSS ist ein beliebtes CSS-Framework, das für die schnelle Erstellung moderner und reaktionsfähiger Benutzeroberflächen entwickelt wurde, während React eine weit verbreitete JavaScript-Bibliothek für die Erstellung interaktiver und dynamischer Webanwendungen ist. Die Kombination von Tailwind CSS mit React ermöglicht es Entwicklern, das Beste aus beiden Welten zu nutzen, was zu einem rationalisierten und effizienten Entwicklungsprozess führt. Diese Integration erleichtert die Erstellung visuell ansprechender und hochperformanter Webanwendungen mit minimalem Aufwand und ermöglicht es Entwicklern, sich auf die Gestaltung außergewöhnlicher Nutzererlebnisse zu konzentrieren. Dieser Artikel führt Sie durch den Prozess der Integration von Tailwind CSS mit einer React-Anwendung, so dass Sie die Leistung dieser beiden leistungsstarken Tools in Ihren Webentwicklungsprojekten nutzen können.

Also Read: Find best ReactJS Developers

Lesen Sie auch: Die besten ReactJS-Entwickler finden

Um Tailwind CSS mit React zu verwenden, müssen Sie die folgenden Schritte befolgen:

1. Erstellen Sie eine neue React App

Durch die Verwendung von create-react-app, generieren wir eine Standard-React-Anwendung mit einer Standardkonfiguration. Dies vereinfacht den Einrichtungsprozess und ermöglicht es Ihnen, sich auf das Schreiben von Code zu konzentrieren.

npx create-react-app my-tailwind-react-app
cd my-tailwind-react-app

2. Installieren Sie die erforderlichen Abhängigkeiten

Wir installieren Tailwind CSS, PostCSS, Autoprefixer und PostCSS Loader. PostCSS ist ein Werkzeug zur Umwandlung von CSS mit JavaScript, während Autoprefixer automatisch Herstellerpräfixe zu Ihrem CSS hinzufügt, um die Kompatibilität mit verschiedenen Browsern zu gewährleisten. PostCSS Loader ist ein Webpack-Loader, der CSS mit PostCSS verarbeitet.

npm install tailwindcss@latest postcss@latest autoprefixer@latest postcss-loader@latest

3. Erstellen Sie eine Konfigurationsdatei für Tailwind CSS

tailwind.config.js ist die Konfigurationsdatei, in der Sie das Designsystem für Ihre Anwendung anpassen können. Standardmäßig erweitert sie die Tailwind-CSS-Standardkonfiguration.

npx tailwindcss init

Dadurch wird eine tailwind.config.js Datei im Stammverzeichnis Ihres Projekts. Sie können die Konfiguration an die Bedürfnisse Ihres Projekts anpassen.

4. Erstellen Sie eine PostCSS-Konfigurationsdatei

postcss.config.js ist die Konfigurationsdatei, in der Sie die PostCSS-Plugins definieren, die in Ihrem Projekt verwendet werden sollen. In unserem Fall verwenden wir die Plugins Tailwind CSS und Autoprefixer.

Erstellen einer postcss.config.js im Stammverzeichnis Ihres Projekts und fügen Sie den folgenden Inhalt hinzu:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

5. Erstellen Sie eine CSS-Datei

src/tailwind.css importieren Sie die von Tailwind CSS bereitgestellten Basisstile, Komponenten und Hilfsprogramme. Sie können hier auch Ihre eigenen CSS-Regeln hinzufügen.

Lesen Sie auch: Mehrsprachigkeit in React

Erstellen Sie eine neue CSS-Datei, zum Beispiel src/tailwind.css, und fügen Sie den folgenden Inhalt hinzu:

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

6. Konfigurieren Sie webpack, um die CSS-Datei zu verarbeiten

Durch den Import der Datei tailwind.css in Ihr src/index.js, stellen Sie sicher, dass das CSS zusammen mit Ihrem JavaScript-Code gebündelt wird. Webpack, der von create-react-app verwendete Standard-Bundler, kümmert sich um diesen Prozess.

Öffnen Sie Ihr src/index.js Datei und fügen Sie die folgende Importanweisung am Anfang ein:

import './tailwind.css';

7. Ändern Sie den Abschnitt scripts in package.json

Die Aktualisierung der Start- und Build-Skripte mit dem --require postcss stellt sicher, dass PostCSS beim Aufbau oder Betrieb des Entwicklungsservers verwendet wird. Dies ist für die Verarbeitung des Tailwind-CSS-Codes und die Anwendung des Autoprefixer-Plugins erforderlich.

Lesen Sie auch: Beliebte React Animation Bibliotheken

Im Abschnitt Skripte Ihres package.json Datei, ersetzen Sie die Befehle start und build durch die folgenden:

"scripts": {
  "start": "react-scripts --require postcss start",
  "build": "react-scripts --require postcss build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

8. Starten Sie Ihren Entwicklungsserver

Durch Laufen npm start, starten Sie den Entwicklungsserver, der Ihren Code automatisch kompiliert, die PostCSS-Transformationen anwendet und die Anwendung in Ihrem Standardbrowser öffnet. Sie können nun Tailwind-CSS-Utility-Klassen innerhalb Ihrer React-Komponenten verwenden, um sie zu gestalten.

npm start

Jetzt können Sie Tailwind-CSS-Utility-Klassen in Ihren React-Komponenten verwenden:

Lesen Sie auch: Zustandslose funktionale Komponenten in React

import React from 'react';
function App() {
  return (
    <div className="App">
      <header className="bg-blue-500 text-white p-4">
        <h1 className="text-xl">Welcome to React with Tailwind CSS!</h1>
      </header>
    </div>
  );
}
export default App;

Wenn diese Schritte abgeschlossen sind, sollten Sie Tailwind CSS erfolgreich in Ihre React-App integriert haben. Jetzt können Sie Ihre React-Komponenten mit Tailwind-CSS-Utility-Klassen erstellen.

Lesen Sie auch: Tailwind mit Vue