Ícone de mensagem
Ir para o conteúdo do rodapé
  1. IronPDF for Node.js
  2. Blog do IronPDF for Node.js
  3. Ajuda do Node
  4. tailwind npm
AJUDA DO NODE

Tailwind npm (Como funciona para desenvolvedores)

Darrius Serrant
Darrius Serrant
Atualizado:

Tailwind CSS é um framework CSS popular, focado em utilitários, que permite criar páginas HTML rapidamente. É altamente personalizável e funciona perfeitamente com o React , uma poderosa biblioteca JavaScript para a construção de interfaces de usuário. Neste artigo, vamos orientá-lo no processo de integração do Tailwind CSS em um projeto React usando o npm. Além disso, vamos analisar a biblioteca IronPDF para gerar PDFs a partir de URLs de sites.

O que é Tailwind CSS?

Tailwind CSS é um framework CSS focado em utilitários que permite criar aplicações de forma mais eficiente. Com o Tailwind, você pode controlar layout, cor, espaçamento, tipografia, sombras e muito mais usando classes utilitárias diretamente no seu HTML. A melhor parte? Você não precisará escrever CSS personalizado!

Se você está cansado de lidar com nomes de classes semânticas tradicionais, experimente o Tailwind CSS — você pode se perguntar como conseguiu trabalhar com CSS de outra forma!

A seguir estão os passos para integrar o Tailwind CSS em uma aplicação React.

Passo 1: Criar um projeto React

Crie um aplicativo React usando o seguinte comando. Esta ferramenta configura um novo projeto React com uma configuração padrão adequada.

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

Passo 2: Instale o Tailwind CSS

Instale o Tailwind CSS e suas dependências usando o npm . Abra o terminal e execute o seguinte comando:

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

Etapa 3: Inicializar o Tailwind CSS

Em seguida, você precisa inicializar o Tailwind CSS para criar os arquivos de configuração padrão. Execute o seguinte comando:

npx tailwindcss init -p
npx tailwindcss init -p
SHELL

Isso criará dois novos arquivos em seu projeto: tailwind.config.js e postcss.config.js .

Etapa 4: Configurar o Tailwind CSS

Abra o arquivo de configuração tailwind.config.js e defina a opção purge para remover o CSS não utilizado em produção. Isso ajuda a manter seu pacote CSS final pequeno. Você também pode definir o nome da classe do modo escuro e o caminho para os módulos personalizados aqui.

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

Passo 5: Criar um arquivo CSS do Tailwind

Crie um novo arquivo chamado src/tailwind.css e adicione o seguinte conteúdo a ele:

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

Passo 6: Importe o Tailwind CSS para o seu projeto React.

Abra o arquivo src/index.js e importe o arquivo CSS do Tailwind que você acabou de criar:

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

Passo 7: Comece a usar o Tailwind CSS

Agora você pode começar a usar as classes CSS do Tailwind no código dos seus componentes React. Abra o arquivo src/App.js e modifique-o da seguinte forma:

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

Etapa 8: Execute seu projeto React

Por fim, inicie o servidor de desenvolvimento para ver o Tailwind CSS em ação:

npm start
npm start
SHELL

Seu aplicativo agora deve estar funcionando com o Tailwind CSS integrado. Você pode começar a usar as classes utilitárias do Tailwind para estilizar seus componentes React facilmente.

Introdução ao IronPDF

IronPDF é uma biblioteca popular usada para gerar, editar e converter documentos PDF em diversos ambientes de programação. O pacote IronPDF NPM foi projetado especificamente para aplicações Node.js

Aqui estão alguns recursos e detalhes importantes sobre o pacote IronPDF NPM:

Principais características

Conversão de HTML para PDF

Converta conteúdo HTML em documentos PDF sem esforço. Essa funcionalidade é particularmente útil para gerar PDFs dinâmicos a partir de conteúdo da web.

Conversão de URL para PDF

Gere PDFs diretamente a partir de URLs , permitindo capturar o conteúdo de páginas da web e salvá-los como arquivos PDF programaticamente.

Manipulação de PDF

Mescle , divida e manipule documentos PDF existentes com facilidade. O IronPDF oferece funcionalidades como adicionar páginas, dividir documentos, personalizar PDFs e muito mais.

Segurança de PDF

Proteja seus documentos PDF criptografando- os com senhas ou aplicando assinaturas digitais . O IronPDF oferece opções para proteger seus documentos confidenciais contra acesso não autorizado.

Saída de alta qualidade

