Utiliser Tailwindcss 4 avec Cecil.app

Comme ça n'a pas été si évident pour moi, TailwindCss 4 venant juste de sortir, voici comment le faire fonctionner avec Cecil.app, le générateur de site statique utilisé pour créer ce site.

D'abord installons Tailwindcss et tailwindcss/cli dans le répertoire racine de Cecil :

#myCecipApp > npm install tailwindcss @tailwindcss/cli

PostCss, or purgeCss or anything else is no longer needed for tailwindCss or nesting Css. PostCss, purgeCss ou autres ne sont plus nécessaires au bon fonctionnement de TailwindCss dans sa version 4, on s'en passe donc ici. Le fichier de configuration de tailwind (tailwind.config.js) a également disparu.

La suite se passe donc directement dans notre fichier css. Dans mon caas :

'#myCecipApp > vim themes/myBeautifulTheme/assets/css/styles.css'

Ce à quoi il ressemble :

@import "tailwindcss" source(none);

@source "../../layouts/**/*.html.twig";

@import "./scss/_fonts.css";
@import "./scss/_typo.css";
@import "./scss/_gallery.css";
@import "./scss/_pagination.css";

Regardons les lignes une par une : La première : '@import "tailwindcss" source(none);' Ici on inclut TailwindCss comme on le ferait pour tout autre fichier css (c'est une des nouveautés de la V4). J'y ajoute une petite modification personnelle : "source (none)". En effet par défaut, Tailwind scanne votre application entière à la recherche des classes CSS utilisées afin de purger celles inutiles. C'est assez long, 2 secondes dans mon cas, je préfère donc lui dire de ne rien scanner ici.

Deuxième ligne : @source "../../layouts/*/.html.twig"; Comme on a précédemment dit à Tailwind de ne rien scanner par défaut, ici je lui précise que dossier scanner exactement. Ainsi il ne scanne que le dossier layouts de mon thème et seulement les fichiers *.html.twig, on évite ainsi qu'il scanne les fichiers rss, json ou autres... Le scan ne prend plus alors que 20ms !

Les dernières lignes du fichier sont simplement mes propres fichiers css.

Ceci-fait, vous devez dire à TailWind de surveiller les modifications de vos fichiers css afin de les compiler à la volée et de rafraichir le rendu de votre site dans votre navigateur. Retour au terminal et dossier racine de Cecil :

#myCecipApp >  npx @tailwindcss/cli -i ./themes/myBeautifulTheme/assets/css/style.css -o ./assets/style.css --watch 

Vous pouvez supprimer l'option "--watch" pour une compilation ponctuelle.

Pour voir vos modifications en live dans votre navigateur, dans votre terminal entrez :

#myCecipApp >  cecil serve --clear-cache=css

Ainsi le cache css est effacé à chaque modification détectée.

Exécutez ces 2 dernières commandes en simultané dans 2 fenêtres distinctes de votre terminal et voilà, vous pouvez y aller, il ne reste qu'à coder.