tailwind npm (Wie es für Entwickler funktioniert)

Tailwind CSS ist ein beliebtes Utility-First-CSS-Framework, das es ermöglicht, HTML-Seiten schnell zu gestalten. Es ist hochgradig anpassbar und funktioniert nahtlos mit React, einer leistungsstarken JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. In diesem Artikel führen wir Sie durch den Prozess der Integration von Tailwind CSS in ein React-Projekt mit npm. Außerdem werden wir uns die IronPDF-PDF-Generierungsbibliothek ansehen, um PDFs aus Website-URLs zu erstellen.

Was ist Tailwind CSS?

Tailwind CSS ist ein Utility-First-CSS-Framework, das es Ihnen ermöglicht, Anwendungen effizienter zu erstellen. Mit Tailwind kannst du das Layout, die Farbe, den Abstand, die Typografie, Schatten und mehr direkt in deinem HTML mithilfe von Utility-Klassen steuern. Das Beste daran? Sie müssen kein benutzerdefiniertes CSS schreiben! 🚀

Wenn Sie es satt haben, mit traditionellen semantischen Klassennamen zu kämpfen, probieren Sie Tailwind CSS aus – Sie werden sich vielleicht fragen, wie Sie jemals auf andere Weise mit CSS gearbeitet haben! 😊. Nachfolgend sind die Schritte zur Integration von Tailwind CSS in eine React-Anwendung aufgeführt.

Schritt 1: Erstellen Sie ein React-Projekt

Create React App mit folgendem Befehl verwenden. Dieses Tool richtet ein neues React-Projekt mit einer sinnvollen Standardkonfiguration ein.

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

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

Schritt 2: Installieren Sie Tailwind CSS

Installieren Sie Tailwind CSS und seine Abhängigkeiten mithilfe von npm. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

npm install -D tailwindcss postcss autoprefixer

npm install -D tailwindcss postcss autoprefixer

Schritt 3: Tailwind CSS initialisieren

Als Nächstes müssen Sie Tailwind CSS initialisieren, um die Standardkonfigurationsdateien zu erstellen. Führen Sie den folgenden Befehl aus:

npx tailwindcss init -p

npx tailwindcss init -p

Dies wird zwei neue Dateien in Ihrem Projekt erstellen: tailwind.config.js und postcss.config.js.

Schritt 4: Tailwind CSS konfigurieren

Öffnen Sie die Datei tailwind.config.js und stellen Sie die Purge-Option ein, um ungenutztes CSS in der Produktion zu entfernen. Dies hilft, Ihr endgültiges CSS-Bundle klein zu halten. Sie können hier auch den Klassennamen für den Dunkelmodus und den Pfad zu einem benutzerdefinierten Modul festlegen.

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

js

Schritt 5: Erstellen Sie eine Tailwind CSS-Datei

Erstellen Sie eine neue Datei mit dem Namen src/tailwind.css und fügen Sie den folgenden Inhalt hinzu:

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

js

Schritt 6: Importieren Sie Tailwind CSS in Ihr React-Projekt

Öffnen Sie die Datei src/index.js und importieren Sie die gerade erstellte Tailwind CSS-Datei:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './tailwind.css';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

js

Schritt 7: Starten Sie die Verwendung von Tailwind CSS

Jetzt können Sie Tailwind CSS-Klassen in Ihrem React-Komponenten-Code verwenden. Öffnen Sie die Datei src/App.js und ändern Sie sie wie folgt:

import React from 'react';
function App() {
  return (
    <div className="text-center min-h-screen flex items-center justify-center"> ## div class
      <header className="bg-blue-500 text-white p-8 rounded">
        <h1 className="text-4xl font-bold">Welcome to Tailwind CSS in React</h1>
        <p className="mt-4">This is a sample application using Tailwind CSS with React.</p>
      </header>
    </div>
  );
}
export default App;

js

Schritt 8: Führen Sie Ihr React-Projekt aus

Starten Sie schließlich Ihren Entwicklungsserver, um Tailwind CSS in Aktion zu sehen:

npm start

npm start

Ihre Anwendung sollte jetzt mit integrierter Tailwind CSS laufen. Sie können beginnen, die Utility-Klassen von Tailwind zu verwenden, um Ihre React-Komponenten einfach zu stylen.

Einführung in IronPDF

IronPDF ist eine beliebte Bibliothek zum Erstellen, Bearbeiten und Konvertieren von PDF-Dokumenten in verschiedenen Programmierumgebungen. Das IronPDF NPM-Paket ist speziell für Node.js-Anwendungen konzipiert.

Hier sind einige Hauptmerkmale und Details über das IronPDF NPM-Paket:

Wesentliche Merkmale

Konvertierung von HTML in PDF

HTML-Inhalte mühelos in PDF-Dokumente umwandeln. Diese Funktion ist besonders nützlich für die Erstellung dynamischer PDFs aus Webinhalten.

Konvertierung von URL in PDF

Generieren Sie PDFs direkt von URLs, um den Inhalt von Webseiten zu erfassen und programmatisch als PDF-Dateien zu speichern.

