1. IronPDF for Node.js
  2. IronPDF for Node.js博客
  3. 节点帮助
  4. Tailwind npm
节点帮助

tailwind npm（为开发人员提供的工作原理）

Darrius Serrant
Darrius Serrant
2024年九月29日
分享:

Tailwind CSS 是一个流行的实用优先CSS框架，可以快速设计HTML页面。 它具有高度的可定制性，并能够与React——一个用于构建用户界面的强大的JavaScript库无缝协作。 在本文中，我们将引导您通过使用 npm 将 Tailwind CSS 集成到 React 项目中的过程。 另外，我们将查看IronPDF PDF 生成库，以从网站 URL 生成 PDF。

什么是Tailwind CSS？

Tailwind CSS 是一个实用工具优先的 CSS 框架，让您更高效地创建应用程序。 使用Tailwind，您可以在HTML中直接使用工具类来控制布局、颜色、间距、排版、阴影等。 最棒的部分？ 您无需编写自定义CSS！ 🚀

如果您厌倦了与传统的语义类名作斗争，不妨试试Tailwind CSS——您可能会想，不知道以前是怎么以其他方式使用CSS的！ 😊. 以下是在 React 应用程序中集成 Tailwind CSS 的步骤。

步骤 1：创建一个 React 项目

Create React App 使用以下命令。 此工具使用合理的默认配置设置一个新的 React 项目。

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

步骤 2：安装 Tailwind CSS

使用npm安装Tailwind CSS及其依赖项。 打开终端并运行以下命令：

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

步骤 3：初始化 Tailwind CSS

接下来，您需要初始化 Tailwind CSS 以创建默认配置文件。 运行以下命令

npx tailwindcss init -p
npx tailwindcss init -p
SHELL

这将在您的项目中创建两个新文件：tailwind.config.js 和 postcss.config.js。

步骤 4：配置 Tailwind CSS

打开 tailwind.config.js 配置文件，并设置 purge 选项以在生产环境中移除未使用的 CSS。 这有助于保持最终的CSS包小巧。 您还可以在这里定义暗模式类名和自定义模块的路径。

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

步骤 5：创建一个 Tailwind CSS 文件

创建一个名为 src/tailwind.css 的新文件，并向其中添加以下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;
js
JAVASCRIPT

步骤 6：在您的 React 项目中导入 Tailwind CSS

打开 src/index.js 文件并导入刚刚创建的 Tailwind CSS 文件：

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
JAVASCRIPT

步骤 7：开始使用Tailwind CSS

现在您可以在 React 组件代码中开始使用 Tailwind CSS 类。 打开 src/App.js 文件并按如下修改：

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
JAVASCRIPT

步骤 8：运行你的 React 项目

最后，启动您的开发服务器以查看 Tailwind CSS 的实际效果：

npm start
npm start
SHELL

您的应用程序现在应该正在运行，并集成了Tailwind CSS。 您可以开始使用Tailwind的实用工具类轻松地为您的React组件进行样式设置。

IronPDF 简介

IronPDF 是一个流行的库，用于在各种编程环境中生成、编辑和转换 PDF 文档。 IronPDF NPM 包专为 Node.js 应用程序设计。

以下是有关IronPDF NPM包的一些关键功能和详细信息：

主要功能

HTML 转换为 PDF

将HTML内容轻松转换为PDF文档。 此功能特别适用于从网页内容生成动态PDF。

URL 转换为 PDF

直接从URL生成PDF，让您能够捕获网页内容并以编程方式将其保存为PDF文件。

PDF 操作

合并、拆分和轻松操作现有的 PDF 文档。 IronPDF提供了追加页面、拆分文档、自定义PDF等功能。

PDF 安全

通过使用密码加密或应用数字签名来保护您的PDF文档。 IronPDF 提供选项以保护您的敏感文档免受未经授权的访问。

高质量输出

生成高质量的PDF文档，精确呈现文本、图像和格式。 IronPDF 确保您生成的 PDF 保持与原始内容的一致性。

跨平台兼容性

IronPDF 兼容多个平台，包括 Windows、Linux 和 macOS，因此适用于各种开发环境。

简单集成

使用其npm软件包轻松将IronPDF集成到您的Node.js应用程序中。 该API 有良好的文档，使得在项目中集成PDF生成功能变得简单直接。

