Shopify CLI の最新版から色々とコマンドが変わったよ
という事で、自分のデザインプロジェクトを進めながら、作ったものを売るオンラインショップを立ち上げてこましたろと思い、Shopifyでショップを開店準備中なのですが、ざっとUdemyでShopify Developmentのコースをやりつつ、ChatGPTにコードを吐き出させながらやってたのですが、開発環境の構築の時にエラーが出まくりである。
なぜかと思ったら、Shopify CLIとTailwind CLIのバージョンアップに伴い、色々とコアのコマンドが変わっており、AIの情報が追いついていない。AIの申す通りにやっていて、半日無駄にしてしまったよ。
で、忘れないようにここにメモ。
まず、ローカルにプロジェクト用（themeをpullする）フォルダを作り、npm init
npm init
その後に、shopify CLIをインストール
npm install -g @shopify/cli@latest
で、Shopifyで開発中のThemeをローカルにPull
shopify theme pull --shop=shopname.myshopify.com
これでThemeデータがローカルにPullされるので、ブラウザでプレビュー
shopify theme dev
開発中の画面がブラウザでプレビューされる
次に、Tailwind CLIをインストール
npm install tailwindcss @tailwindcss/cli
ここからが、ポイントである。 ドキュメントに沿ってTailwindをセットアップしてしまうと、Tailwindのグローバルリセットの設定が適応され、ThemeのBase.cssが上書きされ、元々のレイアウトが崩れる。
assetsディレクトリの下に、tailwind.cssを作り(assets/tailwind.css)、以下のコードを書く。
@import "tailwindcss"; /* Loads only Tailwind utilities */
ルートレベルにconfigファイルを制作
touch tailwind.config.js
で、以下のコードを書く
module.exports = {
content: [
"./layout/**/*.liquid",
"./templates/**/*.liquid",
"./sections/**/*.liquid",
"./snippets/**/*.liquid",
"./assets/**/*.js"
],
theme: {
extend: {},
},
corePlugins: {
preflight: false, // ⚠️ This prevents Tailwind from resetting Shopify styles
},
plugins: [],
};
その後に、以下のコマンドでTailwindをコンプラし、cssファイル（tailwind-built.css）を生成
npx @tailwindcss/cli -i ./assets/tailwind.css -o ./assets/tailwind-built.css --watch
theme.liquidのbase.css読み込み直後に以下の読み込みコードを追加
{{ 'base.css' | asset_url | stylesheet_tag }}
{{ 'tailwind-built.css' | asset_url | stylesheet_tag }} <!-- ✅ Tailwind added here -->
<link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">
でガチャガチャとローカルでの作業が終われば、Shopify CLIのpushコマンドを使って、Shopifyにアップロード
shopify theme push
shopify theme push --unpublished --json
以上で、ShopifyからthemeファイルをローカルにPullして、Tailwindを大元のcssファイルを上書きしない様に設定し、開発環境を整える手順の２０２５年版の備忘録
ShopifyはReactに近づく
数年前にShopifyでのショップ制作を手伝ったことがあるのですが、SHOP2.0からは、かなりReactに寄った思想になっており、以前のほとんどのページをliquidというPHPみたいなフレームワークで組んでいく作り方と比べて、リアクターからすればとても分かりやすい感じに進化しておりました。
HTML/CSS/JavaScriptをパッケージしたSectionはReactのコンポーネントに非常に近く、それをjsonテンプレートで順番を設定して積んでいく感じも非常にReactっぽい。
そもそも、HydrogenというShopifyをバックエンド、Reactをフロントに使う仕様も備わっているので、相性が良いのかも知れないなと、久々に触ってみて感じたよ。