Memulai

Instalasi

composer require tailwindphp/tailwindphp

TailwindPHP memerlukan PHP 8.2 atau yang lebih baru dengan ekstensi ctype dan mbstring, serta Composer. Kedua ekstensi disertakan dalam sebagian besar build PHP dan image resmi Docker; composer.json belum mencantumkannya (#11), sehingga build tanpa ekstensi tersebut akan menginstal paket lalu gagal saat runtime. Tidak ada dependensi Node.js, tahap build, atau npm di image atau CI Docker Anda. Cukup composer require dan panggil API.

Buat CSS pertama Anda

<?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() memindai markup, mengambil nama kelas yang ditemukan, lalu menghasilkan hanya CSS yang dibutuhkan kelas tersebut — tidak lebih. Jika argumen kedua tidak diberikan, fitur ini menggunakan @import "tailwindcss" default yang menyertakan tema, Preflight, dan lapisan utilitas.

Kustomisasi melalui string CSS

Berikan string CSS masukan sebagai argumen kedua untuk menambahkan variabel @theme, aturan kustom, atau direktif. Nilai tema baru otomatis menjadi utilitas:

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)

Lihat Tema untuk daftar lengkap namespace tema.

Masukan array

Untuk kebutuhan selain satu baris, berikan array dengan kunci content dan css. Di sinilah Anda menentukan komponen dengan @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;
        }
    ',
]);

Format array juga menerima minify, importPaths, cache, dan cacheTtl. Lihat Penggunaan untuk format masukan dan Direktif untuk @apply, @theme, @utility, dan lainnya.

Tulis ke file

generate() mengembalikan string, jadi menulis stylesheet hanya perlu satu baris:

use TailwindPHP\tw;

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

Untuk build berbasis file yang memindai direktori templat dan untuk mode pantau, gunakan CLI saja. Fitur ini menerima opsi build @tailwindcss/cli, tetapi pemindaian kontennya saat ini berbeda dari Tailwind; halaman CLI menjelaskan apa saja yang dipindai.

Minifikasi untuk produksi

Berikan minify => true untuk memadatkan keluaran saat dibuat, atau panggil tw::minify() pada string yang sudah ada:

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

Minifier menghapus komentar, merapatkan spasi kosong, mempersingkat warna hex (#ffffff menjadi #fff), dan menghapus satuan dari nilai nol (0px menjadi 0). Lihat Penyimpanan cache & minifikasi untuk opsi cache.

Langkah berikutnya

• Penggunaan — alur kerja pembuatan, pemindaian konten, dan format masukan.
• Utilitas kelas — cn(), merge(), join(), dan variants().
• Plugin — tipografi, formulir, dan plugin kustom.
• API — cakupan tw lengkap dan instans compiler yang dapat digunakan kembali.
• CLI — build berbasis file dan pemantauan tanpa Node.js.