Icône de message
Passer au contenu du pied de page
  1. IronPDF for Node.js
  2. Blog IronPDF for Node.js
  3. Aide Node
  4. tailwind npm
AIDE NODE

tailwind npm (Comment ça marche pour les développeurs)

Darrius Serrant
Darrius Serrant
Mis à jour:

Tailwind CSS est un framework CSS orienté utilitaire populaire qui permet de concevoir rapidement des pages HTML. Il est hautement personnalisable et fonctionne parfaitement avec React, une puissante bibliothèque JavaScript pour construire des interfaces utilisateur. Dans cet article, nous vous guidons à travers le processus d'intégration de Tailwind CSS dans un projet React en utilisant npm. De plus, nous examinerons la bibliothèque de génération de PDF IronPDF pour générer des PDF à partir d'URL de sites Web.

Qu'est-ce que Tailwind CSS ?

Tailwind CSS est un framework CSS orienté utilitaire qui vous permet de créer des applications plus efficacement. Avec Tailwind, vous pouvez contrôler la mise en page, la couleur, l'espacement, la typographie, les ombres et plus encore en utilisant des classes utilitaires directement dans votre HTML. La meilleure partie ? Vous n'aurez pas besoin d'écrire de CSS personnalisé !

Si vous en avez assez de vous battre avec des noms de classes sémantiques traditionnels, essayez Tailwind CSS : vous pourriez vous demander comment vous avez pu travailler avec le CSS d'une autre manière !

Voici les étapes pour intégrer Tailwind CSS dans une application React.

Étape 1 : Créer un projet React

Créez une application React en utilisant la commande suivante. Cet outil configure un nouveau projet React avec une configuration par défaut raisonnable.

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

Étape 2 : Installer Tailwind CSS

Installez Tailwind CSS et ses dépendances en utilisant NPM. Ouvrez votre terminal et exécutez la commande suivante :

npm install -D tailwindcss postcss autoprefixer
npm install -D tailwindcss postcss autoprefixer
SHELL

Étape 3 : Initialiser Tailwind CSS

Ensuite, vous devez initialiser Tailwind CSS pour créer les fichiers de configuration par défaut. Exécutez la commande suivante :

npx tailwindcss init -p
npx tailwindcss init -p
SHELL

Cela créera deux nouveaux fichiers dans votre projet : tailwind.config.js et postcss.config.js.

Étape 4 : Configurer Tailwind CSS

Ouvrez le fichier de configuration tailwind.config.js et définissez l'option purge pour supprimer les CSS inutilisés en production. Cela aide à garder votre bundle CSS final petit. Vous pouvez également définir ici le nom de la classe du mode sombre et le chemin vers les modules personnalisés.

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

Étape 5 : Créer un fichier Tailwind CSS

Créez un nouveau fichier nommé src/tailwind.css et ajoutez-y le contenu suivant :

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

Étape 6 : Importer Tailwind CSS dans votre projet React

Ouvrez le fichier src/index.js et importez le fichier CSS Tailwind que vous venez de créer :

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

Étape 7 : Commencer à utiliser Tailwind CSS

Vous pouvez maintenant commencer à utiliser les classes Tailwind CSS dans le code de vos composants React. Ouvrez le fichier src/App.js et modifiez-le comme suit :

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

Étape 8 : Exécuter votre projet React

Enfin, démarrez votre serveur de développement pour voir Tailwind CSS en action :

npm start
npm start
SHELL

Votre application devrait maintenant fonctionner avec Tailwind CSS intégré. Vous pouvez commencer à utiliser les classes utilitaires de Tailwind pour styliser vos composants React facilement.

Introduction à IronPDF

IronPDF est une bibliothèque populaire utilisée pour générer, éditer et convertir des documents PDF dans divers environnements de programmation. Le package NPM IronPDF est spécialement conçu pour les applications Node.js.

Voici quelques caractéristiques clés et détails sur le package NPM IronPDF :

Caractéristiques clés

Conversion HTML en PDF

Convertissez facilement du contenu HTML en documents PDF. Cette fonctionnalité est particulièrement utile pour générer des PDF dynamiques à partir de contenu web.

Conversion d'URL en PDF

Générez des PDF directement à partir d'URL, vous permettant de capturer le contenu des pages Web et de les enregistrer sous forme de fichiers PDF programmatique.

Manipulation de PDF

