시작하기
설치
composer require tailwindphp/tailwindphp
TailwindPHP에는 ctype 및 mbstring 확장 기능이 포함된 PHP 8.2 이상과 Composer가 필요합니다. 두 확장 기능은 대부분의 PHP 빌드 및 공식 Docker 이미지에 포함되어 있습니다. 아직 composer.json에는 나열되지 않았으므로(#11), 확장 기능이 없는 빌드에서는 패키지가 설치된 뒤 런타임에 실패합니다. Node.js 의존성이나 빌드 단계가 필요 없으며, Docker 이미지나 CI에 npm도 필요하지 않습니다. composer require만 실행한 뒤 API를 호출하세요.
첫 CSS 생성하기
<?php
require __DIR__ . '/vendor/autoload.php';
use TailwindPHP\tw;
$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
generate()은 마크업을 스캔하고 발견한 클래스 이름을 추출한 뒤, 해당 클래스에 필요한 CSS만 출력합니다. 그 외에는 출력하지 않습니다. 두 번째 인수를 지정하지 않으면 테마, Preflight, 유틸리티 레이어를 불러오는 기본 @import "tailwindcss"을 사용합니다.
CSS 문자열로 맞춤 설정하기
입력 CSS 문자열을 두 번째 인수로 전달하면 @theme 변수, 사용자 정의 규칙 또는 지시문을 추가할 수 있습니다. 새로운 테마 값은 자동으로 유틸리티가 됩니다:
use TailwindPHP\tw;
$css = tw::generate(
'<div class="bg-brand p-4">Hello</div>',
'@import "tailwindcss"; @theme { --color-brand: #3b82f6; }'
);
// .bg-brand now resolves to var(--color-brand)
사용 가능한 테마 네임스페이스 전체는 테마를 참조하세요.
배열 입력
한 줄을 넘는 내용에는 content 및 css 키가 있는 배열을 전달하세요. @apply로 컴포넌트를 정의하는 곳입니다:
use TailwindPHP\tw;
$css = tw::generate([
'content' => '<div class="flex p-4 btn">Hello</div>',
'css' => '
@import "tailwindcss";
@theme {
--color-brand: #3b82f6;
--font-heading: "Inter", sans-serif;
}
.btn {
@apply px-4 py-2 rounded-lg bg-brand text-white;
}
',
]);
배열 형식은 minify, importPaths, cache, cacheTtl도 지원합니다. 입력 형식은 사용법을, @apply, @theme, @utility 등을 포함한 지시문은 지시문을 참조하세요.
파일에 쓰기
generate()은 문자열을 반환하므로 스타일시트를 한 줄로 작성할 수 있습니다:
use TailwindPHP\tw;
file_put_contents('dist/styles.css', tw::generate([
'content' => file_get_contents('templates/page.html'),
'css' => '@import "tailwindcss";',
]));
템플릿 디렉터리를 스캔하는 파일 기반 빌드와 감시 모드에는 CLI를 사용하세요. @tailwindcss/cli 빌드 옵션을 사용하지만, 현재 콘텐츠 스캔 방식은 Tailwind와 다릅니다. 스캔 대상은 CLI 페이지에 나와 있습니다.
프로덕션용으로 축소하기
생성 중 출력을 압축하려면 minify => true을 전달하거나, 기존 문자열에 tw::minify()을 호출하세요:
use TailwindPHP\tw;
// Minify during generation
$css = tw::generate([
'content' => '<div class="flex p-4">Hello</div>',
'minify' => true,
]);
// Or minify separately
$css = tw::generate('<div class="flex p-4">Hello</div>');
$minified = tw::minify($css);
축소기는 주석을 제거하고, 공백을 줄이고, 16진수 색상(#ffffff에서 #fff로)을 짧게 표기하며, 0 값의 단위(0px에서 0로)를 제거합니다. 캐싱 옵션은 캐싱 및 축소를 참조하세요.