Catégorie : Symfony

_________________________

Comment installer TailwindCss sur un projet Symfony 🎺

La team SymfonyCasts est là pour nous !

Initialisation d'un projet Sympfony avec le package complet, dans notre terminal :

symfony new Nom_Projet --webapp

On va dans le projet

cd Nom_Projet

On peut lancer le serveur (avec -d pour rester en arrière plan et garde la console disponible)

symfony serve -d

On se créer une page / controller "Home" par exemple

symfony console make:controller Home

On peut aller sur la page 127.0.0.1:8000/home (si c'est bien l'adresse de votre serveur)

On se lance pour l'installation de Tailwind !

Toujours dans notre terminal :

composer require symfonycasts/tailwind-bundle

puis

symfony console tailwind:init

on va lier le css au template de base.html.twig

et on n'oublie pas le viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('assets/styles/app.css')}}">

On lance l'observateur qui scrute les modifications css :

symfony console tailwind:build --watch

 

Le fichier tailwind.cinfig.js est créé ET rempli !

 

Si tu te fais un fichier app.scss, pense à coller 

@tailwind base;

@tailwind components;

@tailwind utilities;

Dans le app.scss, sinon scss écrasera le css et duquel ça disparaitra.

Donc Tailwind ne fonctinnera plus ! 😭

 

C'est tout bon !
Le framework CSS est à votre disposition.
Le fichier final sera construit lors du build de votre projet Symfony.