Fusionnez, divisez et manipulez facilement les documents PDF existants. IronPDF fournit des fonctionnalités telles que l'ajout de pages, la division de documents, la personnalisation des PDF et plus encore.

Sécurité des PDF

Sécurisez vos documents PDF en les cryptant avec des mots de passe ou en leur appliquant des signatures numériques. IronPDF propose des options pour protéger vos documents sensibles contre l'accès non autorisé.

Sortie de Haute Qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et du formatage. IronPDF garantit que vos PDF générés maintiennent la fidélité au contenu original.

Compatibilité multiplateforme

IronPDF est compatible avec diverses plateformes, notamment Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

Intégration Simple

Intégrez facilement IronPDF dans vos applications Node.js en utilisant son paquet npm. L'API est bien documentée, ce qui la rend simple à intégrer des capacités de génération de PDF dans vos projets.

Installation

Pour installer le package NPM IronPDF, utilisez la commande suivante :

 npm i @ironsoftware/ironpdf

Générez un document PDF avec IronPDF et utilisez le package NPM Tailwind

Configurer un projet Next.js

Installation des dépendances : Commencez par créer un nouveau projet Next.js (si vous ne l'avez pas déjà fait) à l'aide de la commande suivante. Veuillez vous référer à la page de configuration.

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

Ensuite, naviguez vers votre répertoire de projet :

cd tailwind-pdf
cd tailwind-pdf
SHELL

Installez les paquets requis :

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

Les instructions ci-dessus créeront un fichier tailwind.config.js comme ci-dessous :

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

Ajoutez le code suivant au fichier global.css :

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

Ouvrez ou créez le fichier _app.js et incluez le fichier global.css comme indiqué ci-dessous :

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

Créer un PDF

Maintenant, créons un exemple simple de génération d'un PDF en utilisant IronPDF. Dans votre composant Next.js (par exemple, pages/index.tsx), ajoutez le code suivant :

API de génération de PDF : La première étape consiste à créer une API backend pour générer le document PDF. Puisque IronPDF ne s'exécute que côté serveur, nous devons créer un appel API lorsqu'un utilisateur souhaite générer un PDF. Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu ci-dessous.

IronPDF nécessite une clé de licence, que vous pouvez obtenir depuis la page de licence et placez-la dans le code ci-dessous.

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

Modifiez maintenant le code index.js pour utiliser le CSS Tailwind :

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

Exécutez maintenant l'application en utilisant la commande :

yarn dev
yarn dev
SHELL

RÉSULTAT pour Tailwind CSS et IronPDF

tailwind npm (Fonctionnement pour les développeurs) : Figure 1 - Page de sortie pour l'application Tailwind et IronPDF Next.js

Cliquez sur le bouton "Generate PDF" pour générer le PDF à partir de l'URL donnée.

tailwind npm (Fonctionnement pour les développeurs) : Figure 2 - PDF généré à partir d'une URL avec le package IronPDF

Licence IronPDF

Page IronPDF.

Placez la clé de licence ici :

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

Conclusion

Intégrer Tailwind CSS dans un projet React avec NPM est simple. En suivant ces étapes, vous pouvez rapidement configurer Tailwind CSS et commencer à utiliser ses classes orientées utilitaires pour construire des interfaces utilisateur réactives et personnalisables. La flexibilité de Tailwind CSS et ses puissantes options de personnalisation en font un excellent choix pour les développeurs React souhaitant rationaliser leur processus de stylisation. IronPDF est un package de génération de PDF polyvalent qui aide les développeurs à intégrer facilement dans des applications d'entreprise. Maîtriser ces deux technologies peut permettre aux développeurs de créer des applications modernes et riches en fonctionnalités.

Pour plus d'informations sur la façon de démarrer avec IronPDF et des exemples de code de référence pour les différentes façons de l'incorporer dans votre projet, veuillez visiter les exemples de code et la page de documentation. IronPDF offre des options de support et de mise à jour pour tous les titulaires de licences perpétuelles. Il offre également un support technique 24/5 pendant la période d'essai.

Notez qu'aucune information de carte de crédit ou création de compte n'est requise pour la licence d'essai gratuite, juste une adresse e-mail valide.

Darrius Serrant
Darrius Serrant
  Discutez maintenant avec l'équipe d'ingénierie
Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Essai gratuit

Équipe de soutien Iron

Nous sommes en ligne 24 heures sur 24, 5 jours sur 7.
Chat
Email
Appelez-moi