Pourquoi TailwindUI PHP ?

Une solution simple et élégante pour créer des interfaces utilisateur cohérentes et professionnelles.

Rapide

Générez des composants complexes en une seule ligne de code PHP.

Sécurisé

Échappement HTML automatique pour prévenir les attaques XSS.

Modulaire

Utilisez uniquement les composants dont vous avez besoin.

Composants Disponibles

Cliquez sur un composant pour voir les exemples et le code.

Navigation

Button

Boutons stylisés avec variantes et tailles

<?php
use TailwindUI\Button;

// Variantes de couleur
echo Button::primary('Primary');
echo Button::secondary('Secondary');
echo Button::success('Success');
echo Button::danger('Danger');
echo Button::warning('Warning');
echo Button::info('Info');

// Avec icônes
echo Button::withIcon('Enregistrer', 'fas fa-save', 'primary');
echo Button::withIcon('Supprimer', 'fas fa-trash', 'danger');

// Tailles
echo Button::primary('Petit', [], 'sm');
echo Button::primary('Moyen', [], 'md');
echo Button::primary('Grand', [], 'lg');

// Outline
echo Button::outline('Outline', 'blue');

// Attributs personnalisés
echo Button::primary('Submit', [
    'type' => 'submit',
    'onclick' => 'handleSubmit()',
    'class' => 'w-full'
]);
?>

Card

Cartes de contenu et statistiques

Total Projets

Mon Projet

Contenu de la carte avec en-tête.

<?php
use TailwindUI\Card;

// Carte de statistique
echo Card::stat('Total Projets', '42', 'fas fa-folder', 'blue');
echo Card::stat('Revenus', '12,500 €', 'fas fa-euro-sign', 'green');
echo Card::stat('Erreurs', '3', 'fas fa-exclamation-triangle', 'red');

// Carte avec en-tête
echo Card::withHeader(
    'Mon Projet',
    '<p>Contenu de la carte</p>',
    Button::primary('Action')  // Footer optionnel
);

// Carte basique
echo Card::basic('<p>Contenu simple</p>');

// Carte de projet
echo Card::project([
    'title' => 'Site E-commerce',
    'description' => 'Description du projet...',
    'color' => '#3B82F6',
    'status' => 'active',
    'deadline' => '15/12/2024'
]);

// Empty state
echo Card::empty(
    'fas fa-folder-open',
    'Aucun projet',
    'Créez votre premier projet',
    Button::primary('Créer')
);
?>

Form

Éléments de formulaire complets

Email *

Statut

<?php
use TailwindUI\Form;

// Input avec validation
echo Form::input('email', 'Email', [
    'type' => 'email',
    'required' => true,
    'placeholder' => 'votre@email.com'
], $error, 'Format: exemple@domaine.com');

// Textarea
echo Form::textarea('description', 'Description', [
    'rows' => 4,
    'placeholder' => 'Décrivez...'
]);

// Select
echo Form::select('status', 'Statut', [
    'todo' => 'À faire',
    'in_progress' => 'En cours',
    'done' => 'Terminé'
], 'todo');

// Checkbox et Radio
echo Form::checkbox('remember', 'Se souvenir de moi', true);
echo Form::radio('priority', 'high', 'Haute priorité', false);

// Date/Color
echo Form::datetime('deadline', 'Date limite', 'datetime-local');
echo Form::color('color', 'Couleur', '#3B82F6');

// File upload
echo Form::file('avatar', 'Photo', ['accept' => 'image/*']);

// Grille 2 colonnes
echo Form::grid([
    Form::input('firstname', 'Prénom'),
    Form::input('lastname', 'Nom')
], 2);
?>

Alert

Messages et notifications

Opération réussie !

Une erreur est survenue.

Attention, vérifiez vos données.

<?php
use TailwindUI\Alert;

// Types d'alertes
echo Alert::success('Opération réussie !');
echo Alert::error('Une erreur est survenue.');
echo Alert::warning('Attention !');
echo Alert::info('Information importante.');

