Shopifyアプリ(Remix)にTailwindCSSを導入する

はじめに

Shopifyのアプリだと管理画面はPolarisを用いて見た目を編集することが推奨されています。
PolarisとはShopifyが提供しているUIフレームワークです。

Polarisは、Shopify管理画面、チェックアウト、顧客アカウントなど、Shopifyのあらゆるサーフェスとの統合を容易にする単一のUIフレームワークです。Webプラットフォーム標準とWebコンポーネントを基盤とし、一貫性と使いやすさを兼ね備えたAPIとpropsを備えたPolarisなら、あらゆるフレームワークで動作する、高パフォーマンスでHTMLライクなコードを作成できます。

公式のドキュメントに書かれているようにストアの管理画面や操作感そのままにテーマを実装することができるので一貫性を持たせることができるものになっています。

この思想自体は素晴らしいと思うのですが、Polarisでトグルボタンを実装しようとした時に用意されているトグルボタンのUIがどうしても直感的に理解しにくく、好みではなかったのでTailwindCSSでトグルボタンを導入しようと決意しました。

バージョンについて

Shopify CLI: @shopify/cli/3.80.7 darwin-arm64 node-v22.11.0
TailwindCSS: 4.1.12

事前準備

Shopify CLIのインストール

本記事ではShopifyのアプリをShopify CLIというアプリ開発などをローカルで行うために使用するCLIを使用します。
こちらは別途インストールする必要があるので、以下をご参照ください。

Shopifyパートナーアカウントの作成

なおShopify CLIでアプリを作成しますが、事前にShopifyパートナーアカウントを作成しておく必要があります。ShopifyパートナーはShopifyと連携している個人や企業のことでShopifyパートナーになっていないとアプリ開発やテーマ開発ストア開発の代行などができません。
パートナーアカウントの作成方法については以下をご参照ください。

早速やってみる

Shopifyアプリ作成

基本的には公式の手順に沿って進めればアプリを作成することができます。

Tailwindの導入

インストールが完了したらapp/routesのapp._index.tsxに雛形のテンプレートが作成されていると思いますが、以下のように修正します。

import { Page, Layout, BlockStack } from "@shopify/polaris";

export default function Index() {
  return (
    <Page>
      <BlockStack gap="500">
        <Layout>
          <Layout.Section>
            <p className="text-red-400">TailwindCSS導入</p>
          </Layout.Section>
        </Layout>
      </BlockStack>
    </Page>
  );
}

まだTailwindCSSがインストールできていないので黒文字のTailwindCSS導入が表示されていると思います。

TailwindCSSで必要なパッケージのインストール

npm install -D tailwindcss @tailwindcss/postcss postcss

以上のコマンドを実行してTailwindCSSとPostCSSをインストールします。

PostCSSはCSSを変換するためのツールであり、TailwindCSSはPostCSSのプラグインとして提供されているのでPostCSSが入っていないとTailwindは動かないです。
ただTailwindCSSのv4系からはPostCSSのプラグインとしてではなくViteを使って動かすこともできるようになったみたいです。

とりあえず今回はPostCSSを入れて動かしていきます。

postcss.config.tsの作成

プロジェクトのルートディレクトリにpostcss.config.tsを作成し、以下のようにファイルを修正します。

export default {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};

postcss.config.tsはCSSの変換を行うためにプラグインの指定や変換の実行順序を指定します。
"@tailwindcss/postcssとautoprefixerが指定されています。
どうやらv4系からtailwindを直接指定するのではなく、tailwindcss/postcssを指定してあげないといけないようです。

autoprefixerはベンダープリフィックス、つまり古いブラウザでもCSSが正常に動くよう互換性のあるプリフィックスをつけるためのものです。

autoprefixerを有効にする場合は別でautoprefixerをインストールする必要があります。以下のコマンドを実行していただければと思います。

npm i -D autoprefixer

tailwind.cssを追加

app/配下にtailwind.cssを追加します。

@import "tailwindcss";

tailwindcssをインポートして、TailwindのCSSを出力します。

root.tsxを修正

app/配下にあるroot.tsxに以下の記述を追加します。

// 省略
import type { LinksFunction } from "@remix-run/node";
import tailwind from "./tailwind.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: tailwind },
];

import tailwind from "./tailwind.css?url";は先ほど作成したtailwind.cssを読み込んでいます。

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: tailwind },
];

linksはRemixのルートモジュールに定義することでRemixが

タグの中にタグを追加します。つまり先ほど作成したtailwind.cssを参照するようになります。

確認！！

shopify app devしなおすとちゃんとTailwindがきくようになりました〜！