AIDE SUR LES NœUDS

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

Kannapat Udonpant

septembre 29, 2024

Tailwind CSSest un framework CSS populaire axé sur l'utilité qui permet de concevoir rapidement des pages HTML. Il est hautement personnalisable et fonctionne parfaitement avecRéagir, 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 égalementIronPDFBibliothèque de génération PDF pour générer des PDF à partir d'URL de sites Web.

Qu'est-ce que Tailwind CSS ?

Tailwind CSSest un framework CSS axé sur l'utilitaire 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 débattre avec les noms de classes sémantiques traditionnels, essayez Tailwind CSS—vous vous demanderez comment vous avez pu travailler avec le CSS autrement.! 😊. Voici les étapes pour intégrer Tailwind CSS dans une application React.

Étape 1 : Créez un projet React

Créer une application Reacten 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

Étape 2 : Installer Tailwind CSS

Installer Tailwind CSS et ses dépendancesutilisation de npm. Ouvrez votre terminal et exécutez la commande suivante :

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

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

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;

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

JAVASCRIPT

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

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

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

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

Étape 8 : Exécutez votre projet React

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

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

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

Voici quelques fonctionnalités clés et détails concernant leIronPDFPackage NPM :

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érerPDFs directement depuis des URLs, vous permettant de capturer le contenu des pages web et de les enregistrer sous forme de fichiers PDF par programmation.

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

Protégez vos documents PDF enchiffrementles protéger par des mots de passe oul'application 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 etmise en forme. IronPDF veille à ce que les PDF générés restent fidèles au contenu original.

Compatibilité multiplateforme

IronPDFest compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à un large éventail 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é, ce qui rend facile l'intégration des capacités de génération de PDF dans vos projets.

Installation

Pour installer lePackage NPM IronPDF, utilisez la commande suivante :

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 encore fait)en utilisant la commande suivante : Veuillez vous référer aupage de configuration.

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

Installez les paquets nécessaires :

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

/** @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 ci-dessous au fichier global.css

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

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

JAVASCRIPT

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

// 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. 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 à partir de la pagepage de licence et le placer 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 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>
    );
}

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

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

yarn dev

SORTIE pour Tailwind CSS et IronPDF

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

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

npm tailwind(Comment ça fonctionne pour les développeurs) : Figure 2 - PDF de sortie généré à partir de l'URL à l'aide du package IronPDF

Licence d'IronPDF

IronPDF page.

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égrerTailwind CSSdans 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. IronPDFest un package de génération de PDF polyvalent qui aide les développeurs à s'intégrer facilement dans des applications d'entreprise sans effort. 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 pour des exemples de code de référence concernant différentes manières de l'intégrer dans votre projet, veuillez visiter le exemples de codeet documentationpage. 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 ni création de compte n'est requise pour lelicence d'essai gratuit, juste une adresse e-mail valide.

Kannapat Udonpant

Discutez avec l'équipe d'ingénierie maintenant

Ingénieur logiciel

Avant de devenir ingénieur logiciel, Kannapat a obtenu un doctorat en ressources environnementales à l'université d'Hokkaido au Japon. Tout en poursuivant ses études, Kannapat est également devenu membre du Vehicle Robotics Laboratory, qui fait partie du Department of Bioproduction Engineering (département d'ingénierie de la bioproduction). En 2022, il a mis à profit ses compétences en C# pour rejoindre l'équipe d'ingénieurs d'Iron Software, où il se concentre sur IronPDF. Kannapat apprécie son travail car il apprend directement auprès du développeur qui écrit la majeure partie du code utilisé dans IronPDF. Outre l'apprentissage par les pairs, Kannapat apprécie l'aspect social du travail chez Iron Software. Lorsqu'il n'écrit pas de code ou de documentation, Kannapat peut généralement être trouvé en train de jouer sur sa PS5 ou de revoir The Last of Us.

< PRÉCÉDENT
dropzone npm (Comment cela fonctionne pour les développeurs)

SUIVANT >
Day.js npm (Comment cela fonctionne pour les développeurs)