跳過到頁腳內容
  1. IronPDF for Node.js
  2. IronPDF for Node.js 博客
  3. Node 幫助
  4. tailwind npm
NODE 說明

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

Darrius Serrant
Darrius Serrant
更新:

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 項目

使用以下命令建立 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
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 檔案體積較小。 您也可以在此處定義深色模式類別名稱和自訂模組的路徑。

// 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 產生 PDF ，讓您可以捕獲網頁內容並以程式設計方式將其儲存為 PDF 檔案。

PDF 處理

輕鬆合併、分割和操作現有 PDF 文件。 IronPDF 提供諸如追加頁面、分割文件、自訂 PDF 等功能。

PDF安全性

使用密碼加密或套用數位簽章來保護您的 PDF 文件。 IronPDF 提供多種選項，保護您的敏感文件免受未經授權的存取。

高品質輸出

產生高品質的 PDF 文檔，精確呈現文字、圖像和格式。 IronPDF 可確保您產生的 PDF 檔案與原始內容一致。

跨平台相容性

IronPDF與包括 Windows、Linux 和 macOS 在內的各種平台相容，使其適用於各種開發環境。

簡單集成

使用 IronPDF 的 npm 包，即可輕鬆整合到您的 Node.js 應用程式中。 此 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 只能在伺服器端運行，因此當使用者想要產生 PDF 時，我們需要建立一個 API 呼叫。 在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 的輸出

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 產生軟體包，可協助開發人員輕鬆整合到企業應用程式中。掌握這兩項技術能夠幫助開發人員創建功能豐富的現代化應用程式。

有關如何開始使用IronPDF 的更多資訊以及將其融入專案中的不同方法的參考程式碼範例，請造訪程式碼範例和文件頁面。 IronPDF 為所有永久許可證持有者提供支援和更新選項。 試用期間也提供 24/5 全天候技術支援。

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

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

30 天試用 → 完整產品。無限制。無卡。 開始免費試用