tailwind npm (Geliştiriciler İçin Nasıl Çalışır)

Adım 1: Bir React Projesi Oluşturun

Aşağıdaki komutu kullanarak React Projesi Oluştur. Bu araç, mantıklı bir varsayılan yapılandırma ile yeni bir React projesi kurar.

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

Adım 2: Tailwind CSS Yükle

Tailwind CSS ve npm kullanarak bağımlılıklarını yükleyin. Terminalinizi açın ve aşağıdaki komutu çalıştırın:

npm install -D tailwindcss postcss autoprefixer

npm install -D tailwindcss postcss autoprefixer

Adım 3: Tailwind CSS'yi Başlat

Daha sonra Tailwind CSS'yi başlatmanız ve varsayılan yapılandırma dosyalarını oluşturmanız gerekecek. Aşağıdaki komutu çalıştırın:

npx tailwindcss init -p

npx tailwindcss init -p

Bu, projenizde iki yeni dosya oluşturacaktır: tailwind.config.js ve postcss.config.js.

Adım 4: Tailwind CSS'yi Yapılandır

tailwind.config.js yapılandırma dosyasını açın ve üretimde kullanılmayan CSS'yi kaldırmak için temizleme seçeneğini ayarlayın. Bu, son CSS paketinizin küçük kalmasına yardımcı olur. Burada ayrıca koyu mod sınıf adını ve özel modüllerin yolunu tanımlayabilirsiniz.

// 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: [],
}

Adım 5: Bir Tailwind CSS Dosyası Oluşturun

Yeni bir dosya oluşturun ve adını src/tailwind.css koyarak aşağıdaki içeriği ekleyin:

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

Adım 6: Tailwind CSS'yi React Projenize Aktarın

src/index.js dosyasını açın ve az önce oluşturduğunuz Tailwind CSS dosyasını içe aktarın:

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')
);

Adım 7: Tailwind CSS'yi Kullanarak Başlayın

Artık React bileşen kodunuzda Tailwind CSS sınıflarını kullanmaya başlayabilirsiniz. src/App.js dosyasını açın ve aşağıdaki gibi değiştirin:

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;

Adım 8: React Projenizi Çalıştırın

Son olarak, geliştirme sunucunuzu başlatarak Tailwind CSS'yi çalışırken görün:

npm start

npm start

Uygulamanız artık Tailwind CSS entegre edilmiş olarak çalışıyor olmalıdır. Tailwind'in yardımcı sınıflarını React bileşenlerinizi stilize etmek için kolayca kullanmaya başlayabilirsiniz.

HTML'den PDF'ye Dönüşüm

HTML içeriğini kolayca PDF belgelerine dönüştürün. Bu özellik, web içeriğinden dinamik PDF'ler oluşturmak için özellikle kullanışlıdır.

URL'den PDF'ye Dönüşüm

URL'lerden doğrudan PDF'ler üretin, böylece web sayfalarının içeriğini yakalayıp programatik olarak PDF dosyaları olarak kaydedebilirsiniz.

PDF Manipülasyonu

Mevcut PDF belgelerini kolayca birleştirin, bölün ve manipüle edin. IronPDF, sayfaları ekleme, belgeleri bölme, PDF'leri özelleştirme ve daha fazlası gibi işlevler sağlar.

PDF Güvenliği

PDF belgelerinizi, şifreleme veya dijital imzalar uygulayarak güvence altına alın. IronPDF, hassas belgelerinizi yetkisiz erişime karşı koruma seçenekleri sunar.

Yüksek Kaliteli Çıktı

Metin, resim ve biçimlendirmeyi hassas bir şekilde render ederek yüksek kaliteli PDF belgeleri üretin. IronPDF, oluşturduğunuz PDF'lerin orijinal içeriğe sadık kalmasını sağlar.

Çapraz Platform Uyumluluğu

IronPDF, Windows, Linux ve macOS dahil olmak üzere çeşitli platformlarla uyumludur ve geniş bir geliştirme ortamı yelpazesine uygundur.

Basit Entegrasyon

IronPDF, npm paketi kullanarak Node.js uygulamalarınıza kolayca entegre edilir. API, iyi belgelenmiş hale getirilmiştir, bu da projelerinize PDF oluşturma yeteneklerini dahil etmeyi basit hale getirir.

Kurulum

IronPDF NPM paketini yüklemek için aşağıdaki komutu kullanın:

npm i @ironsoftware/ironpdf

Next.js projesi kurma

Bağımlılıkları Kurun: İlk olarak, aşağıdaki komutu kullanarak yeni bir Next.js projesi oluşturun (henüz yapmadıysanız). Lütfen kurulum sayfasına bakınız.

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"

Sonrasında, proje dizinine gidin:

cd tailwind-pdf

cd tailwind-pdf

Gerekli paketleri kurun:

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

Yukarıdaki ifadeler, aşağıdaki gibi bir tailwind.config.js dosyası oluşturacaktır:

/** @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: [],
}

Aşağıdaki kodu global.css dosyasına ekleyin:

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

_app.js dosyasını açın veya oluşturun ve aşağıda gösterildiği gibi global.css dosyasını ekleyin:

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

PDF Oluşturma

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

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>
    );
}

yarn dev

yarn dev