npm de Tailwind (Cómo Funciona Para Desarrolladores)

Tailwind CSS es un popular framework CSS orientado a utilidades que permite diseñar páginas HTML rápidamente. Es altamente personalizable y funciona perfectamente con React, una poderosa biblioteca de JavaScript para construir interfaces de usuario. En este artículo, le guiaremos a través del proceso de integración de Tailwind CSS en un proyecto de React utilizando npm. Además, investigaremos la biblioteca de generación de PDF IronPDF para generar PDF a partir de URLs de sitios web.

¿Qué es Tailwind CSS?

Tailwind CSS es un framework CSS centrado en utilidades que te permite crear aplicaciones de manera más eficiente. Con Tailwind, puedes controlar el diseño, color, espaciado, tipografía, sombras y más utilizando clases de utilidad directamente en tu HTML. ¿La mejor parte? ¡No necesitarás escribir CSS personalizado! 🚀

Si estás cansado de lidiar con nombres de clases semánticas tradicionales, prueba Tailwind CSS; ¡podrías preguntarte cómo trabajaste alguna vez con CSS de otra manera! 😊. A continuación, se detallan los pasos para integrar Tailwind CSS en una aplicación de React.

Paso 1: Crear un proyecto de React

Create React App utilizando el siguiente comando. Esta herramienta configura un nuevo proyecto React con una configuración predeterminada sensata.

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

Paso 2: Instalar Tailwind CSS

Instale Tailwind CSS y sus dependencias usando npm. Abra su terminal y ejecute el siguiente comando:

npm install -D tailwindcss postcss autoprefixer

npm install -D tailwindcss postcss autoprefixer

Paso 3: Inicializar Tailwind CSS

A continuación, necesitas inicializar Tailwind CSS para crear los archivos de configuración predeterminados. Ejecute el siguiente comando:

npx tailwindcss init -p

npx tailwindcss init -p

Esto creará dos nuevos archivos en tu proyecto: tailwind.config.js y postcss.config.js.

Paso 4: Configurar Tailwind CSS

Abre el archivo de configuración tailwind.config.js y establece la opción purge para eliminar el CSS no utilizado en producción. Esto ayuda a mantener pequeño el tamaño final de tu paquete CSS. También puedes definir el nombre de la clase para el modo oscuro y la ruta al módulo personalizado aquí.

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

js

Paso 5: Crear un archivo Tailwind CSS

Crea un nuevo archivo llamado src/tailwind.css y agrega el siguiente contenido:

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

js

Paso 6: Importar Tailwind CSS en tu proyecto de React.

Abre el archivo src/index.js e importa el archivo de Tailwind CSS que acabas de crear:

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

Paso 7: Comienza a usar Tailwind CSS

Ahora puedes comenzar a usar clases de Tailwind CSS en el código de tus componentes React. Abre el archivo src/App.js y modifícalo de la siguiente manera:

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

Paso 8: Ejecuta tu proyecto de React

Finalmente, inicia tu servidor de desarrollo para ver Tailwind CSS en acción:

npm start

npm start

Tu aplicación ahora debería estar funcionando con Tailwind CSS integrado. Puede comenzar a usar las clases de utilidad de Tailwind para estilizar sus componentes de React fácilmente.

Introducción a IronPDF

IronPDF es una biblioteca popular utilizada para generar, editar y convertir documentos PDF en varios entornos de programación. El paquete NPM de IronPDF está diseñado específicamente para aplicaciones de Node.js.

A continuación se presentan algunas características clave y detalles sobre el paquete NPM de IronPDF:

Características principales

Conversión de HTML a PDF

Convierta contenido HTML en documentos PDF sin esfuerzo. Esta función es especialmente útil para generar PDF dinámicos a partir de contenidos web.

Conversión de URL a PDF

Genere PDFs directamente desde URLs, lo que le permite capturar el contenido de las páginas web y guardarlas como archivos PDF mediante programación.

Manipulación de PDF

