انتقل إلى المحتوى

الاستخدام

عرض بتنسيق Markdown التعديل على GitHub التوثيق في 3843abd

سير العمل الأساسي هو استدعاء واحد: قدّم إلى TailwindPHP محتواك مع إعدادات CSS اختيارية، وستُعيد CSS للفئات التي تعثر عليها. تُستخرج أسماء الفئات من الترميز، وتُجمّع بالاستناد إلى السمة المحلولة، ولا تتضمن النتيجة إلا الأدوات المساعدة التي تستخدمها فعليًا.

PHP
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():

PHP
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.
PHP
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 (انظر Imports) وcache وcacheTtl (انظر Caching).

مُجمّع قابل لإعادة الاستخدام

يكون تجميع أجزاء كثيرة وفق الإعدادات نفسها — مثل حلقة طلبات أو مجموعة قوالب أو مكتبة مكونات — أقل كلفة باستخدام مثيل واحد من المُجمّع. تحل tw::compile() السمة ونظام التصميم مرة واحدة، ثم تعيد استخدامهما:

PHP
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 التي تمررها كإعداد. تابع إلى:

  • Theme — متغيرات @theme ومساحات الأسماء.
  • Directives — @apply و@utility و@layer و@custom-variant.
  • Imports — @import والوحدات الافتراضية وimportPaths وPreflight.
  • @source — تحكّم في الملفات والفئات التي يجري فحصها.