節點幫助

tailwind npm（它對開發人員的運作方式）

發佈 2024年9月29日

Tailwind CSS是一個受歡迎的實用至上CSS框架，可以快速設計HTML頁面。它具有高度可定制性，並可無縫運作與React一個強大的用於構建使用者介面的 JavaScript 程式庫。在本文中，我們將指導您通過使用 npm 將 Tailwind CSS 集成到 React 專案中的過程。此外，我們將研究IronPDFPDF 生成庫，用於從網站 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

'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#

第六步：在你的 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文件。這IronPDFNPM 套件專為 Node.js 應用程式設計。

以下是一些主要功能和詳細信息，關於IronPDFNPM 套件：

主要功能

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需要許可金鑰，您可以從授權頁面```html <!DOCTYPE html>

Iron Software Products

Iron Software 產品

技術和產品描述

IronPDF 是一個功能強大的.NET PDF庫，使得生成和編輯PDF文件變得簡單。無論您使用的是C#、VB.NET還是JavaScript，IronPDF都能滿足您的需求。

IronOCR 是一個領先的.NET光學字符識別庫，能夠準確地將圖像轉換為可編輯的文本。這個工具對於需要處理大量掃描文件的開發人員來說非常有用。

IronXL 提供了一個強大的Excel讀取和寫入庫，簡化了處理Excel文件的流程。無論是讀取、修改還是生成，IronXL都能夠輕鬆完成。

IronBarcode and IronQR 能夠快速生成和讀取條形碼和二維碼，適合各種應用場景。

IronZIP 是一個.NET庫，用於創建、編輯和提取ZIP文件，支持高效的文件壓縮和解壓。

IronWord 提供了一個靈活的工具來生成、編輯和閱讀Word文件。它支持所有的Word格式，使得文檔處理變得簡單和可靠。

IronPrint 是一個強大的打印庫，能夠輕鬆地從任何.NET應用程序進行打印操作。

IronWebscraper 是一個方便的工具，可以從Web頁面中提取數據，適用於數據收集和分析。

Iron Suite 包含了所有的Iron Software工具包，提供全面的解決方案，以滿足您的所有需求。


```cs
// 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();
    }
}

現在將 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 套件從網址生成的輸出 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";

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 （其對開發者的作用）

準備開始了嗎？版本: 2024.11 剛剛發布

查看許可證 >

tailwind npm（它對開發人員的運作方式）

什麼是Tailwind CSS？

步驟 1：建立一個 React 專案

步驟 2：安裝 Tailwind CSS

步驟 3：初始化 Tailwind CSS

步驟 4：配置 Tailwind CSS

步驟 5：建立 Tailwind CSS 檔案

第六步：在你的 React 專案中導入 Tailwind CSS

步驟 7：開始使用 Tailwind CSS

步驟 8：運行您的 React 專案

IronPDF 介紹

主要功能

HTML 轉 PDF

URL 轉換為 PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用 IronPDF 生成 PDF 文件並使用 Tailwind NPM 套件

設置一個 Next.js 項目

建立 PDF

Iron Software 產品

技術和產品描述

Tailwind CSS 和 IronPDF 的輸出

IronPDF 授權

結論

本頁內容

報告問題

準備開始了嗎？版本: 2024.11 剛剛發布

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 0天試用序號立即。

試用表格已提交
成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

tailwind npm（它對開發人員的運作方式）

什麼是Tailwind CSS？

步驟 1：建立一個 React 專案

步驟 2：安裝 Tailwind CSS

步驟 3：初始化 Tailwind CSS

步驟 4：配置 Tailwind CSS

步驟 5：建立 Tailwind CSS 檔案

第六步：在你的 React 專案中導入 Tailwind CSS

步驟 7：開始使用 Tailwind CSS

步驟 8：運行您的 React 專案

IronPDF 介紹

主要功能

HTML 轉 PDF

URL 轉換為 PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用 IronPDF 生成 PDF 文件並使用 Tailwind NPM 套件

設置一個 Next.js 項目

建立 PDF

Iron Software 產品

技術和產品描述

Tailwind CSS 和 IronPDF 的輸出

IronPDF 授權

結論

本頁內容

報告問題

準備開始了嗎？ 版本: 2024.11 剛剛發布

試用表格已提交成功地.

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 0天試用序號 立即。

試用表格已提交成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

準備開始了嗎？版本: 2024.11 剛剛發布

試用表格已提交
成功地.

獲取你的免費 0天試用序號立即。

試用表格已提交
成功地.