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

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

发布 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 项目

创建 React 应用 使用以下命令。 此工具使用合理的默认配置设置一个新的 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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-react-app my-tailwind-react-app cd my-tailwind-react-app
VB   C#

步骤 2：安装 Tailwind CSS

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

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
VB   C#

步骤 3：初始化 Tailwind CSS

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

npx tailwindcss init -p
npx tailwindcss init -p
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx tailwindcss init -p
VB   C#

这将在您的项目中创建两个新文件：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: [],
}
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: []}
VB   C#

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

创建一个名为 src/tailwind.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
VB   C#

步骤 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')
);
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'));
VB   C#

步骤 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;
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;
VB   C#

步骤 8：运行你的 React 项目

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

npm start
npm start
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm start
VB   C#

您的应用程序现在应该正在运行，并集成了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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm i @ironsoftware/ironpdf
VB   C#

使用 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"
'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"
VB   C#

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

cd tailwind-pdf
cd tailwind-pdf
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd tailwind-pdf
VB   C#

安装所需的软件包：

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
VB   C#

上述语句将创建一个名为“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: [],
}
/** @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: ()}
VB   C#

将以下代码添加到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
VB   C#

打开或创建 _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} />
}
// 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} /> }
VB   C#

创建 PDF

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

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

IronPDF需要许可证密钥，您可以从 许可证页面 Please provide the content you would like translated into Chinese along with the code where it should be placed.

// 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
VB   C#

现在将 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>
    );
}
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>); }
VB   C#

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

yarn dev
yarn dev
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn dev
VB   C#

Tailwind CSS 和 IronPDF 的输出

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

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

tailwind npm（对开发人员的工作原理）：图 2 - 使用IronPDF包从URL生成的输出PDF

IronPDF 许可证

IronPDF page.

在此处放置许可证密钥：

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
VB   C#

结论

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

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

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

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

使用 npm 安装

版本：2024.9

> npm i @ironsoftware/ironpdf

报告问题

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

免费 npm 安装 查看许可证 >

获取您的免费

30天试用密钥 立即。

15天试用密钥 立即。

bullet_checked无需信用卡或创建账户
试用表格已提交
成功地。

您的试用密钥应在电子邮件中。
如果不是，请联系
support@ironsoftware.com

子弹测试测试生产环境
无水印
子弹日历30天全功能使用
功能性产品
子弹支持24/5技术支持
试用期间的支持

谢谢！

您的许可证密钥已发送到所提供的电子邮件。联系我们

24小时升级优惠：

Save 50% 在一个
专业 升级

去 专业 支持10位开发者
和无限项目。

小时

:

分钟

:

秒

升级到Professional

升级

专业

$600 美元

$299 美元

  • 10位开发者
  • 10个位置
  • 10个项目
今天 只有

5个.NET产品，两件的价格

IronPDF IronOCR IronXL IronBarcode IronWebscraper

套件总价值：

$7,192 美元

升级价格

今天
只有

$499 美元

24小时后

$1,098 美元