// Non-dismissible
echo Alert::success('Message permanent', false);

// Flash messages (avec Session)
$flashes = [
    'success' => Session::getFlash('success'),
    'error' => Session::getFlash('error')
];
echo Alert::flashMessages(array_filter($flashes));

// Toast notification
echo Alert::toast('Enregistré !', 'success', 3000);
?>

Badge

Badges et étiquettes avec auto-mapping

Primary Success Danger Warning

Actif En cours À faire Urgent

<?php
use TailwindUI\Badge;

// Badges de couleur
echo Badge::primary('Primary');
echo Badge::success('Success');
echo Badge::danger('Danger');
echo Badge::warning('Warning');

// Auto-mapping statut (couleurs automatiques !)
echo Badge::status('active');      // Vert
echo Badge::status('in_progress'); // Bleu
echo Badge::status('pending');     // Jaune
echo Badge::status('completed');   // Vert

// Auto-mapping priorité
echo Badge::priority('low');       // Gris
echo Badge::priority('medium');    // Bleu
echo Badge::priority('high');      // Orange
echo Badge::priority('urgent');    // Rouge

// Avec icône
echo Badge::withIcon('5 nouveaux', 'fas fa-bell');

// Avec point indicateur
echo Badge::withDot('En ligne', 'green');

// Groupe de badges
echo Badge::group([
    Badge::primary('PHP'),
    Badge::info('MySQL'),
    Badge::success('Tailwind')
]);
?>

Table

Tableaux stylisés avec pagination

Tâche	Statut	Priorité
Développer API	En cours	Haute

<?php
use TailwindUI\Table;
use TailwindUI\Badge;

$headers = ['Tâche', 'Statut', 'Priorité', 'Actions'];
$rows = [];

foreach ($tasks as $task) {
    $rows[] = [
        $task->getTitle(),
        Table::statusCell($task->getStatus()),
        Table::priorityCell($task->getPriority()),
        Table::actionsCell([
            Table::actionButton('/edit/' . $task->getId(), 'fas fa-edit', 'Modifier', 'blue'),
            Table::actionButton('/delete/' . $task->getId(), 'fas fa-trash', 'Supprimer', 'red')
        ])
    ];
}

// Types de tables
echo Table::simple($headers, $rows);
echo Table::striped($headers, $rows);
echo Table::hoverable($headers, $rows);
echo Table::full($headers, $rows);  // striped + hover

// Pagination
echo Table::pagination($currentPage, $totalPages, '/tasks');
?>

Navigation

Navbar, breadcrumb, tabs, sidebar

Accueil
Projets
Configuration

<?php
use TailwindUI\Navigation;

// Breadcrumb
echo Navigation::breadcrumb([
    ['label' => 'Accueil', 'url' => '/'],
    ['label' => 'Projets', 'url' => '/projects'],
    ['label' => 'Configuration', 'url' => '']
]);

// Tabs avec compteurs
echo Navigation::tabs([
    'all' => [
        'label' => 'Toutes',
        'url' => '/tasks',
        'icon' => 'fas fa-list',
        'count' => 42
    ],
    'in_progress' => [
        'label' => 'En cours',
        'url' => '/tasks?status=in_progress',
        'count' => 8
    ]
], 'all');

// Sidebar menu
echo Navigation::sidebar([
    'dashboard' => [
        'label' => 'Dashboard',
        'url' => '/',
        'icon' => 'fas fa-home'
    ],
    'projects' => [
        'label' => 'Projets',
        'url' => '/projects',
        'icon' => 'fas fa-folder',
        'badge' => '3'
    ]
], 'dashboard');

// Dropdown
echo Navigation::dropdown('Mon compte', [
    ['label' => 'Profil', 'url' => '/profile', 'icon' => 'fas fa-user'],
    'divider',
    ['label' => 'Déconnexion', 'url' => '/logout', 'icon' => 'fas fa-sign-out-alt']
]);
?>