Fusiona, divide y manipula documentos PDF existentes con facilidad. IronPDF ofrece funcionalidades como añadir páginas, dividir documentos, personalizar PDFs y más.

Seguridad PDF

Protege tus documentos PDF encriptándolos con contraseñas o aplicando firmas digitales. IronPDF ofrece opciones para proteger sus documentos confidenciales del acceso no autorizado.

Salida de alta calidad

Produzca documentos PDF de alta calidad con un renderizado preciso de texto, imágenes y formateo. IronPDF garantiza que los PDF generados mantengan la fidelidad al contenido original.

Compatibilidad multiplataforma

IronPDF es compatible con varias plataformas, incluyendo Windows, Linux y macOS, lo que lo hace adecuado para una amplia gama de entornos de desarrollo.

Integración sencilla

Integre fácilmente IronPDF en sus aplicaciones Node.js utilizando su paquete npm. La API está bien documentada, lo que facilita la incorporación de capacidades de generación de PDF en tus proyectos.

Instalación

Para instalar el paquete NPM de IronPDF, utiliza el siguiente comando:

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

Generar documento PDF usando IronPDF y usar el paquete NPM de Tailwind

Configurar un proyecto Next.js

Instalar dependencias: Primero, crea un nuevo proyecto Next.js (si aún no lo has hecho) usando el siguiente comando: Por favor, consulta la página de configuración.

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"

A continuación, vaya al directorio de su proyecto:

cd tailwind-pdf

cd tailwind-pdf

Instale los paquetes necesarios:

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

Las declaraciones anteriores crearán un archivo 'tailwind.config.js' como se muestra a continuación:

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

Agrega el siguiente código al archivo global.css

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

js

Abra o cree el archivo _app.js e incluya el archivo global.css como se indica a continuación.

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

js

Crear un PDF

Ahora, vamos a crear un ejemplo sencillo de cómo generar un PDF usando IronPDF. En tu componente de Next.js (por ejemplo, pages/index.tsx), agrega el siguiente código:

API de Generación de PDF: El primer paso es crear una API de backend para generar el documento PDF. Dado que IronPDF sólo se ejecuta del lado del servidor, necesitamos crear una API a la que llamar cuando un usuario quiera generar un PDF. Crea un archivo en la ruta pages/api/pdf.js y añade los siguientes contenidos.

IronPDF requiere una clave de licencia, puedes obtenerla en la página de licencias y colocarla en el siguiente código.

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

Ahora modifica el código de index.js como se muestra a continuación para usar 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

Ahora ejecuta la aplicación usando el comando:

yarn dev

yarn dev

SALIDA para Tailwind CSS e IronPDF

Haga clic en el botón Generar PDF para generar el PDF a partir de la URL proporcionada.

Licencia IronPDF

Página de IronPDF.

Coloque aquí la clave de licencia:

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

js

Conclusión

Integrar Tailwind CSS en un proyecto de React con npm es sencillo. Siguiendo estos pasos, puedes configurar rápidamente Tailwind CSS y comenzar a usar sus clases utility-first para construir interfaces de usuario (UI) receptivas y personalizables. La flexibilidad y las potentes opciones de personalización de Tailwind CSS lo convierten en una excelente opción para los desarrolladores de React que buscan agilizar su proceso de estilización. IronPDF es un paquete versátil de generación de PDF que ayuda a los desarrolladores a integrarse fácilmente en aplicaciones empresariales. Tener ambas habilidades mencionadas anteriormente ayuda a los desarrolladores a crear aplicaciones modernas con facilidad.

Para obtener más información sobre cómo comenzar con IronPDF y ejemplos de código para diferentes formas de incorporarlo en su proyecto, visite los ejemplos de código y la página de documentación. IronPDF ofrece opciones de soporte y actualización para todos los titulares de licencias perpetuas. También ofrece soporte técnico 24/5 durante el período de prueba.

Tenga en cuenta que no se requiere información de tarjeta de crédito ni creación de cuenta para la licencia de prueba gratuita, solo una dirección de correo electrónico válida.