NODE 說明

tailwind npm（開發者的使用方法）

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

更新日期:8月 5, 2025

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 一起工作的！

以下是將 Tailwind CSS 集成到 React 應用程序中的步驟。

步驟 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 配置文件，並設置清除選項以在生產環境中移除未使用的 CSS。這有助於保持最終 CSS 捆綁包的緊湊性。在這裡，您還可以定義暗模式類名以及自定義模塊的路徑。

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

步驟 5：創建 Tailwind CSS 文件

創建一個名為 src/tailwind.css 的新文件，並添加以下內容：

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

步驟 6：在您的 React 項目中匯入 Tailwind CSS

打開 src/index.js 文件，並匯入您剛創建的 Tailwind CSS 文件：

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

步驟 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">
      <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

步驟 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 生成 PDFs，允許您捕捉網頁內容並以程式方式將其保存為文件。

PDF 操作

Merge, 拆分和輕鬆操作現有的 PDF 文檔。 IronPDF 提供了追加頁面、拆分文檔、自定義 PDF 等功能。

PDF 安全

Secure your PDF documents by encrypting them with passwords or applying digital signatures. IronPDF 提供了選項，讓您可以保護您的敏感文檔免遭未授權訪問。

高質量輸出

生成具有精確文字渲染、影像和格式化的高品質 PDF 文檔。 IronPDF 確保您的生成的 PDF 維持原內容的忠實度。

跨平臺兼容性

IronPDF 兼容諸如 Windows、Linux 和 macOS 等多個平台，使之適合於廣泛的開發環境。

簡單集成

輕鬆將 IronPDF 集成到您的 Node.js 應用程序中，使用其 npm 包。 API 文檔齊全，使將 PDF 生成功能融入您的項目變得簡單明瞭。

安裝

要安裝 IronPDF NPM 套件，使用以下命令：

 npm i @ironsoftware/ironpdf

使用 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: [],
}

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

將以下代碼添加到 global.css 文件中：

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

打開或創建 _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} />
}

JAVASCRIPT

創建 PDF

現在，我們來創建一個簡單的示例，使用 IronPDF 生成 PDF。在您的 Next.js 組件中（例如，pages/index.tsx），添加以下代碼：

PDF 生成 API：第一步是創建一個後端 API 來生成 PDF 文件。由於 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();
    }
}

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

現在修改 index.js 代碼以使用 Tailwind CSS：

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

現在使用以下命令運行應用程序：

yarn dev

yarn dev

SHELL

Tailwind CSS 和 IronPDF 的 OUTPUT

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";

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

JAVASCRIPT

結論

使用 npm 將 Tailwind CSS 集成到 React 項目中非常簡單。通過遵循這些步驟，您可以迅速設置 Tailwind CSS，並開始使用其以實用類優先的類別來構建響應和可自定義的用戶界面。 Tailwind CSS 的靈活性和強大的自定義選項使其成為希望簡化樣式過程的 React 開發人員的理想選擇。 IronPDF 是一個多功能的 PDF 生成包，幫助開發者輕鬆集成到企業應用程序中。掌握這兩項技術可以使開發者創建現代化、功能豐富的應用程序。

For more information on how to get started with IronPDF and reference code examples for different ways to incorporate it in your project, please visit the code examples and documentation page. IronPDF 為所有永久許可持有人提供支持和更新選項。在試用期內，它還提供 24/5 技術支持。

注意，免費試用許可證不需要提供信用卡資訊或創建帳戶，只需提供有效的電子郵件地址。