Header

En-têtes et sections hero

Titre Principal

Description de la section hero avec un texte explicatif.

<?php
use TailwindUI\Header;

// Hero simple
echo Header::hero(
    'Titre Principal',
    'Description de la section',
    Button::primary('Commencer')
);

// Hero avec image de fond
echo Header::heroWithBackground(
    'Titre',
    'Description',
    '/images/background.jpg',
    Button::primary('Action')
);

// Hero avec deux colonnes
echo Header::heroSplit(
    'Titre',
    'Description',
    '/images/hero-image.jpg',
    Button::primary('Action')
);

// En-tête de page
echo Header::page('Titre de la page', 'Description optionnelle');

// En-tête avec breadcrumb
echo Header::pageWithBreadcrumb('Mon Projet', [
    ['label' => 'Accueil', 'url' => '/'],
    ['label' => 'Projets', 'url' => '/projects'],
    ['label' => 'Mon Projet', 'url' => '']
]);

// Section centrée avec statistiques
echo Header::centered('Nos Résultats', 'Description', [
    ['value' => '100+', 'label' => 'Clients'],
    ['value' => '50K', 'label' => 'Projets']
]);

// Hero avec dégradé personnalisé
echo Header::gradient('Titre', 'Description', 'green-500', 'teal-600');

// En-tête de section
echo Header::section('Titre de Section', 'Description');
?>

Footer

Pieds de page stylisés

<?php
use TailwindUI\Footer;

// Footer simple
echo Footer::simple('© 2024 Mon Site');

// Footer avec réseaux sociaux
echo Footer::withSocial('© 2024 Mon Site', [
    ['url' => 'https://twitter.com', 'icon' => 'fab fa-twitter', 'label' => 'Twitter'],
    ['url' => 'https://github.com', 'icon' => 'fab fa-github', 'label' => 'GitHub']
]);

// Footer avec colonnes
echo Footer::withColumns([
    [
        'title' => 'Produits',
        'links' => [
            ['label' => 'Features', 'url' => '/features'],
            ['label' => 'Pricing', 'url' => '/pricing']
        ]
    ],
    [
        'title' => 'Support',
        'links' => [
            ['label' => 'Documentation', 'url' => '/docs'],
            ['label' => 'Contact', 'url' => '/contact']
        ]
    ]
], '© 2024 Mon Site');

// Footer avec newsletter
echo Footer::withNewsletter(
    'Restez informé',
    'Recevez nos dernières actualités',
    '/newsletter',
    '© 2024 Mon Site'
);

// Footer complet
echo Footer::full('MonLogo', $columns, $socialLinks, '© 2024 Mon Site');

// Footer clair
echo Footer::light('© 2024 Mon Site', [
    ['label' => 'Conditions', 'url' => '/terms'],
    ['label' => 'Confidentialité', 'url' => '/privacy']
]);
?>

FlyoutMenu

Menus déroulants avancés

Cliquez pour voir le menu déroulant (fonctionnalité JavaScript)

<?php
use TailwindUI\FlyoutMenu;

// Menu simple
echo FlyoutMenu::simple('Produits', [
    ['label' => 'Analytics', 'url' => '/analytics', 'icon' => 'fas fa-chart-bar'],
    ['label' => 'Engagement', 'url' => '/engagement', 'icon' => 'fas fa-cursor'],
    'divider',
    ['label' => 'Sécurité', 'url' => '/security', 'icon' => 'fas fa-shield-alt']
]);

// Menu avec descriptions
echo FlyoutMenu::withDescriptions('Solutions', [
    [
        'label' => 'Analytics',
        'description' => 'Analysez vos données en profondeur',
        'url' => '/analytics',
        'icon' => 'fas fa-chart-pie'
    ],
    [
        'label' => 'Automatisation',
        'description' => 'Automatisez vos workflows',
        'url' => '/automation',
        'icon' => 'fas fa-robot'
    ]
]);

