Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Aujourd'hui, c'est mardi et c'est surtout ....
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
Installation du bundle Tailwind
Encore une fois est bien utile :
cd FormerK
composer require symfonycasts/tailwind-bundle
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'
Lancez maintenant les commandes suivantes et observez le résultat:
bin/console tailwind:init
bin/console tailwind:build
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
et voilà le résultat:
Configuration de Tailwind pour utiliser DaisyUI
Dans la version 4 de Tailwind, on utilise maintenant le "".
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";
Puis relancez un build Tailwind avec la même commande :
bin/console tailwind:build
et admirez le résultat:
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="" 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 %}
Evidemment, il faut relancer la commande de compilation de tailwind:
bin/console tailwind:build
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
Et voilà le résultat :
Enjoy !
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
Installation du bundle Tailwind
Encore une fois est bien utile :
cd FormerK
composer require symfonycasts/tailwind-bundle
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'
Lancez maintenant les commandes suivantes et observez le résultat:
bin/console tailwind:init
bin/console tailwind:build
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
et voilà le résultat:
Configuration de Tailwind pour utiliser DaisyUI
Dans la version 4 de Tailwind, on utilise maintenant le "".
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";
Puis relancez un build Tailwind avec la même commande :
bin/console tailwind:build
et admirez le résultat:
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="" 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 %}
Evidemment, il faut relancer la commande de compilation de tailwind:
bin/console tailwind:build
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
Et voilà le résultat :
Enjoy !