フッターコンテンツにスキップ
  1. IronPDF for Node.js
  2. IronPDF for Node.js ブログ
  3. ノードヘルプ
  4. tailwind npm
ノードヘルプ

tailwind npm (開発者向けのしくみ)

Darrius Serrant
Darrius Serrant
更新日:

Tailwind CSSは、HTMLページを迅速にデザインできる人気のユーティリティファーストCSSフレームワークです。 非常にカスタマイズ可能で、ユーザーインターフェイスを構築するための強力なJavaScriptライブラリであるReactとシームレスに動作します。 この記事では、npmを使用してReactプロジェクトにTailwind CSSを統合するプロセスを案内します。 また、ウェブサイトURLからPDFを生成するためにIronPDF PDF生成ライブラリを検討します。

Tailwind CSSとは？

Tailwind CSSは、より効率的にアプリケーションを作成できるユーティリティファーストCSSフレームワークです。 Tailwindを使用すると、ユーティリティクラスをHTML内で直接使用してレイアウト、色、間隔、タイポグラフィ、シャドウなどを制御できます。 一番のポイントは？ カスタムCSSを書く必要がありません！

伝統的なセマンティッククラス名との格闘にうんざりしたなら、Tailwind CSSを試してみてください。その便利さに驚くかもしれません！

以下は、ReactアプリケーションにTailwind CSSを統合する手順です。

ステップ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という2つの新しいファイルが作成されます。

ステップ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: Tailwind CSSをReactプロジェクトにインポートする

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文書を結合、分割して簡単に操作できます。 ページの追加やドキュメントの分割、PDFのカスタマイズなどの機能を提供します。

PDFのセキュリティ

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

高品質出力

テキスト、画像、フォーマットを正確にレンダリングして、高品質なPDF文書を作成します。 IronPDFは、生成されたPDFが元のコンテンツの忠実度を保つことを保証します。

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

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

シンプルな統合

npmパッケージを使用してNode.jsアプリケーションにIronPDFを簡単に統合します。 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

Tailwind CSSを使用するためにindex.jsコードを次のように修正してください。

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アプリケーションの出力ページ

指定されたURLからPDFを生成するには"Generate 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を使用してReactプロジェクトにTailwind CSSを統合するのは簡単です。 これらの手順に従うことで、Tailwind CSSを迅速にセットアップし、そのユーティリティファーストのクラスを使用して、レスポンシブかつカスタマイズ可能なUIを構築できます。 Tailwind CSSの柔軟性と強力なカスタマイズオプションは、スタイリングプロセスを効率化したいReact開発者にとって優れた選択となります。 IronPDFは、企業アプリに簡単に統合できる汎用性のあるPDF生成パッケージです。これらの技術を習得することで、現代的で機能豊富なアプリケーションを作成することができるようになります。

IronPDFの使用を開始し、プロジェクトに組み込むさまざまな方法の参考コード例については、コード例およびドキュメントのページをご覧ください。 IronPDFは、すべての永続ライセンス保有者にサポートと更新オプションを提供します。 また、試用期間中に24時間週5日テクニカルサポートを提供しています。

無料トライアルライセンスにはクレジットカード情報やアカウント作成が不要で、有効なメールアドレスだけで利用できます。

Darrius Serrant
Darrius Serrant
  今すぐエンジニアリングチームとチャット
フルスタックソフトウェアエンジニア（WebOps）

Darrius Serrantは、マイアミ大学でコンピュータサイエンスの学士号を取得し、Iron SoftwareでフルスタックWebOpsマーケティングエンジニアとして働いています。若い頃からコーディングに惹かれ、コンピューティングを神秘的かつアクセス可能なものとし、創造性と問題解決のための完璧な媒体と考えていました。

Iron Softwareでは、新しいものを創造することと、複雑なコンセプトをより理解しやすくすることを楽しんでいます。Resident Developerの一人として、次世代に専門知識を共有するために、学生を教えることにも志願しました。

Darriusにとって、その仕事は価値があり、実際の影響があるため、満足感があります。

関連する記事

30日間の無料体験 → 完全な製品。制限なし。クレジットカード不要。 無料トライアル