// Mega menu
echo FlyoutMenu::mega('Solutions', [
    [
        'title' => 'Analytics',
        'items' => [
            ['label' => 'Rapports', 'url' => '/reports', 'icon' => 'fas fa-file-alt'],
            ['label' => 'Dashboards', 'url' => '/dashboards', 'icon' => 'fas fa-tachometer-alt']
        ]
    ]
], [
    'title' => 'Featured',
    'items' => [
        ['label' => 'Guide', 'url' => '/guide', 'description' => 'Commencez ici']
    ]
]);

// Grille d'icônes
echo FlyoutMenu::iconGrid('Apps', [
    ['label' => 'Calendar', 'url' => '/calendar', 'icon' => 'fas fa-calendar'],
    ['label' => 'Mail', 'url' => '/mail', 'icon' => 'fas fa-envelope']
], 3);

// Menu avec footer
echo FlyoutMenu::withFooter('Ressources', $items, [
    ['label' => 'Voir tout', 'url' => '/resources']
]);
?>

Banner

Bannières et notifications

Nouvelle fonctionnalité disponible !

Attention : Maintenance prévue ce soir.

<?php
use TailwindUI\Banner;

// Bannière d'annonce
echo Banner::announcement(
    'Nouvelle version disponible !',
    '/changelog',
    true // dismissible
);

// Bannière promotionnelle
echo Banner::promo(
    'Soldes d\'été',
    'Profitez de -30% sur tout le site',
    'Voir les offres',
    '/promo'
);

// Bannière cookie
echo Banner::cookie(
    'Nous utilisons des cookies pour améliorer votre expérience.',
    'Accepter',
    'Refuser'
);

// Bannière compte à rebours
echo Banner::countdown(
    'Offre limitée !',
    '2024-12-31 23:59:59',
    'Profiter',
    '/offer'
);

// Bannière d'alerte
echo Banner::alert('warning', 'Maintenance prévue ce soir', '/status');
echo Banner::alert('error', 'Service temporairement indisponible');
echo Banner::alert('success', 'Mise à jour effectuée');
echo Banner::alert('info', 'Nouvelle fonctionnalité disponible');

// Bannière flottante
echo Banner::floating(
    'Besoin d\'aide ?',
    'Contactez-nous',
    '/contact'
);

// Bannière avec icône
echo Banner::withIcon(
    'fas fa-gift',
    'Cadeau de bienvenue pour les nouveaux inscrits !',
    'purple'
);
?>

Installation

Intégrez la bibliothèque en quelques minutes.

PHP / HTML

1
Copiez le dossier UI
Copiez src/ dans votre projet
2
Configurez l'autoload
PSR-4 avec namespace TailwindUI
3
Incluez Tailwind CSS
Via CDN ou npm

Guide complet

Laravel

1
Installez via Composer composer require tailwindui/php
2
Publiez les assets php artisan vendor:publish
3
Utilisez dans Blade {!! UI::button('Click') !!}

Guide Laravel

Exemple Rapide

<?php
// Dans votre vue PHP ou template Blade

use TailwindUI\Button;
use TailwindUI\Card;
use TailwindUI\Form;
use TailwindUI\Alert;
use TailwindUI\Badge;
use TailwindUI\Table;

// Créer un formulaire complet
?>
<form method="POST" action="/projects">
    <?= Form::input('title', 'Titre du projet', ['required' => true]) ?>
    <?= Form::textarea('description', 'Description') ?>

    <?= Form::grid([
        Form::select('priority', 'Priorité', [
            'low' => 'Basse',
            'medium' => 'Moyenne',
            'high' => 'Haute'
        ], 'medium'),
        Form::datetime('deadline', 'Date limite', 'date')
    ], 2) ?>

    <div class="flex justify-end space-x-4">
        <?= Button::secondary('Annuler') ?>
        <?= Button::withIcon('Créer', 'fas fa-save', 'primary', ['type' => 'submit']) ?>
    </div>
</form>