푸터 콘텐츠로 바로가기
  1. Node.js용 IronPDF
  2. Node.js용 IronPDF 블로그
  3. 노드 도움말
  4. 테일윈드 npm
노드 도움말

Tailwind npm (개발자를 위한 작동 방식)

다리우스 세란트
다리우스 세란트
업데이트됨:

Tailwind CSS 는 HTML 페이지를 빠르게 디자인할 수 있도록 해주는 인기 있는 유틸리티 중심의 CSS 프레임워크입니다. 이 플랫폼은 높은 수준의 맞춤 설정이 가능하며, 사용자 인터페이스 구축을 위한 강력한 JavaScript 라이브러리인 React 와 완벽하게 연동됩니다. 이 글에서는 npm을 사용하여 Tailwind CSS를 React 프로젝트에 통합하는 과정을 안내해 드리겠습니다. 또한, 웹사이트 URL에서 PDF를 생성하기 위해 IronPDF PDF 생성 라이브러리에 대해서도 살펴보겠습니다.

Tailwind CSS란 무엇인가요?

Tailwind CSS 는 유틸리티를 최우선으로 고려한 CSS 프레임워크로, 애플리케이션을 더욱 효율적으로 개발할 수 있도록 해줍니다. Tailwind를 사용하면 유틸리티 클래스를 HTML에서 직접 사용하여 레이아웃, 색상, 간격, 타이포그래피, 그림자 등을 제어할 수 있습니다. 가장 좋은 점은? 사용자 지정 CSS를 작성할 필요가 없습니다!

기존의 의미론적 클래스 이름 사용에 지치셨다면 Tailwind CSS를 사용해 보세요. 아마도 이전에는 어떻게 CSS를 사용했는지 의아해하실 겁니다!

다음은 Tailwind CSS를 React 애플리케이션에 통합하는 단계입니다.

1단계: React 프로젝트 생성

다음 명령어를 사용하여 React 앱을 생성하세요 . 이 도구는 적절한 기본 설정으로 새로운 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 라는 두 개의 새 파일이 생성됩니다.

4단계: Tailwind CSS 구성

tailwind.config.js 설정 파일을 열고 프로덕션 환경에서 사용되지 않는 CSS를 제거하는 purge 옵션을 설정하세요. 이렇게 하면 최종 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단계: React 프로젝트에 Tailwind CSS를 가져옵니다.

파일 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 문서를 손쉽게 병합 , 분할 및 조작하세요. IronPDF 페이지 추가, 문서 분할, PDF 사용자 지정 등과 같은 다양한 기능을 제공합니다.

PDF 보안

PDF 문서를 암호로 암호화 하거나 디지털 서명을 적용하여 보안을 강화하세요. IronPDF 무단 접근으로부터 중요한 문서를 보호할 수 있는 다양한 옵션을 제공합니다.

고품질 출력

텍스트, 이미지 및 서식 이 정확하게 표현된 고품질 PDF 문서를 제작하세요. IronPDF 생성된 PDF 파일이 원본 콘텐츠와 동일한 품질을 유지하도록 보장합니다.

크로스 플랫폼 호환성

IronPDF 는 Windows, Linux, macOS를 비롯한 다양한 플랫폼과 호환되므로 폭넓은 개발 환경에 적합합니다.

간단한 통합

IronPDF의 npm 패키지를 사용하면 IronPDF Node.js 애플리케이션에 쉽게 통합할 수 있습니다. API는 문서화가 잘 되어 있어 프로젝트에 PDF 생성 기능을 쉽게 통합할 수 있습니다.

설치

IronPDF NPM 패키지를 설치하려면 다음 명령어를 사용하십시오.

 npm과 @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: 첫 번째 단계는 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();
    }
}
JAVASCRIPT

이제 index.js 코드를 수정하여 Tailwind CSS를 사용하세요:

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를 생성하려면 "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을 사용하여 Tailwind CSS를 React 프로젝트에 통합하는 것은 간단합니다. 이 단계를 따르면 Tailwind CSS를 빠르게 설정하고 유틸리티 중심의 클래스를 사용하여 반응형 및 사용자 정의 가능한 UI를 구축할 수 있습니다. Tailwind CSS는 유연성과 강력한 사용자 정의 옵션을 제공하여 스타일링 프로세스를 간소화하려는 React 개발자에게 탁월한 선택입니다. IronPDF 는 개발자가 기업용 애플리케이션에 쉽게 통합할 수 있도록 도와주는 다재다능한 PDF 생성 패키지입니다. 이 두 가지 기술을 모두 숙달하면 개발자는 최신 기능을 갖춘 애플리케이션을 만들 수 있습니다.

IronPDF 시작하는 방법과 프로젝트에 통합하는 다양한 방법에 대한 참조 코드 예제에 대한 자세한 내용은 코드 예제 및 문서 페이지를 참조하십시오. IronPDF 모든 영구 라이선스 보유자에게 지원 및 업데이트 옵션을 제공합니다. 또한 체험 기간 동안 연중무휴 24시간(주말 제외) 기술 지원을 제공합니다.

무료 체험판 라이선스 에는 신용카드 정보나 계정 생성이 필요하지 않으며, 유효한 이메일 주소만 있으면 됩니다.

다리우스 세란트
다리우스 세란트
  지금 바로 엔지니어링 팀과 채팅하세요
풀스택 소프트웨어 엔지니어 (웹 운영)

다리우스 세런트는 마이애미 대학교에서 컴퓨터 과학 학사 학위를 받았으며, Iron Software에서 풀 스택 웹 운영 마케팅 엔지니어로 근무하고 있습니다. 어린 시절부터 코딩에 매료되었던 그는 컴퓨팅이 신비로우면서도 접근하기 쉬운 분야라고 생각했고, 창의력과 문제 해결 능력을 발휘하기에 완벽한 매체라고 여겼습니다.

Iron Software에서 다리우스는 새로운 것을 만들고 복잡한 개념을 단순화하여 더 쉽게 이해할 수 있도록 하는 것을 즐깁니다. 그는 사내 개발자로서 학생들을 가르치는 데에도 자원하여 차세대 인재들과 전문 지식을 공유하고 있습니다.

다리우스에게 있어 그의 일은 가치 있고 실질적인 영향을 미치기 때문에 보람 있는 일입니다.

관련 기사

30일 무료 체험 → 모든 기능 이용 가능. 제한 없음. 카드 정보 필요 없음. 무료 체험 시작하기

아이언 서포트 팀

저희는 주 5일, 24시간 온라인으로 운영합니다.
채팅
이메일
전화해