ノードヘルプ

tailwind npm（開発者向けの動作方法）

公開済み 2024年9月29日

共有:

Tailwind CSSは、HTMLページを素早くデザインするための人気のあるユーティリティファーストのCSSフレームワークです。高いカスタマイズ性を持ち、シームレスに動作します。リアクトユーザーインターフェイスを構築するための強力なJavaScriptライブラリ。この記事では、npmを使用してReactプロジェクトにTailwind CSSを統合する手順をご案内します。また、次のことも検討する。IronPDFウェブサイトのURLからPDFを生成する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

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

これにより、プロジェクトに2つの新しいファイルが作成されます:tailwind.config.jsおよびpostcss.config.js。

ステップ 4: Tailwind CSS を設定する

tailwind.config.js の設定ファイルを開き、本番環境で未使用のCSSを削除するためにpurgeオプションを設定します。これにより、最終的な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: Tailwind CSSをあなたのReactプロジェクトにインポートする

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の使用を開始する

これで、Tailwind CSSクラスをReactコンポーネントのコードで使用し始めることができます。 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を生成Webページのコンテンツをキャプチャして、プログラムによってPDFファイルとして保存することができます。

PDF操作

マージ, 分割既存のPDFドキュメントを簡単に操作できます。 IronPDFは、ページの追加、ドキュメントの分割、PDFのカスタマイズなどの機能を提供します。

PDFセキュリティ

PDF文書を保護して暗号化パスワードまたはデジタル署名の適用. IronPDFは不正アクセスから機密文書を保護するオプションを提供します。

高品質出力

高品質なPDFドキュメントを生成し、テキストや画像を正確にレンダリングします。フォーマット. IronPDFは生成されたPDFが元のコンテンツに忠実であることを保証します。

クロスプラットフォーム互換性

IronPDFWindows、Linux、macOSを含むさまざまなプラットフォームと互換性があり、幅広い開発環境に適しています。

シンプルな統合

Node.jsアプリケーションにIronPDFをnpmパッケージを使って簡単に統合できます。 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コンポーネントで(例: ページ/index.tsx)以下のコードを追加します。

PDF生成API: 最初のステップはPDFドキュメントを生成するためのバックエンドAPIを作成することです。 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();
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

次に、Tailwind CSSを使用するために、以下のようにindex.jsコードを修正します。

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ページ

ライセンスキーをここに入力します：

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 CSSnpmを使用してReactプロジェクトに組み込むのは簡単です。これらの手順に従うことで、Tailwind CSSを迅速にセットアップし、ユーティリティファーストのクラスを使用して、レスポンシブでカスタマイズ可能なUIを構築することができます。 Tailwind CSS の柔軟性と強力なカスタマイズオプションは、スタイリングプロセスを効率化したい React 開発者にとって優れた選択肢です。 IronPDFは、開発者が企業アプリに簡単に統合するのを支援する多用途なPDF生成パッケージです。上記の両方のスキルを持つことで、開発者は現代的なアプリケーションを簡単に作成できます。

IronPDF の始め方に関する詳細情報や、プロジェクトに組み込むためのさまざまな方法の参考コード例については、こちらをご覧ください。コード例およびドキュメントページ. IronPDFは、すべての永続ライセンス保持者にサポートと更新オプションを提供しています。試用期間中は24時間の技術サポートを提供しています。

クレジットカード情報やアカウントの作成は不要であることに注意してください。無料トライアルライセンス、有効なメールアドレスだけです。

< 以前
dropzone npm（開発者向けの使い方）

次へ >
Day.js npm (開発者向けの動作方法)