npm tailwind (Comment cela fonctionne pour les développeurs)

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

Qu'est-ce que Tailwind CSS ?

Tailwind CSS est un framework CSS axé sur les utilitaires qui vous permet de créer des applications plus efficacement. Avec Tailwind, vous pouvez contrôler la disposition, 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 CSS autrement ! 😊. Voici les étapes pour intégrer Tailwind CSS dans une application React.

Étape 1 : Créez un projet React

Create React App 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

É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

É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

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 le CSS inutilisé en production. Cela permet de garder votre paquetage CSS final petit. Vous pouvez également définir le nom de la classe pour le mode sombre ainsi que le chemin vers le module personnalisé ici.

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

js

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

js

Étape 6 : Importer Tailwind CSS dans votre projet React

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

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

Étape 7 : Commencez à 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"> ## 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

Étape 8 : Exécutez votre projet React

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

npm start

npm start

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

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 fonctionnalités clés et détails concernant le package NPM IronPDF :

Caractéristiques principales

Conversion de HTML en PDF

Convertir le contenu HTML en documents PDF sans effort. Cette fonction est particulièrement utile pour générer des PDF dynamiques à partir de contenus 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 en tant que fichiers PDF de manière programmatique.

Manipulation des PDF

Fusionner, diviser et manipuler des documents PDF existants avec facilité. IronPDF offre des fonctionnalités telles que l'ajout de pages, la séparation de documents, la personnalisation de PDF, et plus encore.

Sécurité PDF

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

Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme. IronPDF veille à ce que les PDF générés restent fidèles au contenu original.

Compatibilité multiplateforme

IronPDF est compatible avec diverses plates-formes, y compris Windows, Linux et macOS, ce qui le rend adapté à une large gamme d'environnements de développement.

Intégration simple

Intégrez facilement IronPDF à vos applications Node.js à l'aide de son package npm. L'API est bien documentée, ce qui facilite l'intégration des fonctionnalité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

npm i @ironsoftware/ironpdf

Générez un document PDF en utilisant IronPDF et utilisez le package NPM Tailwind.

Configurer un projet Next.js

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js (si vous ne l'avez pas déjà fait) en utilisant 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"

Ensuite, accédez au répertoire de votre projet :

cd tailwind-pdf

cd tailwind-pdf

Installez les paquets nécessaires :

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

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

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

Ajoutez le code ci-dessous au fichier global.css

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

js

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

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

js

Créer un PDF

Maintenant, créons un exemple simple de génération de 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. Comme IronPDF ne fonctionne que côté serveur, nous devons créer une API à appeler 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, vous pouvez l'obtenir sur la page de licence et l'insérer 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();
    }
}

js

Modifiez maintenant le code index.js comme ci-dessous pour utiliser Tailwind CSS.

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

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

yarn dev

yarn dev

SORTIE pour Tailwind CSS et IronPDF

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

Licence d'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";

js

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 utilitaires pour créer des interfaces utilisateur réactives et personnalisables. La flexibilité et les puissantes options de personnalisation de Tailwind CSS en font un excellent choix pour les développeurs React cherchant à simplifier leur processus de stylisation. IronPDF est un package de génération de PDF polyvalent qui aide les développeurs à s'intégrer facilement dans les applications d'entreprise. Avoir ces deux compétences permet aux développeurs de créer des applications modernes avec facilité.

Pour plus d'informations sur comment commencer avec IronPDF et des exemples de code de référence pour différentes manières de l'intégrer 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 détenteurs de licence perpétuelle. Il propose é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 email valide.