Produza documentos PDF de alta qualidade com renderização precisa de texto, imagens e formatação . O IronPDF garante que os PDFs gerados mantenham a fidelidade ao conteúdo original.

Compatibilidade entre plataformas

O IronPDF é compatível com diversas plataformas, incluindo Windows, Linux e macOS, tornando-o adequado para uma ampla gama de ambientes de desenvolvimento.

Integração simples

Integre facilmente o IronPDF em suas aplicações Node.js usando o pacote npm. A API é bem documentada , o que facilita a incorporação de recursos de geração de PDF em seus projetos.

Instalação

Para instalar o pacote NPM do IronPDF , use o seguinte comando:

 npm e @ironsoftware/ironpdf

Gere um documento PDF usando o IronPDF e o pacote Tailwind NPM.

Configurar um projeto Next.js

Instale as dependências: Primeiro, crie um novo projeto Next.js (caso ainda não tenha feito isso) usando o seguinte comando. Consulte a página de configuração .

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

Em seguida, navegue até o diretório do seu projeto:

cd tailwind-pdf
cd tailwind-pdf
SHELL

Instale os pacotes necessários:

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

As instruções acima criarão um arquivo tailwind.config.js como o seguinte:

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

Adicione o seguinte código ao arquivo global.css:

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

Abra ou crie o arquivo _app.js e inclua o arquivo global.css conforme mostrado abaixo:

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

Criar um PDF

Agora, vamos criar um exemplo simples de geração de um PDF usando o IronPDF . No seu componente Next.js (ex.: pages/index.tsx), adicione o seguinte código:

API de geração de PDF: O primeiro passo é criar uma API de backend para gerar o documento PDF. Como o IronPDF só funciona no servidor, precisamos criar uma chamada de API quando um usuário deseja gerar um PDF. Crie um arquivo no caminho pages/api/pdf.js e adicione o conteúdo abaixo.

O IronPDF requer uma chave de licença, que você pode obter na página de licenças e inserir no código abaixo.

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

Agora modifique o código index.js para usar o CSS do 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

Agora execute o aplicativo usando o comando:

yarn dev
yarn dev
SHELL

Saída para Tailwind CSS e IronPDF

tailwind npm (Como funciona para desenvolvedores): Figura 1 - Página de saída para o aplicativo Tailwind e IronPDF Next.js

Clique no botão "Gerar PDF" para gerar o PDF a partir do URL fornecido.

tailwind npm (Como funciona para desenvolvedores): Figura 2 - PDF de saída gerado a partir de URL usando o pacote IronPDF

Licença IronPDF

Página do IronPDF .

Insira a chave de licença aqui:

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

Conclusão

Integrar o Tailwind CSS em um projeto React com npm é muito simples. Seguindo esses passos, você pode configurar rapidamente o Tailwind CSS e começar a usar suas classes utilitárias para criar interfaces de usuário responsivas e personalizáveis. A flexibilidade e as poderosas opções de personalização do Tailwind CSS o tornam uma excelente escolha para desenvolvedores React que buscam simplificar seu processo de estilização. O IronPDF é um pacote versátil para geração de PDFs que ajuda os desenvolvedores a integrá-lo facilmente em aplicativos corporativos. Dominar essas duas tecnologias permite que os desenvolvedores criem aplicativos modernos e repletos de recursos.

Para obter mais informações sobre como começar a usar o IronPDF e exemplos de código de referência para diferentes maneiras de incorporá-lo ao seu projeto, visite a página de exemplos de código e documentação. O IronPDF oferece suporte e opções de atualização para todos os detentores de licenças perpétuas. Oferece também suporte técnico 24 horas por dia, 5 dias por semana, durante o período de teste.

Note que não são necessárias informações de cartão de crédito nem criação de conta para a licença de avaliação gratuita , apenas um endereço de e-mail válido.

Darrius Serrant
Darrius Serrant
  Converse agora mesmo com a equipe de engenharia.
Engenheiro de Software Full Stack (WebOps)

Darrius Serrant é bacharel em Ciência da Computação pela Universidade de Miami e trabalha como Engenheiro de Marketing WebOps Full Stack na Iron Software. Atraído por programação desde jovem, ele via a computação como algo misterioso e acessível ao mesmo tempo, tornando-a o meio ...

Leia mais

Artigos relacionados

Teste grátis por 30 dias → Produto completo. Sem limites. Sem cartão. Comece seu teste gratuito

Equipe de suporte de ferro

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim