Nachrichtensymbol
Zum Fußzeileninhalt springen
  1. IronPDF for Node.js
  2. IronPDF für den Node.js Blog
  3. Node-Hilfe
  4. tailwind npm
NODE-HILFE

tailwind npm (Wie es für Entwickler funktioniert)

Darrius Serrant
Darrius Serrant
Aktualisiert:

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

Create 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 folgenden Inhalt hinzu:

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

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

Öffnen Sie die Datei src/index.js und importieren Sie die soeben 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 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">
      <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

Fügen Sie PDFs zusammen, 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

Sichern Sie Ihre PDF-Dokumente durch Verschlüsselung mit Passwörtern oder digitale Signaturen. 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

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls 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"
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 erzeugen 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: [],
}
/** @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 Datei global.css hinzu:

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

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

// 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-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zur Generierung des PDF-Dokuments zu erstellen. 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 unten stehenden Inhalt ein.

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 Code index.js so, dass er Tailwind CSS verwendet:

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 (So funktioniert es für Entwickler): Abbildung 1 – Ausgabeseite für die 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 (So funktioniert es für Entwickler): Abbildung 2 - Aus einer URL generierte PDF-Datei mit dem IronPDF Paket

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.

Für weitere Informationen zum Einstieg in IronPDF und zu Beispielcodes für verschiedene Möglichkeiten, es in Ihr Projekt zu integrieren, besuchen Sie bitte die Codebeispiele und die Dokumentationsseite. 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
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 ...

Weiterlesen

Verwandte Artikel

30-Tage-Testversion → Volles Produkt. Keine Grenzen. Keine Karte. Gratis testen

Iron Support Team

Wir sind 24 Stunden am Tag, 5 Tage die Woche online.
Chat
E-Mail
Rufen Sie mich an