NODE-HILFE

tailwind npm (Wie es für Entwickler funktioniert)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Aktualisiert:August 5, 2025

Tailwind CSS ist ein beliebtes CSS-Framework mit Utility-first-Ansatz, das ein schnelles Design von HTML-Seiten ermöglicht. Es ist hochgradig anpassbar und arbeitet nahtlos mit React zusammen, 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-Generierungslibrary ansehen, um PDFs aus Website-URLs zu generieren.

Was ist Tailwind CSS?

Tailwind CSS ist ein CSS-Framework mit Utility-first-Ansatz, das es Ihnen ermöglicht, Anwendungen effizienter zu erstellen. Mit Tailwind können Sie Layout, Farbe, Abstand, Typografie, Schatten und vieles mehr mit Utility-Klassen direkt in Ihrem HTML steuern. Das Beste daran? Sie müssen kein angepasstes CSS schreiben!

Wenn Sie es leid sind, mit traditionellen semantischen Klassennamen zu kämpfen, probieren Sie Tailwind CSS aus—Sie werden sich fragen, wie Sie jemals mit CSS auf andere Weise gearbeitet haben!

Nachfolgend finden Sie die Schritte zur Integration von Tailwind CSS in eine React-Anwendung.

Schritt 1: Erstellen Sie ein React-Projekt

Erstellen Sie eine React-App mit dem folgenden Befehl. 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

SHELL

Schritt 2: Installieren Sie Tailwind CSS

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

npm install -D tailwindcss postcss autoprefixer

npm install -D tailwindcss postcss autoprefixer

SHELL

Schritt 3: Initialisieren Sie Tailwind CSS

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

SHELL

Dadurch werden zwei neue Dateien in Ihrem Projekt erstellt: tailwind.config.js und postcss.config.js.

Schritt 4: Konfigurieren Sie Tailwind CSS

Öffnen Sie die tailwind.config.js-Konfigurationsdatei und setzen Sie die Purge-Option, um ungenutztes CSS in der Produktion zu entfernen. Dies hilft, Ihr endgültiges CSS-Bundle klein zu halten. Hier können Sie auch den Klassennamen für den Dark Mode und den Pfad zu benutzerdefinierten Modulen definieren.

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

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

JAVASCRIPT

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;

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

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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // Existing CSS imports
import App from './App';
import './tailwind.css'; // Tailwind CSS import

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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // Existing CSS imports
import App from './App';
import './tailwind.css'; // Tailwind CSS import

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

JAVASCRIPT

Schritt 7: Verwenden Sie Tailwind CSS

Nun können Sie beginnen, die Tailwind-CSS-Klassen in Ihrem React-Komponentencode zu verwenden. Öffnen Sie die src/App.js-Datei 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">
      <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;

import React from 'react';

