البدء

التثبيت

composer require tailwindphp/tailwindphp

يحتاج TailwindPHP إلى PHP 8.2 أو أحدث، مع إضافتي ctype وmbstring، وإلى Composer. تتضمن معظم إصدارات PHP وصور Docker الرسمية الإضافتين؛ لكن composer.json لا يذكرهما بعد (#11)، لذا يُثبّت الإنشاء الخالي منهما الحزمة ثم يفشل أثناء التشغيل. لا توجد تبعية Node.js ولا خطوة إنشاء ولا npm في صورة Docker أو بيئة CI لديك. ما عليك سوى 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 اللازمة لتلك الأصناف — لا شيء أكثر. عند عدم تمرير وسيط ثانٍ، يستخدم @import "tailwindcss" افتراضيًا يضم السمة وPreflight وطبقة الأدوات.

التخصيص عبر سلسلة 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);

يزيل المصغّر التعليقات، ويقلّص المسافات البيضاء، ويختصر الألوان السداسية (#ffffff إلى #fff)، ويحذف الوحدات من قيم الصفر (0px إلى 0). راجع التخزين المؤقت والتصغير لمعرفة خيارات التخزين المؤقت.

الخطوات التالية

• الاستخدام — سير عمل الإنشاء، وفحص المحتوى، وتنسيقات الإدخال.
• أدوات الأصناف — cn() وmerge() وjoin() وvariants().
• الإضافات — إضافات الطباعة والنماذج والإضافات المخصصة.
• API — الواجهة الكاملة لـtw ونسخ المترجم القابلة لإعادة الاستخدام.
• CLI — إنشاء ومراقبة الملفات دون Node.js.