DaisyUI 5 avec Symfony 6/7
#symfony#daisyui#tailwindcss#assetmapper
Guillaume

Guillaume @gbtux

About: OpenSource and Symfony fan

Location:
Toulon, France
Joined:
Apr 18, 2021

DaisyUI 5 avec Symfony 6/7

Publish Date: May 13
2 0

Aujourd'hui, c'est mardi et c'est surtout ...DaisyUI.

Dans les dernières versions de Symfony (6 et 7) on a un nouveau composant pour gérer nos assets : AssetMapper.

Le mini défi du jour : installer DaisyUI pour un nouveau projet.

Création du projet Symfony

Rien de bien compliqué à ce niveau, surtout avec la CLI Symfony (ici mon projet s'appelle FormerK):

symfony new FormerK --webapp
Enter fullscreen mode Exit fullscreen mode

Installation du bundle Tailwind

Encore une fois la doc de Symfony est bien utile :

cd FormerK
composer require symfonycasts/tailwind-bundle
Enter fullscreen mode Exit fullscreen mode

Configuration du bundle Tailwind

Si vous faites tout de suite les commandes indiquées en fin d'installation, vous allez (avec la commande bin/console tailwind:init) installer la version 3 de Tailwind.

Ce n'est pas ce que l'on veut, puisque la dernière version de DaisyUI utilise Tailwind 4.

Pour modifier la version de Tailwind utilisée, éditez le fichier config/packages/symfonycasts_tailwind.yaml et modifiez le comme suit:

symfonycasts_tailwind:
    # Specify the EXACT version of Tailwind CSS you want to use
    binary_version: 'v4.1.6'
Enter fullscreen mode Exit fullscreen mode

Lancez maintenant les commandes suivantes et observez le résultat:

bin/console tailwind:init
bin/console tailwind:build
Enter fullscreen mode Exit fullscreen mode

Capture premier build de Tailwind

Installation de DaisyUI

Pour installer DaisyUI, là aussi, rien de compliqué : on va utiliser la commande de gestion des dépendances d'AssetMapper:

bin/console importmap:require daisyui@latest
Enter fullscreen mode Exit fullscreen mode

et voilà le résultat:

Capture de l'import de DaisyUI

Configuration de Tailwind pour utiliser DaisyUI

Dans la version 4 de Tailwind, on utilise maintenant le "@plugin".
Nous n'avions pas configuré Tailwind dans notre projet, donc on va faire les 2 en même temps.
Editez le fichier assets/styles/app.css comme suit:

@import "tailwindcss";
@plugin "../vendor/daisyui/daisyui.index.js";
Enter fullscreen mode Exit fullscreen mode

Puis relancez un build Tailwind avec la même commande :

bin/console tailwind:build
Enter fullscreen mode Exit fullscreen mode

et admirez le résultat:

Résultat du build

Un exemple !

Créez un controleur dans votre application et dans votre template, ça doit donner ça avec l'exemple d'alert de DaisyUI :

{% extends 'base.html.twig' %}

{% block body %}
    <div role="alert" class="alert alert-success">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>Your purchase has been confirmed!</span>
    </div>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

Evidemment, il faut relancer la commande de compilation de tailwind:

bin/console tailwind:build
Enter fullscreen mode Exit fullscreen mode

Si vous ne voulez pas relancer la build à la main en permanence et que ça recompile à chaque changement sur vos templates, laissez tourner la commande suivante dans un terminal:

bin/console tailwind:build --watch
Enter fullscreen mode Exit fullscreen mode

Et voilà le résultat :

Affichage de la page

Enjoy !

Comments 0 total

    Add comment