Cara menyediakan CLI kendiri: gunakan Tailwind CSS tanpa Node.js dalam Shopify.

Kebergantungan

• Shopify CLI: Alat antara muka baris perintah yang membantu anda membangun dan mengurus tema Shopify anda.
• TailwindCSS: Rangka kerja CSS yang mengutamakan utiliti untuk membina reka bentuk tersuai dengan pantas.

Persediaan

Kami menggunakan Tailwind sebagai alat CLI kendiri. Untuk maklumat lanjut, boleh rujuk panduan rasmi.

Nota: Jika anda menyediakan ini pada Mac dengan pemproses Intel, gantikan macos-arm64 dengan macos-x64 dalam arahan di bawah.

1. Muat turun binari TailwindCSS terkini untuk macOS dengan seni bina ARM64:

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

2. Jadikan fail yang dimuat turun boleh dilaksanakan:

   chmod +x tailwindcss-macos-arm64

3. Alihkan boleh laku kepada nama yang lebih mudah:

   mv tailwindcss-macos-arm64 tailwindcss

4. Jalankan pemerhati TailwindCSS:

   • Arahan ini akan melihat perubahan dalam fail sumber TailwindCSS anda (./assets/tailwind.css) dan menyusun output ke fail CSS yang anda inginkan (./assets/style.css):

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

Terbitkan

Apabila anda bersedia untuk menyusun CSS anda untuk pengeluaran, anda harus menggunakan arahan berikut untuk mengecilkan CSS anda:

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

Arahan ini akan mengambil fail CSS input anda (./assets/tailwind.css), memprosesnya dengan TailwindCSS dan mengeluarkan fail CSS kecil (./assets/style.css) yang dioptimumkan untuk pengeluaran.

---

Kesimpulan

Mengikut langkah ini, anda telah berjaya menyediakan TailwindCSS sebagai alat CLI kendiri dan menyepadukannya ke dalam projek anda. Persediaan ini membolehkan anda membangunkan dan mengurus CSS anda dengan cekap menggunakan pendekatan mengutamakan utiliti Tailwind. Menjalankan pemerhati memastikan bahawa CSS anda disusun secara automatik semasa pembangunan, manakala langkah minifikasi menyediakan CSS anda untuk pengeluaran, mengoptimumkannya untuk prestasi. Proses diperkemas ini membantu mengekalkan pangkalan kod yang bersih dan boleh diselenggara, membolehkan anda menumpukan pada membina dan menyesuaikan tema Shopify anda dengan mudah.

Atas ialah kandungan terperinci Cara menyediakan CLI kendiri: gunakan Tailwind CSS tanpa Node.js dalam Shopify.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!