본문으로 건너뛰기

플러그인

Markdown으로 보기 GitHub에서 수정 문서 위치 3843abd

TailwindPHP은 공식 TailwindCSS 플러그인을 PHP 포팅해 제공하고 네이티브 PHP 플러그인 API를 노출합니다. 플러그인은 유틸리티, 컴포넌트, 변형을 등록하며 입력 CSS에서 @plugin 지시문으로 불러옵니다. 내장 플러그인은 공식 JavaScript 버전을 1:1로 포팅한 것으로, 동일한 선택자와 출력을 제공하며 Node를 통해 실행하지 않고 PHP로 구현되었습니다. 현재 한 가지 예외가 있습니다. 타이포그래피 플러그인의 요소 수정자(prose-headings:, prose-a:, …)는 아직 적용되지 않는 플러그인 변형에 의존합니다(#10).

@plugin 사용하기

@plugin로 플러그인 이름을 지정하세요. 내장 플러그인은 npm 패키지 이름을 사용합니다. 플러그인 클래스를 유틸리티 레이어에 출력하려면 지시문과 @import "tailwindcss/utilities.css";를 함께 사용하세요:

PHP
use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<article class="prose prose-lg"><h1>Hello</h1><p>Content here</p></article>',
    'css' => '
        @plugin "@tailwindcss/typography";
        @import "tailwindcss/utilities.css";
    ',
]);

여러 플러그인을 함께 불러올 수 있으며, 순서는 상관없습니다:

CSS
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
@import "tailwindcss/utilities.css";

@plugin은 @media 같은 다른 at-rule 안에 중첩할 수 없으며, 등록되지 않은 플러그인 이름을 사용하면 오류가 발생합니다.

플러그인 옵션

이름 뒤에 CSS 블록 구문을 사용해 플러그인에 옵션을 전달하세요. 키는 플러그인의 옵션 배열에 대응합니다:

CSS
@plugin "@tailwindcss/forms" {
    strategy: "class";
}

@plugin "@tailwindcss/typography" {
    className: "markdown";
}

@tailwindcss/forms 플러그인은 strategy(base 또는 class)을 받습니다. @tailwindcss/typography는 생성된 prose 클래스를 다른 이름으로 바꾸는 className를 받습니다. 전체 옵션 목록은 각 플러그인 페이지를 참조하세요.

내장 플러그인

플러그인 설명
@tailwindcss/typography prose 클래스, 즉 서식 있는 텍스트의 타이포그래피 기본값입니다. Typography을 참조하세요.
@tailwindcss/forms 초기화 가능하고 스타일을 지정할 수 있는 폼 컨트롤입니다. Forms를 참조하세요.

사용자 지정 플러그인

PluginInterface를 구현하고 PluginAPI의 메서드(addUtilities, matchUtilities, addComponents, addVariant, theme 등)를 사용해 자체 플러그인을 작성하세요. registerPlugin(new MyPlugin())로 등록하면 getName()이 반환하는 이름을 @plugin "my-plugin" 지시문에서 확인할 수 있습니다:

PHP
use function TailwindPHP\registerPlugin;

registerPlugin(new MyCustomPlugin());

인터페이스, 전체 예제, PluginAPI 메서드 전체 참조는 Custom Plugins에서 확인하세요.