function App() {
  return (
    <div className="text-center min-h-screen flex items-center justify-center">
      <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;

JAVASCRIPT

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

SHELL

Ihre Anwendung sollte nun 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 zur Erstellung, Bearbeitung und Konvertierung von PDF-Dokumenten in verschiedenen Programmierumgebungen. Das IronPDF NPM-Paket ist speziell für Node.js-Anwendungen konzipiert.

Hier sind einige wichtige Features und Details zum IronPDF NPM-Paket:

Hauptmerkmale

HTML-zu-PDF-Konvertierung

Konvertieren Sie HTML-Inhalte mühelos in PDF-Dokumente. Dieses Feature ist besonders nützlich zur Erzeugung dynamischer PDFs aus Webinhalten.

URL-zu-PDF-Konvertierung

Generieren Sie PDFs direkt aus URLs, sodass Sie den Inhalt von Webseiten erfassen und sie programmgesteuert als PDF-Dateien speichern können.

PDF-Manipulation

Merge, teilen Sie sie und manipulieren Sie bestehende PDF-Dokumente mit Leichtigkeit. IronPDF bietet Funktionen wie das Hinzufügen von Seiten, das Teilen von Dokumenten, das Anpassen von PDFs und mehr.

PDF-Sicherheit

Secure your PDF documents by encrypting them with passwords or applying digital signatures. IronPDF bietet Optionen zum Schutz Ihrer sensiblen Dokumente vor unberechtigtem Zugriff.

Hohe Ausgabequalität

Erstellen Sie hochwertige PDF-Dokumente mit einer präzisen Wiedergabe von Text, Bildern und Formatierung. IronPDF stellt sicher, dass Ihre generierten PDFs die Originalinhalte getreu wiedergeben.

Plattformübergreifende Kompatibilität

IronPDF ist kompatibel mit verschiedenen Plattformen, darunter Windows, Linux und macOS, was es für eine breite Palette von Entwicklungsumgebungen geeignet macht.

Einfache Integration

Integrieren Sie IronPDF mühelos in Ihre Node.js-Anwendungen mithilfe seines npm-Pakets. Die API ist gut dokumentiert, was die Einbindung von PDF-Generierungsfähigkeiten in Ihre Projekte einfach macht.

Installation

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

 npm i @ironsoftware/ironpdf

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

Einrichtung eines Next.js-Projekts

Installieren Sie Abhängigkeiten: Erstellen Sie zuerst ein neues Next.js-Projekt (falls noch nicht geschehen) 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"

SHELL

Navigieren Sie als Nächstes in Ihr Projektverzeichnis:

cd tailwind-pdf

cd tailwind-pdf

SHELL

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

SHELL

Die obigen Anweisungen erstellen eine tailwind.config.js-Datei wie unten gezeigt:

/** @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: [],
}

/** @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: [],
}

JAVASCRIPT

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

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

Öffnen oder erstellen Sie die _app.js-Datei und fügen Sie die global.css-Datei wie unten gezeigt ein:

// These styles apply to every route in the application
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// These styles apply to every route in the application
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

JAVASCRIPT

Erstellen eines PDFs

Lassen Sie uns nun ein einfaches Beispiel zur Generierung eines PDFs mit IronPDF erstellen. Fügen Sie in Ihrer Next.js-Komponente (z. B. pages/index.tsx) den folgenden Code hinzu:

PDF-Erstellungs-API: Der erste Schritt ist das Erstellen einer Backend-API, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig läuft, müssen wir einen API-Aufruf erstellen, wenn ein Benutzer ein PDF generieren 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 in den untenstehenden Code einfügen 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();
    }
}

// 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();
    }
}

JAVASCRIPT

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

import Head from 'next/head';
import { useState } from "react";

export default function Home() {
    const [textInput, setTextInput] = useState('');

    // Function to generate PDF from the given URL
    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);
        }
    };

    // Handle change in text input for URL
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }

    return (
        <div>
            <Head>
                <title>Demo Tailwind 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>
                <input 
                    type="text" 
                    className="border p-2 m-4"
                    value={textInput}
                    onChange={handleChange} 
                    placeholder="Enter URL here" 
                />
                <button 
                    className='rounded-sm bg-blue-800 p-2 m-12 text-xl text-white' 
                    onClick={generatePdf}
                >
                    Generate PDF
                </button>
            </main> 
        </div>
    );
}

import Head from 'next/head';
import { useState } from "react";

export default function Home() {
    const [textInput, setTextInput] = useState('');

    // Function to generate PDF from the given URL
    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);
        }
    };

    // Handle change in text input for URL
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }

    return (
        <div>
            <Head>
                <title>Demo Tailwind 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>
                <input 
                    type="text" 
                    className="border p-2 m-4"
                    value={textInput}
                    onChange={handleChange} 
                    placeholder="Enter URL here" 
                />
                <button 
                    className='rounded-sm bg-blue-800 p-2 m-12 text-xl text-white' 
                    onClick={generatePdf}
                >
                    Generate PDF
                </button>
            </main> 
        </div>
    );
}

JAVASCRIPT

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

yarn dev

yarn dev

SHELL

OUTPUT für Tailwind CSS und IronPDF

tailwind npm (Wie es für Entwickler funktioniert): Abbildung 1 - Ausgabeseite für Tailwind und IronPDF Next.js-Anwendung

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

tailwind npm (Wie es für Entwickler funktioniert): Abbildung 2 - Ausgegebenes PDF, das aus URLs mit dem IronPDF-Paket generiert wurde

IronPDF-Lizenz

IronPDF-Seite.

Platzieren Sie hier den Lizenzschlüssel:

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

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

JAVASCRIPT

Abschluss

Die Integration von Tailwind CSS in ein React-Projekt mit npm ist einfach. Indem Sie diese Schritte befolgen, können Sie Tailwind CSS schnell einrichten und seine Utility-first-Klassen verwenden, 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-Generierungspaket, das Entwicklern hilft, es leicht in Enterprise-Apps zu integrieren. Die Beherrschung beider Technologien kann Entwicklern ermöglichen, moderne, funktionsreiche Anwendungen zu erstellen.

For more information on how to get started with IronPDF and reference code examples for different ways to incorporate it in your project, please visit the code examples and documentation page. IronPDF bietet Support- und Update-Optionen für alle Inhaber einer dauerhaften Lizenz. Es bietet auch einen 24/5 technischen Support während der Testphase.

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

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...