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

Tailwind CSS は、HTMLページを迅速に設計するための人気のあるユーティリティファーストのCSSフレームワークです。 このソフトウェアは非常にカスタマイズ可能で、ユーザーインターフェイスを構築するための強力なJavaScriptライブラリであるReactとシームレスに連携します。 この記事では、Tailwind CSSをnpmを使ってReactプロジェクトに統合するプロセスをご紹介します。 また、WebサイトのURLからPDFを生成するためのIronPDF 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

ステップ 2: Tailwind CSS をインストール

Tailwind CSSとその依存関係をnpmを使用してインストールする。 ターミナルを開き、次のコマンドを実行してください：

npm install -D tailwindcss postcss autoprefixer

npm install -D tailwindcss postcss autoprefixer

ステップ 3: Tailwind CSSを初期化する

次に、デフォルトの設定ファイルを作成するためにTailwind CSSを初期化する必要があります。 次のコマンドを実行します:

npx tailwindcss init -p

npx tailwindcss init -p

これにより、プロジェクトに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: [],
}

js

ステップ5: Tailwind CSSファイルを作成する

新しいファイルを src/tailwind.css として作成し、次の内容を追加してください。

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

js

ステップ 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')
);

js

ステップ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;

js

ステップ8: Reactプロジェクトを実行する

最後に、開発サーバーを起動してTailwind CSSが動作していることを確認してください。

npm start

npm start

あなたのアプリケーションは、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 などのさまざまなプラットフォームと互換性があり、幅広い開発環境に適しています。

シンプルな統合

Node.jsアプリケーションにIronPDFをnpmパッケージを使って簡単に統合できます。 このAPIは十分に文書化されており、プロジェクトにPDF生成機能を組み込むことが簡単です。

インストール

IronPDF NPMパッケージをインストールするには、以下のコマンドを使用します：

npm i @ironsoftware/ironpdf

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"

次に、プロジェクト・ディレクトリに移動する：

cd tailwind-pdf

cd tailwind-pdf

必要なパッケージをインストールする：

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

上記の文は、次のような '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: [],
}

js

以下のコードをglobal.cssファイルに追加します。

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

js

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

js

PDFを作成する

それでは、IronPDFを使用してPDFを生成するシンプルな例を作成してみましょう。 Next.jsコンポーネント（例：pages/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();
    }
}

js

次に、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>
    );
}

js

次のコマンドを使用してアプリケーションを実行します:

yarn dev

yarn dev

出力：Tailwind CSSとIronPDF

「PDFを生成」ボタンをクリックして、指定されたURLからPDFを生成します。

IronPDFライセンス

IronPDF ページ。

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

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

js

結論

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

IronPDFの使い始め方やプロジェクトへの様々な取り入れ方に関するコード例については、コード例とドキュメントのページをご覧ください。 IronPDFは、すべての永続ライセンス保持者にサポートと更新オプションを提供しています。 試用期間中は24時間の技術サポートを提供しています。

無料トライアルライセンスにはクレジットカード情報やアカウント作成は必要ありません。有効なメールアドレスのみが必要です。