HILFE ZUM KNOTENPUNKT

tailwind npm (Wie es für Entwickler funktioniert)

Jordi Bardia

29. September 2024

Teilen Sie:

Tailwind CSSist ein beliebtes Utility-First-CSS-Framework, das ermöglicht, HTML-Seiten schnell zu gestalten. Es ist hochgradig anpassbar und funktioniert nahtlos mitReagieren Sie, eine leistungsstarke 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 Folgendes prüfenIronPDFPDF-Generierungsbibliothek zur Erstellung von PDF aus Website-URLs.

Was ist Tailwind CSS?

Tailwind CSSist 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 leid sind, sich mit traditionellen semantischen Klassennamen herumzuschlagen, probieren Sie Tailwind CSS aus – Sie könnten sich fragen, wie Sie je auf eine 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 AppVerwenden Sie den 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

Schritt 2: Installieren Sie Tailwind CSS

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

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

Dadurch werden zwei neue Dateien in Ihrem Projekt erstellt: 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: [],
}

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;

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

JAVASCRIPT

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')
);

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')
);

JAVASCRIPT

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;

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;

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

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

IronPDFist eine beliebte Bibliothek, die zum Erstellen, Bearbeiten und Konvertieren von PDF-Dokumenten in verschiedenen Programmiersprachen verwendet wird. DieIronPDFDas NPM-Paket ist speziell für Node.js-Anwendungen entwickelt.

Hier sind einige wichtige Funktionen und Details über die IronPDFNPM-Paket:

Wesentliche Merkmale

Konvertierung von HTML in PDF

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

Konvertierung von URL in PDF

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

PDF-Bearbeitung

Zusammenführen, geteilt, und bestehende PDF-Dokumente mühelos bearbeiten. 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 Sieverschlüsselungihnen mit Passwörtern oderanwendung digitaler Signaturen. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.

Hochwertiger Output

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

Plattformübergreifende Kompatibilität

IronPDFist kompatibel mit verschiedenen Plattformen, einschließlich Windows, Linux und macOS, was es für eine breite Palette von Entwicklungsumgebungen geeignet macht.

Einfache Integration

Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API istgut dokumentiert, wodurch es einfach ist, PDF-Erstellungsmöglichkeiten in Ihre Projekte zu integrieren.

Einrichtung

Zur Installation derIronPDF NPM-Paket, verwenden Sie den folgenden Befehl:

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(falls Sie es noch nicht getan haben)unter Verwendung des folgenden Befehls: Bitte beziehen Sie sich auf dieEinrichtungsseite.

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

Installieren Sie die erforderlichen Pakete:

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

/** @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;

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

JAVASCRIPT

Ö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} />
}

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

JAVASCRIPT

Eine PDF-Datei erstellen

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

PDF-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, um das PDF-Dokument zu generieren. 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 benötigt einen Lizenzschlüssel, den Sie von derlizenzseite und fügen Sie ihn in den unten stehenden Code ein.

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

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

JAVASCRIPT

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

yarn dev

AUSGABE 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 PDF generieren, um das PDF aus der angegebenen URL zu erzeugen.

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

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";

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

JAVASCRIPT

Schlussfolgerung

Integration vonTailwind CSSin 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. IronPDFist ein vielseitiges PDF-Generierungspaket, das Entwicklern hilft, es problemlos in Unternehmensanwendungen zu integrieren. Das Beherrschen beider oben genannten Fähigkeiten hilft Entwicklern, moderne Anwendungen mühelos zu erstellen.

Für weitere Informationen darüber, wie Sie mit IronPDF beginnen können, sowie für Referenzbeispiele, wie Sie es in Ihr Projekt integrieren können, besuchen Sie bitte dieCodebeispieleund Dokumentation*Seite. 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 Kontenerstellung erforderlich sind für dieTestlizenz, nur eine gültige E-Mail-Adresse.

Jordi Bardia

Jetzt mit dem Ingenieurteam chatten

Software-Ingenieur

Jordi beherrscht vor allem Python, C# und C++. Wenn er seine Fähigkeiten bei Iron Software nicht einsetzt, programmiert er Spiele. Durch seine Mitverantwortung für Produkttests, Produktentwicklung und Forschung trägt Jordi wesentlich zur kontinuierlichen Produktverbesserung bei. Die vielseitigen Erfahrungen, die er sammelt, bieten ihm immer wieder neue Herausforderungen, und er sagt, dass dies einer seiner Lieblingsaspekte bei Iron Software ist. Jordi wuchs in Miami, Florida, auf und studierte Informatik und Statistik an der University of Florida.

< PREVIOUS
dropzone npm (So funktioniert es für Entwickler)

NÄCHSTES >
Day.js npm (Funktioniert für Entwickler)