ホームページ >ウェブフロントエンド >CSSチュートリアル >スタンドアロン CLI をセットアップする方法: Shopify で Node.js を使用せずに Tailwind CSS を使用します。
Tailwind をスタンドアロン CLI ツールとして使用しています。詳細については、公式ガイドを参照してください。
注: Intel プロセッサを搭載した Mac でこれを設定している場合は、以下のコマンドで macos-arm64 を macos-x64 に置き換えてください。
ARM64 アーキテクチャを備えた macOS 用の最新の TailwindCSS バイナリをダウンロードします:
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
ダウンロードしたファイルを実行可能にします:
chmod +x tailwindcss-macos-arm64
実行可能ファイルをより便利な名前に移動します:
mv tailwindcss-macos-arm64 tailwindcss
TailwindCSS ウォッチャーを実行します:
このコマンドは、TailwindCSS ソース ファイル (./assets/tailwind.css) 内の変更を監視し、出力を目的の CSS ファイル (./assets/style.css) にコンパイルします。
./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch
実稼働用に CSS をコンパイルする準備ができたら、次のコマンドを使用して CSS を縮小する必要があります。
./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify
このコマンドは、入力 CSS ファイル (./assets/tailwind.css) を取得し、TailwindCSS で処理して、実稼働用に最適化された縮小 CSS ファイル (./assets/style.css) を出力します。
これらの手順に従って、TailwindCSS をスタンドアロン CLI ツールとして正常にセットアップし、プロジェクトに統合しました。この設定により、Tailwind のユーティリティ優先のアプローチを使用して CSS を効率的に開発および管理できます。ウォッチャーを実行すると、開発中に CSS が自動的にコンパイルされ、縮小ステップによって CSS が運用環境に向けて準備され、パフォーマンスが最適化されます。この合理化されたプロセスにより、クリーンで保守しやすいコードベースが維持され、Shopify テーマの構築とカスタマイズに簡単に集中できるようになります。
以上がスタンドアロン CLI をセットアップする方法: Shopify で Node.js を使用せずに Tailwind CSS を使用します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。