Installation - TailwindUI PHP

Prérequis

PHP 8.0+ - Support des types et des attributs
Tailwind CSS - Via CDN ou npm
Font Awesome 6+ - Pour les icônes

Méthode 1 : Installation Manuelle

Étape 1 : Télécharger les fichiers

Téléchargez le dossier src/UI/ depuis le repository GitHub :

Ou clonez le repository complet :

git clone https://github.com/Babs95/my_biblio_tailwindUI_PHP.git
cd my_biblio_tailwindUI_PHP/src

Étape 2 : Copier dans votre projet

Copiez le dossier UI/ dans votre répertoire source :

votre-projet/

├── src/

├── UI/

├── Component.php

├── Button.php

├── Card.php

├── Form.php

├── Alert.php

├── Badge.php

├── Table.php

└── Navigation.php

├── public/

└── vendor/

Étape 3 : Configurer l'autoload PSR-4

Ajoutez le namespace dans votre composer.json :

{
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    }
}

Puis regénérez l'autoload :

composer dump-autoload

Sans Composer ? Créez un autoloader manuel ou incluez les fichiers directement avec require_once.

Étape 4 : Inclure Tailwind CSS et Font Awesome

Dans votre fichier HTML principal ou layout :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Application</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- Votre contenu -->
</body>
</html>

Méthode 2 : Via Composer (Recommandé)

Installation en une commande

composer require tailwindui/php

La bibliothèque sera automatiquement disponible via l'autoload Composer.

Note : Le package Composer sera bientôt disponible sur Packagist.

Utilisation

Exemple complet

<?php
// index.php ou votre vue

require_once __DIR__ . '/vendor/autoload.php';

use TailwindUI\Button;
use TailwindUI\Card;
use TailwindUI\Form;
use TailwindUI\Alert;
use TailwindUI\Badge;
use TailwindUI\Table;
use TailwindUI\Navigation;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Application</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">

<div class="max-w-4xl mx-auto py-8 px-4">
    <h1 class="text-3xl font-bold mb-8">Dashboard</h1>

    <!-- Alertes -->
    <?= Alert::success('Bienvenue dans votre application !') ?>

    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <?= Card::stat('Projets', '12', 'fas fa-folder', 'blue') ?>
        <?= Card::stat('Tâches', '48', 'fas fa-tasks', 'green') ?>
        <?= Card::stat('Utilisateurs', '5', 'fas fa-users', 'purple') ?>
    </div>

    <!-- Formulaire -->
    <?= Card::withHeader('Nouveau Projet', '
        <form method="POST" action="/projects">
            ' . Form::input('title', 'Titre', ['required' => true]) . '
            ' . Form::textarea('description', 'Description') . '
            ' . Form::select('priority', 'Priorité', [
                'low' => 'Basse',
                'medium' => 'Moyenne',
                'high' => 'Haute'
            ]) . '
            <div class="flex justify-end space-x-4">
                ' . Button::secondary('Annuler') . '
                ' . Button::withIcon('Créer', 'fas fa-save', 'primary', ['type' => 'submit']) . '
            </div>
        </form>
    ') ?>
</div>

</body>
</html>

Autoloader sans Composer

autoload.php personnalisé

Si vous n'utilisez pas Composer, créez un autoloader PSR-4 :

<?php
// autoload.php

spl_autoload_register(function (string $className): void {
    // Namespace de base
    $prefix = 'App\\';
    $baseDir = __DIR__ . '/src/';

    // Vérifie si la classe utilise notre namespace
    $len = strlen($prefix);
    if (strncmp($prefix, $className, $len) !== 0) {
        return;
    }

    // Récupère le nom relatif de la classe
    $relativeClass = substr($className, $len);

    // Construit le chemin du fichier
    $file = $baseDir . str_replace('\\', '/', $relativeClass) . '.php';

    // Charge le fichier s'il existe
    if (file_exists($file)) {
        require $file;
    }
});

// Utilisation :
// require_once __DIR__ . '/autoload.php';
// use TailwindUI\Button;
// echo Button::primary('Click');
?>

Installation PHP / HTML