Comment utiliser Tailwind CSS via son exécutable, sans Node.js ?

Télécharger la dernière version de Tailwind CSS depuis le repository officiel GitHub

Rendez-vous sur https://github.com/tailwindlabs/tailwindcss/releases puis téléchargez la version adaptée à votre système : Linux (serveurs), Windows (local) ou Mac (local).

Créez votre environnement de travail

1. Créez un dossier "projet" en y incluant ce fichier .exe ou pour Linux
2. Créez un dossier "assets/css"
3. Dans le dossier assets/css, créez input.css et output.css
4. Dans la racine de votre projet, vous devez avoir un index.html (Twig, PHP ou autre)
5. Dans la racine du projet, vous devez avoir tailwind.config.js

Voici votre projet sous Windows par exemple.

projet/
├── assets/
│   └── css/
│       ├── input.css
│       └── output.css
├── index.html

├── tailwindcss.exe
├── tailwind.config.js

Contenu de votre fichier tailwind.config.js

 

 

Contenu de votre fichier input.css

Lancement de la commande executable de TailwindCSS en TERMINAL

 ./tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch    

Dans le cas d'un projet CodeIgniter, il est tout à fait possible de créer une commande Spark, une commande CLI pour exécuter la même fonction une seule fois pour la génération du fichier CSS final.

Résultats: 

+ votre fichier css

AVANT

APRES

Conclusion

Si vous avez bien suivi les étapes ci-dessus, à chaque modification dans vos fichiers HTML, PHP ou autres, l'exécutable se lancera pour créer automatiquement les classes CSS nécessaires à Tailwind CSS.

Vous pouvez donc également exécuter ce processus sur un site web de type CodeIgniter, WordPress ou autre, sans dépendre d'une couche complexe de JS. Vous n'êtes également pas obligé de dépendre de Node.js.

Par exemple, il est tout à fait possible, lors de la sauvegarde d'une page PHP, que l'exécutable génère automatiquement le nouveau CSS d'export.