Pruebas en un entorno real
Pruebe en producción sin marcas de agua.
Funciona donde lo necesites.
Tailwind CSS es un marco CSS muy popular orientado a utilidades que permite diseñar rápidamente páginas HTML. Es altamente personalizable y funciona perfectamente con Reaccione, una poderosa biblioteca de JavaScript para construir interfaces de usuario. En este artículo, te guiaremos a través del proceso de integrar Tailwind CSS en un proyecto de React usando npm. Además, estudiaremos IronPDF Biblioteca de generación de PDF para generar PDF a partir de URLs de sitios web.
Tailwind CSS es un marco de CSS orientado a 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 los nombres de clases semánticas tradicionales, prueba Tailwind CSS; podrías preguntarte cómo has trabajado con CSS de otra manera.! 😊. A continuación, se detallan los pasos para integrar Tailwind CSS en una aplicación de React.
Crear aplicación React usando 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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-react-app my-tailwind-react-app cd my-tailwind-react-app
Instalar 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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install -D tailwindcss postcss autoprefixer
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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx tailwindcss init -p
Esto creará dos nuevos archivos en tu proyecto: tailwind.config.js y postcss.config.js.
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: [],
}
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, theme: { extend: {}}, variants: { extend: {}}, plugins: []}
Crea un nuevo archivo llamado src/tailwind.css y agrega el siguiente contenido:
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
Dim MyBase As tailwind
Dim components As tailwind
Dim utilities As tailwind
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')
);
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')
);
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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'));
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;
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;
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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;
Finalmente, inicia tu servidor de desarrollo para ver Tailwind CSS en acción:
npm start
npm start
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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.
IronPDF es una biblioteca popular usada para generar, editar y convertir documentos PDF en varios entornos de programación. En IronPDF El paquete NPM está diseñado específicamente para aplicaciones de Node.js.
Aquí hay algunas características clave y detalles sobre el IronPDF Paquete NPM:
Convertir contenido HTML en documentos PDF. sin esfuerzo. Esta función es especialmente útil para generar PDF dinámicos a partir de contenidos web.
Generar PDFs directamente desde URLs, lo que le permite capturar el contenido de las páginas web y guardarlas como archivos PDF de forma programática.
Fusión, dividiry manipular documentos PDF existentes con facilidad. IronPDF ofrece funcionalidades como añadir páginas, dividir documentos, personalizar PDFs y más.
Asegure sus documentos PDF mediante encriptación ellos con contraseñas o aplicación de firmas digitales. IronPDF ofrece opciones para proteger sus documentos confidenciales del acceso no autorizado.
Producir documentos PDF de alta calidad con un renderizado preciso de texto, imágenes y formato. IronPDF garantiza que los PDF generados mantengan la fidelidad al contenido original.
IronPDF es compatible con varias plataformas, incluidas Windows, Linux y macOS, lo que lo hace adecuado para una amplia gama de entornos de desarrollo.
Integre fácilmente IronPDF en sus aplicaciones Node.js utilizando su paquete npm. La API es bien documentado, lo que hace que sea sencillo incorporar capacidades de generación de PDF en tus proyectos.
Para instalar el Paquete NPM de IronPDF, usa el siguiente comando:
npm i @ironsoftware/ironpdf
npm i @ironsoftware/ironpdf
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm i @ironsoftware/ironpdf
Instalar dependencias: Primero, crea un nuevo proyecto Next.js (si aún no lo ha hecho) usando el siguiente comando: Por favor, consulte el 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"
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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: [],
}
/** @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}", "./src/**/*.{js,ts,jsx,tsx,mdx}",), theme: { extend: {}}, plugins: ()}
Agrega el siguiente código al archivo global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
Dim MyBase As tailwind
Dim components As tailwind
Dim utilities As tailwind
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} />
}
// 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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import '@/styles/globals.css' export default @function App({ Component, pageProps }) { Return <Component {...pageProps} /> }
Ahora, vamos a crear un ejemplo sencillo de cómo generar un PDF usando IronPDF. En tu componente de Next.js (por ejemplo, páginas/index.tsx)añade 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, que puede obtener en la página página de licencia y colócalo 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();
}
}
// 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();
}
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
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>
);
}
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>
);
}
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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/System.Nullable<pdf>url='+textInput); const blob = await response.blob(); const url = window.URL.createObjectURL(New Blob([blob])); const link = document.createElement("a"c); 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>); }
Ahora ejecuta la aplicación usando el comando:
yarn dev
yarn dev
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn dev
Haga clic en el botón Generar PDF para generar el PDF a partir de la URL proporcionada.
IronPDF página.
Coloque aquí la clave de licencia:
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";
IRON VB CONVERTER ERROR developers@ironsoftware.com
Integración de Tailwind CSS en un proyecto 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 integrar fácilmente en aplicaciones empresariales con facilidad. 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 consultar ejemplos de código para diferentes formas de incorporarlo en tu proyecto, visita el ejemplos de código y documentación página. 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 el licencia de prueba gratuita, solo una dirección de correo electrónico válida.
9 productos API .NET para sus documentos de oficina