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

Adım 1: Bir React Projesi Oluşturun

Aşağıdaki komutu kullanarak Create React App oluşturun. Bu araç, makul 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 Kurulumu

Tailwind CSS'i ve bağımlılıklarını npm kullanarak yükleyin. Terminalinizi acin ve asagidaki komutu calistirin:

npm install -D tailwindcss postcss autoprefixer

npm install -D tailwindcss postcss autoprefixer

Adım 3: Tailwind CSS'i Başlatın

Daha sonra, varsayılan yapılandırma dosyalarını oluşturmak için Tailwind CSS'i başlatmanız gerekir. 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'i Yapılandırın

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 paketinizi küçük tutmanıza yardımcı olur. Burada karanlık mod sınıf adını ve özel modüllerin yolunu da 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 adini src/tailwind.css koyun, ardından aşağıdaki içeriği ekleyin:

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

Adım 6: React Projenizde Tailwind CSS Yükleyin

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'i Kullanmaya Başlayın

Artık Tailwind CSS sınıflarını React bileşenlerinizin kodunda 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, Tailwind CSS'i çalışırken görmek için geliştirme sunucunuzu başlatın:

npm start

npm start

Uygulamanız artık Tailwind CSS ile entegre bir şekilde çalışıyor olmalı. React bileşenlerinizi kolayca stillendirmek için Tailwind'in yardımcı sınıflarını kullanmaya başlayabilirsiniz.

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

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

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

Web sayfalarının içeriğini yakalayarak onları programatik olarak PDF dosyaları olarak kaydetmenizi sağlayan URL'lerden doğrudan PDF üretin.

PDF Manipülasyonu

Birleştirin, bölün ve mevcut PDF belgelerini kolaylıkla yönetin. IronPDF, sayfa ekleme, belgeleri bölme, PDF'leri özelleştirme ve daha fazlası gibi işlevsellikler sunar.

PDF Güvenliği

PDF belgelerinizi parolalarla şifreleyerek veya dijital imzalar uygulayarak güvence altına alın. IronPDF, hassas belgelerinizi yetkisiz erişimden korumak için seçenekler sunar.

Yüksek Kaliteli Çıktı

Metin, resim ve biçimlendirmelerin hassas bir şekilde oluşturulmasıyla yüksek kaliteli PDF belgeleri üretin. IronPDF, oluşturulan PDF'lerin orijinal içeriği korumasını sağlar.

Çapraz Platform Uyumluluğu

IronPDF, Windows, Linux ve macOS dahil olmak üzere çeşitli platformlarla uyumludur, bu da onu geniş bir geliştirme ortamı yelpazesi için uygun hale getirir.

Basit Entegrasyon

IronPDF'i npm paketi ile Node.js uygulamalarınıza kolayca entegre edin. API iyi belgelenmiştir, bu da projelerinize PDF oluşturma yeteneklerini eklemeyi kolaylaştırır.

Kurulum

IronPDF NPM paketini kurmak için aşağıdaki komutu kullanın:

 npm i @ironsoftware/ironpdf

Next.js projesi kurun

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

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"

Sonra, proje dizininize gidin:

cd tailwind-pdf

cd tailwind-pdf

Gerekli paketleri yükleyin:

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ğıda gösterildiği 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ı dahil edin:

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

Bir PDF Oluşturun

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