PDF-Bearbeitung

Zusammenführen, teilen und vorhandene PDF-Dokumente mühelos manipulieren. IronPDF bietet Funktionen wie das Hinzufügen von Seiten, das Aufteilen von Dokumenten, die Anpassung von PDFs und mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Signaturen anwenden. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.

Hochwertiger Output

Erstellen Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierung. IronPDF stellt sicher, dass die von Ihnen generierten PDF-Dateien dem ursprünglichen Inhalt treu bleiben.

Plattformübergreifende Kompatibilität

IronPDF ist kompatibel mit verschiedenen Plattformen, einschließlich Windows, Linux und macOS, was es für eine Vielzahl von Entwicklungsumgebungen geeignet macht.

Einfache Integration

Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API ist gut dokumentiert, was es einfach macht, PDF-Generierungsfunktionen in Ihre Projekte zu integrieren.

Einrichtung

Um das IronPDF NPM-Paket zu installieren, verwenden Sie den folgenden Befehl:

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

Erstellen Sie ein PDF-Dokument mit IronPDF und verwenden Sie das Tailwind NPM-Paket.

Einrichten eines Next.js-Projekts

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (wenn Sie dies noch nicht getan haben) mit dem folgenden Befehl: Bitte beziehen Sie sich auf die Einrichtungsseite.

npx create-next-app@latest tailwind-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest tailwind-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd tailwind-pdf

cd tailwind-pdf

Installieren Sie die erforderlichen Pakete:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Die obigen Anweisungen erstellen eine 'tailwind.config.js'-Datei wie folgt:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

js

Fügen Sie den folgenden Code zur global.css-Datei hinzu

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

js

Öffnen oder erstellen Sie die Datei _app.js und binden Sie die Datei global.css wie unten ein.

// These styles apply to every route in the application
import '@/styles/globals.css'
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

js

Eine PDF-Datei erstellen

Nun, lassen Sie uns ein einfaches Beispiel zur Erstellung eines PDF mit IronPDF erstellen. In Ihrer Next.js-Komponente (z. B. pages/index.tsx) fügen Sie den folgenden Code hinzu:

PDF-Generierungs-API: Der erste Schritt ist die Erstellung einer Backend-API zur Generierung des PDF-Dokuments. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn ein Benutzer ein PDF erzeugen möchte. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den untenstehenden Inhalt hinzu.

IronPDF erfordert einen Lizenzschlüssel, den Sie von der Lizenzseite erhalten und im folgenden Code platzieren können.

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

js

Ändern Sie nun den index.js-Code wie unten, um Tailwind CSS zu verwenden.

import Head from 'next/head';
import {useState} from "react";
export default function Home() {
    const [textInput, setTextInput] = useState('');
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+textInput);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'example.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }
    return (
        <div >
            <Head>
                <title>Demo Toaster and Generate PDF From IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main className='text-center' >
                <h1 className='text-blue-500 text-4xl p-6 mt-12' >Demo Tailwind and Generate PDF From IronPDF</h1>
                <p className='w-full text-center'>
                    <span className='px-4 text-xl border-gray-500'>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button className='rounded-sm bg-blue-800 p-2 m-12 text-xl text-white' onClick={generatePdf}>Generate PDF</button>
            </main> 
        </div>
    );
}

js

Führen Sie nun die Anwendung mit dem Befehl aus:

yarn dev

yarn dev

AUSGABE für Tailwind CSS und IronPDF

Klicken Sie auf die Schaltfläche PDF generieren, um das PDF aus der angegebenen URL zu erzeugen.

IronPDF-Lizenz

IronPDF-Seite.

Geben Sie hier den Lizenzschlüssel ein:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

js

Schlussfolgerung

Die Integration von Tailwind CSS in ein React-Projekt mit npm ist unkompliziert. Wenn Sie diese Schritte befolgen, können Sie Tailwind CSS schnell einrichten und mit seinen Utility-First-Klassen beginnen, um responsive und anpassbare Benutzeroberflächen zu erstellen. Die Flexibilität und die leistungsstarken Anpassungsoptionen von Tailwind CSS machen es zu einer hervorragenden Wahl für React-Entwickler, die ihren Styling-Prozess optimieren möchten. IronPDF ist ein vielseitiges PDF-Erstellungspaket, das Entwicklern hilft, es einfach in Unternehmensanwendungen zu integrieren. Das Beherrschen beider oben genannten Fähigkeiten hilft Entwicklern, moderne Anwendungen mühelos zu erstellen.

Für weitere Informationen, wie Sie mit IronPDF beginnen und Codebeispiele für verschiedene Möglichkeiten zur Integration in Ihr Projekt finden, besuchen Sie bitte die Codebeispiele und die Dokumentationsseite. IronPDF bietet Support- und Aktualisierungsoptionen für alle Inhaber einer unbefristeten Lizenz an. Es bietet außerdem 24/5 technischen Support während der Testphase an.

Beachten Sie, dass keine Kreditkarteninformationen oder Kontoerstellung für die kostenlose Testlizenz erforderlich sind, sondern nur eine gültige E-Mail-Adresse.