Tailwind에서 인라인 스타일 변환기

Tailwind CSS 클래스를 이메일 준비가 된 HTML 템플릿용 인라인 스타일로 변환합니다.

온라인으로 사용해보기

설치

npm install tailwind-to-inline

사용법

#### 파일 경로에서 사용하기

import { makeStylesInline } from 'tailwind-to-inline';
const htmlTemplate = await makeStylesInline('templates/welcome-email.html', {
  name: 'John',
  cta_text: 'Complete Profile'
});

매개변수:

• templatePath — 템플릿 파일의 경로입니다.
• placeholderValues (선택 사항) — 템플릿 내 동적 콘텐츠를 대체할 키-값 쌍 객체입니다.

#### 원시 HTML 문자열에서부터

import { makeStylesInlineFromString } from 'tailwind-to-inline';
const html = 
Hello, {{name}}
;
const htmlTemplate = await makeStylesInlineFromString(html, {
  name: 'John',
});

매개변수:

• templateString — Tailwind CSS 클래스가 포함된 원시 HTML 문자열입니다.
• data (선택 사항) — 템플릿 내 동적 콘텐츠를 대체할 키-값 쌍 객체입니다.

예시

#### 원본 템플릿 welcome-email.html:

  
    

      Welcome, {{name}}
    
    

      
        {{cta_text}}
      
    
  

#### 변환된 결과:

  
    

      Welcome, John
    
    

      
        Complete Profile
      
    
  

기여

기여, 이슈 및 기능 요청을 환영합니다!

기여자

라이선스

이 프로젝트는 MIT 라이선스를 따릅니다.

--- Tranlated By Open Ai Tx | Last indexed: 2026-06-09 ---