Ξεκινώντας

Εγκατάσταση

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 και το επίπεδο utilities.

Προσαρμογή μέσω συμβολοσειράς CSS

Περάστε μια συμβολοσειρά εισόδου CSS ως δεύτερο όρισμα για να προσθέσετε μεταβλητές @theme, προσαρμοσμένους κανόνες ή οδηγίες. Οι νέες τιμές θέματος γίνονται αυτόματα utilities:

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). Δείτε την ενότητα Προσωρινή αποθήκευση και ελαχιστοποίηση για τις επιλογές προσωρινής αποθήκευσης.

Επόμενα βήματα

• Χρήση — η ροή εργασίας δημιουργίας, η σάρωση περιεχομένου και οι μορφές εισόδου.
• Utilities κλάσεων — τα cn(), merge(), join() και variants().
• Πρόσθετα — τυπογραφία, φόρμες και προσαρμοσμένα πρόσθετα.
• API — όλη η επιφάνεια tw και επαναχρησιμοποιήσιμα στιγμιότυπα μεταγλωττιστή.
• CLI — δημιουργίες βάσει αρχείων και παρακολούθησης, χωρίς Node.js.