사용법
핵심 작업 흐름은 한 번의 호출로 이루어집니다. TailwindPHP에 콘텐츠와 선택적 CSS 구성을 전달하면, 발견한 클래스에 필요한 CSS를 반환합니다. 마크업에서 클래스 이름을 추출해 확인된 테마에 맞춰 컴파일하며, 결과에는 실제로 사용하는 유틸리티만 포함됩니다.
use TailwindPHP\tw;
$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
두 번째 인수를 생략하면 generate()는 기본 @import "tailwindcss"(테마 + Preflight + 유틸리티)를 사용합니다. 사용자 지정하려면 CSS 문자열이나 배열을 전달하세요.
콘텐츠 스캔
TailwindPHP는 콘텐츠의 class 및 className 속성을 읽어 클래스 이름을 찾습니다. 추출되는 항목을 확인하려면 tw::extractCandidates()를 사용하세요:
use TailwindPHP\tw;
tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']
class 및 className 속성을 모두 스캔하며, 반환 목록에서 중복 항목은 제거됩니다. [mask-type:luminance] 또는 bg-[#1da1f2] 같은 임의 후보도 같은 방식으로 추출되며 유효한 경우 컴파일됩니다. 여기에 나타나는 항목이 바로 generate()가 컴파일할 내용입니다.
입력 형식
모든 정적 메서드는 다음 세 가지 입력 형식을 지원합니다:
| 형식 | 시그니처 | 사용 시점 |
|---|---|---|
| 문자열만 | tw::generate($content) |
기본 테마를 사용하며 사용자 지정이 필요 없을 때. |
| 문자열 + CSS 문자열 | tw::generate($content, $css) |
테마를 빠르게 조정하거나 지시문을 인라인으로 사용할 때. |
| 배열 | tw::generate(['content' => ..., 'css' => ...]) |
minify, importPaths 또는 cache이 필요할 때. |
use TailwindPHP\tw;
// Format 1: String only
tw::generate('<div class="flex">');
// Format 2: String + CSS string
tw::generate('<div class="flex">', '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
// Format 3: Array with content, css, and options
tw::generate([
'content' => '<div class="flex p-4">',
'css' => '@import "tailwindcss";',
'minify' => true,
]);
옵션을 받는 형식은 배열뿐입니다. css 및 minify 외에도 importPaths(가져오기 참고), cache, cacheTtl(캐싱 참고)을 사용할 수 있습니다.
재사용 가능한 컴파일러
같은 구성으로 여러 조각을 컴파일할 때, 즉 요청 루프나 템플릿 묶음 또는 컴포넌트 라이브러리를 처리할 때는 단일 컴파일러 인스턴스를 사용하는 편이 효율적입니다. tw::compile()는 테마와 디자인 시스템을 한 번 확인한 다음 재사용합니다:
use TailwindPHP\tw;
$compiler = tw::compile('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
$css = $compiler->generate('<div class="flex p-4 bg-brand">');
$candidates = $compiler->extractCandidates('<div class="flex p-4 bg-brand">');
$minified = $compiler->minify($css);
컴파일러는 속성 검사(properties(), computedProperties(), value(), computedValue())와 테마 접근자(colors(), breakpoints(), spacing())도 제공합니다. 모든 메서드는 전체 API문서를 참고하세요.
입력 CSS 구성하기
TailwindPHP의 기능 대부분은 구성으로 전달하는 CSS 문자열에 있습니다. 다음 항목을 살펴보세요: