Apprendre Symfony 6 : Installer Tailwind CSS

Qu’est-ce que Tailwind CSS ?

Tailwind CSS est un framework CSS utilitaire qui permet de construire des interfaces utilisateur rapidement en utilisant des classes CSS prédéfinies.

Au lieu d’associer des styles complexes aux éléments HTML, comme c’est le cas dans les frameworks classiques comme Bootstrap, où les classes regroupent plusieurs propriétés CSS (par exemple .btn qui gère la couleur, le padding, la bordure…), Tailwind CSS favorise une approche consistant à appliquer directement des classes utilitaires individuelles (comme bg-blue-500, p-4, border) aux éléments HTML.

Cela permet un développement frontend plus rapide et beaucoup plus flexible, car chaque classe gère la plupart du temps une seule propriété CSS.

Installer Tailwind CSS pour Symfony

Avec AssetMapper

1. Télécharger le bundle Tailwind

Pour commencer, installez le bundle Tailwind pour Symfony en exécutant la commande suivante :

composer require symfonycasts/tailwind-bundle

2. Initialiser Tailwind

Une fois le bundle installé, vous pouvez initialiser Tailwind dans votre projet en exécutant cette commande :

symfony console tailwind:init

Cette commande va télécharger la CLI de Tailwind, initialiser le fichier de configuration et inclure les directives principales Tailwind.

1. CLI autonome

Tailwind CSS est initialement un paquet JavaScript distribué via npm, nécessitant donc l’installation de Node.js pour fonctionner.

Cependant, cette approche n’est pas adaptée aux stacks de développement qui n’utilisent pas l’écosystème Node, comme c’est le cas avec le composant AssetMapper de Symfony, ou encore avec des frameworks comme Ruby on Rails ou Phoenix.

La solution logique était donc de créer un CLI autonome qui permet d’utiliser Tailwind sans avoir besoin de Node.js ni npm, simplifiant ainsi son intégration dans ces environnements.

Cette CLI est visible dans le dossier 📂 var/tailwind/<votre-version-de-tailwind>.

2. Fichier de configuration

Le fichier 📄 tailwind.config.js est automatiquement généré, permettant de configurer classiquement le framework Tailwind.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./assets/**/*.js",
    "./templates/**/*.html.twig",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Intégration des directives

Le fichier 📄 assets/styles/app.css est mis à jour, en incluant désormais les directives de Tailwind associées.

@tailwind base;
@tailwind components;
@tailwind utilities;

• @tailwind base : styles de base (resets et typographie)
• @tailwind components : styles pour les composants réutilisables
• @tailwind utilities : classes utilitaires

3. Linker le style

Le style Tailwind peut être lié automatiquement si vous utilisez AssetMapper, grâce à la fonction importmap() :

{% block javascripts %}
	{% block importmap %}{{ importmap('app') }}{% endblock %}
{% endblock %}

Sinon, vous pouvez simplement insérer manuellement la feuille de style dans le bloc stylesheets de vos templates Twig avec la fonction asset() :

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}

4. Builder le style

Comme indiqué dans le fichier 📄 tailwind.config.js, Tailwind est configuré pour observer vos fichiers :

• CSS situés dans 📂 assets
• HTML situés dans 📂 templates

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./assets/**/*.js",
    "./templates/**/*.html.twig",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Pour générer les styles associés aux classes Tailwind utilisées, il suffit d’exécuter la commande suivante :

symfony console tailwind:build

Le fichier de sortie généré par cette commande est situé dans 📄 var/tailwind/app.built.css.

Il est également possible de demander à Tailwind de reconstruire automatiquement le fichier CSS à chaque modification apportée aux fichiers. On exécutera alors la même commande en y ajoutant l’option --watch.

symfony console tailwind:build --watch

Cela permet ainsi de prendre en compte les changements lors du développement, sans relancer constamment le build.

Avec Webpack

Bien qu’utiliser AssetMapper soit aujourd’hui l’approche privilégiée par la communauté de Symfony, il est néanmoins possible d’installer Tailwind CSS via le bundler Webpack.