Başlarken

Yükleme

composer require tailwindphp/tailwindphp

TailwindPHP için PHP 8.2 veya üzeri, ctype ve mbstring uzantıları ve Composer gerekir. Her iki uzantı da çoğu PHP derlemesiyle ve resmi Docker görüntüleriyle birlikte gelir; composer.json bunları henüz listelemez (#11), bu yüzden bunları içermeyen bir derlemede paket yüklenir ancak çalışma zamanında hata verir. Node.js bağımlılığı, derleme adımı veya Docker görüntünüzde ya da CI ortamınızda npm gerekmez. Yalnızca composer require ve API öğesini çağırın.

İlk CSS öğenizi oluşturun

<?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() işaretlemeyi tarar, bulduğu sınıf adlarını çıkarır ve yalnızca bu sınıfların ihtiyaç duyduğu CSS öğesini üretir — fazlasını değil. İkinci bağımsız değişken verilmezse tema, Preflight ve yardımcı programlar katmanını içeren varsayılan bir @import "tailwindcss" kullanır.

Bir CSS dizgesiyle özelleştirme

CSS dizgesini ikinci bağımsız değişken olarak ileterek @theme değişkenleri, özel kurallar veya yönergeler ekleyin. Yeni tema değerleri otomatik olarak yardımcı programlara dönüşür:

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)

Tema ad alanlarının tümü için Tema bölümüne bakın.

Dizi girdisi

Tek satırdan daha fazlası için content ve css anahtarlarını içeren bir dizi iletin. @apply ile bileşen tanımlamak için uygun yer burasıdır:

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;
        }
    ',
]);

Dizi biçimi ayrıca minify, importPaths, cache ve cacheTtl öğelerini de kabul eder. Girdi biçimleri için Kullanım, @apply, @theme, @utility ve benzeri yönergeler için de Yönergeler bölümüne bakın.

Dosyaya yazma

generate() bir dizge döndürür; bu nedenle stil sayfasını yazmak tek satır sürer:

use TailwindPHP\tw;

file_put_contents('dist/styles.css', tw::generate([
    'content' => file_get_contents('templates/page.html'),
    'css' => '@import "tailwindcss";',
]));

Şablon dizinini tarayan dosya tabanlı derlemeler ve izleme modu için bunun yerine CLI kullanın. @tailwindcss/cli derleme seçeneklerini alır, ancak içerik taraması bugün Tailwind'inkinden farklıdır; taradığı dosyalar CLI sayfasında listelenmiştir.

Üretim için küçültme

Oluşturma sırasında çıktıyı sıkıştırmak için minify => true iletin veya mevcut bir dizgede tw::minify() çağırın:

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);

Küçültücü yorumları kaldırır, boşlukları daraltır, onaltılık renkleri kısaltır (#ffffff yerine #fff) ve sıfır değerli birim adlarını kaldırır (0px yerine 0). Önbelleğe alma seçenekleri için Önbelleğe alma ve küçültme bölümüne bakın.

Sonraki adımlar

• Kullanım — oluşturma iş akışı, içerik taraması ve girdi biçimleri.
• Sınıf yardımcıları — cn(), merge(), join() ve variants().
• Eklentiler — tipografi, formlar ve özel eklentiler.
• API — tüm tw arayüzü ve yeniden kullanılabilir derleyici örnekleri.
• CLI — Node.js olmadan dosya tabanlı ve izleme derlemeleri.