安装

要安装IronPDF NPM 包，请使用以下命令：

npm i @ironsoftware/ironpdf
npm i @ironsoftware/ironpdf
SHELL

使用 IronPDF 生成 PDF 文档，并使用 Tailwind NPM 包

设置一个Next.js项目

安装依赖项：首先，使用以下命令创建一个新的Next.js项目（如果您还没有创建的话）：请参考设置页面。

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

接下来，导航到你的项目目录：

cd tailwind-pdf
cd tailwind-pdf
SHELL

安装所需的软件包：

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

上述语句将创建一个名为“tailwind.config.js”的文件，如下所示：

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

将以下代码添加到global.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;
js
JAVASCRIPT

打开或创建 _app.js 文件，并如下所示包含 global.css 文件。

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

创建 PDF

现在，让我们创建一个使用IronPDF生成PDF的简单示例。 在你的 Next.js 组件中（例如，pages/index.tsx），添加以下代码：

PDF 生成 API：第一步是创建一个用于生成 PDF 文档的后端 API。 由于IronPDF只在服务器端运行，我们需要创建一个API，以便在用户想生成PDF时调用。 在路径 pages/api/pdf.js 中创建一个文件，并添加以下内容。

IronPDF需要一个许可证密钥，您可以从许可证页面获取，并将其放入以下代码中。

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

现在将 index.js 代码修改如下以使用 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
JAVASCRIPT

现在使用以下命令运行应用程序：

yarn dev
yarn dev
SHELL

Tailwind CSS 和 IronPDF 的输出

tailwind npm（它是如何为开发者工作的）：图1 - Tailwind和IronPDF Next.js应用程序的输出页面

单击“生成 PDF”按钮以从给定的 URL 生成 PDF。

tailwind npm（对开发者的工作方式）：图 2 - 使用 IronPDF 包从 URL 生成的输出 PDF

IronPDF 许可证

IronPDF 页面。

在此处放置许可证密钥：

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

结论

将Tailwind CSS集成到带 npm 的 React 项目中是简单的。 通过以下步骤，您可以快速设置 Tailwind CSS，并开始使用其实用优先类构建响应式和可自定义的用户界面。 Tailwind CSS 的灵活性和强大的自定义选项使其成为 React 开发人员希望简化其样式流程的绝佳选择。 IronPDF 是一个多功能的 PDF 生成软件包，能够帮助开发人员轻松地集成到企业应用程序中。 具备上述两项技能有助于开发人员轻松创建现代应用程序。

有关如何开始使用IronPDF以及参考不同方法将其整合到项目中的代码示例的更多信息，请访问代码示例和文档页面。 IronPDF为所有永久许可证持有者提供支持和更新选项。 在试用期间，它还提供 24/5 的技术支持。

注意，获取免费试用许可证无需提供信用卡信息或创建账户，只需一个有效的电子邮件地址。

Darrius Serrant
Darrius Serrant
  立即与工程团队聊天
全栈软件工程师（WebOps）

达瑞乌斯·塞兰特拥有迈阿密大学计算机科学学士学位，目前在Iron Software担任全栈WebOps营销工程师。从小对编码的热爱使他认为计算机既神秘又易接近，成为创意和解决问题的完美媒介。

在Iron Software，达瑞乌斯乐于创造新事物并简化复杂概念，使其更易于理解。作为我们在职开发者之一，他还自愿教授学生，将他的专业知识传授给下一代。

对达瑞乌斯而言，他的工作之所以令人满足，是因为它具有价值并产生了真正的影响。

< 前一页
dropzone npm（它如何为开发人员工作）
下一步 >
Day.js npm（它如何为开发人员工作）

使用 npm 安装

版本：2025.5

> npm i @ironsoftware/ironpdf

报告问题

准备开始了吗？ 版本： 2025.5 刚刚发布

免费开始
npm 下载 开始免费试用
查看许可证 >
Experience the full power of IronPDF 开始免费试用
Textlogo Iron Suite related to tailwind npm（为开发人员提供的工作原理）

IronPDF 是 IRON 的一部分套装

10 个 .NET API 产品用于您的办公文档

以2个产品的价格获取10个产品   开始免费试用