DaisyUI dans Symfony 7 avec Webpack

Comment utiliser DaisyUI dans Symfony 7 avec Webpack?

Pour commencer, j’ai passer un peu de temps à comprendre le pourquoi du comment les tutos ne fonctionnaient pas et j’ai presque abandonné.
Tout ce que l’on trouve concerne généralement la version 3 de Tailwind, et c’est là que les problèmes débutent.
Je n’ai peut-être pas la bonne approche, mais au final ça fonctionne très bien.
Je voulais, pour un projet, utiliser DaisyUI avec webpack-Encore sous symfony 7.3.
Voici mon histoire ( tou doum ! )

Pour débuter on va suivre la doc toujours parfaite et à jour de Symfony.

Pré-requis installé en local:

• PHP
• Composer
• Node

En mode console dans ton VSCode tu fais toutes les étapes suivante, j’ai inclus la création du projet, prends ce dont tu as besoin :

https://symfony.com/doc/current/frontend.html#webpack-encore

symfony new --webapp daisy

cd daisy

composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle
composer require symfony/webpack-encore-bundle symfony/ux-turbo 
composer require symfony/stimulus-bundle

npm install
npm run dev

Ca devrait te donner un "DONE Compiled successfully in xxxxms"

A partir de ce moment, webpack est déjà en place.

Maintenant on va installer le home Controller pour tester si ça fonctionne bien plus tard et Tailwind CSS, en suivant toujours la doc sur Symfony.

https://symfony.com/bundles/TailwindBundle/current/index.html

php bin/console make:controller homeControler

npm install tailwindcss @tailwindcss/cli @tailwindcss/postcss postcss postcss-loader

composer require symfonycasts/tailwind-bundle
php bin/console tailwind:init

# attention PHP doit pouvoir telecharger 128Mo au minimum
# on peut telecharger le tailwindcss-windows-x64.exe ou similiare selon l'os
# et le placer dans /var/tailwind/v4.1.11  => peux évoluer en fonction de la version
php bin/console tailwind:build

<h1 class="text-3xl font-bold underline">Test de TailWind! Gras et souligné </h1>

<button class="btn btn-soft btn-secondary">Bouton style DaisyUI</button>

Toujours selon la doc, mais de Tailwind CSS, on doit ajouter ce fichier

https://tailwindcss.com/docs/installation/framework-guides/symfony  (#5)

export default {  
    plugins: {    
        "@tailwindcss/postcss": {},      
    },
};

@import "tailwindcss";
@plugin "daisyui";

php bin/console tailwind:build

npm run dev

Voila le résultat attendu:

C’était presque simple non ?