Dépendances

• Shopify CLI : un outil d'interface de ligne de commande qui vous aide à développer et à gérer vos thèmes Shopify.
• TailwindCSS : un framework CSS axé sur les utilitaires pour créer rapidement des conceptions personnalisées.

Installation

Nous utilisons Tailwind comme outil CLI autonome. Pour plus d'informations, vous pouvez vous référer au guide officiel.

Remarque : Si vous configurez ceci sur un Mac équipé d'un processeur Intel, remplacez macos-arm64 par macos-x64 dans les commandes ci-dessous.

1. Téléchargez le dernier binaire TailwindCSS pour macOS avec l'architecture ARM64 :

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. Rendre le fichier téléchargé exécutable :

   chmod x tailwindcss-macos-arm64

3. Déplacez l'exécutable vers un nom plus pratique :

   mv tailwindcss-macos-arm64 tailwindcss

4. Exécutez l'observateur TailwindCSS :

   • Cette commande surveillera les modifications dans votre fichier source TailwindCSS (./assets/tailwind.css) et compilera la sortie dans le fichier CSS souhaité (./assets/style.css) :

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

Publier

Lorsque vous êtes prêt à compiler votre CSS pour la production, vous devez utiliser la commande suivante pour réduire votre CSS :

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

Cette commande prendra votre fichier CSS d'entrée (./assets/tailwind.css), le traitera avec TailwindCSS et générera un fichier CSS minifié (./assets/style.css) optimisé pour la production.

Conclusion

En suivant ces étapes, vous avez configuré avec succès TailwindCSS en tant qu'outil CLI autonome et l'avez intégré à votre projet. Cette configuration vous permet de développer et de gérer efficacement votre CSS en utilisant l'approche utilitaire de Tailwind. L'exécution de l'observateur garantit que votre CSS est automatiquement compilé pendant le développement, tandis que l'étape de minification prépare votre CSS pour la production, en l'optimisant pour les performances. Ce processus rationalisé permet de maintenir une base de code propre et maintenable, vous permettant de vous concentrer facilement sur la création et la personnalisation de votre thème Shopify.