React Tailwind CSS

Die Verwendung von Tailwind CSS in einem React-Projekt ist eine sehr beliebte Wahl, da es einen Utility-First-Ansatz zum Schreiben von CSS bietet, mit dem Sie Stile direkt in Klassennamen anwenden können. Diese Methode macht das Styling prägnanter und intuitiver.

Tailwind CSS Tutorial:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Offizielle Website von Tailwind CSS:https://tailwindcss.com/

GitHub-Adresse:https://github.com/tailwindlabs/tailwindcss

Tailwind CSS ist ein leistungsstarkes CSS-Framework, das Styling durch einen Utility-First-Ansatz prägnanter und modularer macht. Im Gegensatz zu herkömmlichen klassenbasierten CSS-Frameworks bietet Tailwind eine Reihe von Low-Level-Utility-Klassen, die direkt auf HTML-Elementen verwendet werden können, um schnell und flexibel individuelle Designs zu erstellen.

Im Folgenden finden Sie die detaillierten Schritte zur Verwendung von Tailwind CSS in einem React-Projekt.

1. Tailwind CSS installieren

Wenn Sie ein neues React-Projekt von Grund auf erstellen, können Sie create-react-app verwenden. Wenn Sie bereits ein bestehendes React-Projekt haben, können Sie den Schritt zur Projekterstellung überspringen.

Erstellen Sie ein neues React-Projekt:

npx create-react-app my-app
cd my-project

Tailwind CSS installieren

Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus, um Tailwind CSS und die erforderlichen Abhängigkeiten zu installieren:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Dadurch werden eine tailwind.config.js-Datei und eine postcss.config.js-Datei erstellt.

Ihre Projektstruktur sollte ähnlich wie folgt aussehen:

my-app/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...（其他文件）
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── tailwind.config.js

2. Tailwind CSS konfigurieren

Bearbeiten Sie die tailwind.config.js-Datei, um Tailwind so zu konfigurieren, dass ungenutzte Stile entfernt werden. Aktualisieren Sie das content-Array, um alle Pfade Ihrer Template-Dateien einzuschließen:

Beispiel

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

3. Tailwinds Basisstile hinzufügen

Öffnen Sie in Ihrem Projekt die Datei src/index.css und fügen Sie den folgenden Inhalt hinzu, um Tailwinds Basisstile, Komponentenstile und Utility-Stile einzubinden:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Tailwind CSS zum Schreiben von Stilen verwenden

Jetzt können Sie damit beginnen, Tailwind-CSS-Klassennamen in Ihren React-Komponenten zu verwenden, um Stile zu schreiben.

Code der Datei App.js:

import React from 'react';

const App = () => {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="bg-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl font-bold text-gray-900">Hallo, BEISPIEL!</h1>
<p className="mt-4 text-gray-600">Beispiel-Tutorial: Was du lernst, ist nicht nur Technologie, sondern auch Träume!</p>
<button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
Klick mich zum Ausprobieren
</button>
</div>
</div>
);
};

export default App;

Stelle sicher, dass deine Datei src/index.js die App-Komponente korrekt importiert und sie in das DOM rendert.

Code der Datei src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

Ausführen:

npm start

Öffne dann deinen Browser und navigiere zu http://localhost:3000. Du solltest eine einfache React-App sehen, die mit Tailwind CSS gestaltet ist.

Durch die oben genannten Schritte hast du Tailwind CSS erfolgreich in dein React-Projekt integriert und es zum Schreiben von Stilen verwendet. Die Utility-Klassennamen von Tailwind CSS ermöglichen es dir, deinen Komponenten schnell Stile hinzuzufügen und gleichzeitig deinen Style-Code prägnant und modular zu halten.

Andere Erweiterungen

React-Praxisprojekt