💭

RemixでTailwindを使う時のpackage.jsonの書き方

2021/12/10に公開約3,500字

公式のドキュメントの方法が分かりづらいので、俺なりに説明を書きます。

元の説明

https://remix.run/docs/en/v1/guides/styling#tailwind

1. concurrencyとtailwindcssのインストール

npm add -D concurrently tailwindcss

2. コンフィグを追加

tailwind.config.js
module.exports = {
  mode: "jit",
  purge: ["./app/**/*.{ts,tsx}"],
  darkMode: "media",
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};

ここはドキュメント通りです。

3. CSSの場所を決める

ここがドキュメントと違います。

ドキュメントではapp/tailwind.cssを生成してるんですが、場所が納得できないので変えます。

echo '@tailwind base;
@tailwind components;
@tailwind utilities;' > app/styles/tailwind.css

# .gitignoreに追記
echo '/app/styles/generated.css' >> .gitignore
app/styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

app/styles/tailwind.cssに書きました。

4. 生成スクリプトを書く(最重要)

Nodeホスティング(Vercel等)の場合

postinstallがremix setup nodeになっていたらこちらを使ってください。

package.json
{
  "scripts": {
    "postinstall": "remix setup node",
    "build:css": "tailwindcss -i ./app/styles/tailwind.css -o ./app/styles/generated.css",
    "build:remix": "remix build",
    "build": "npm run build:css && npm run build:remix",
    "dev:remix": "remix dev",
    "dev:css": "tailwindcss -i ./app/styles/tailwind.css -o ./app/styles/generated.css --watch",
    "dev": "NODE_ENV=development concurrently \"npm:dev:*\""
  },
}

Cloudflare Workersの場合

postinstallがremix setup cloudflare-workersになっていたらこちらを使ってください。

package.json
{
  "scripts": {
    "postinstall": "remix setup cloudflare-workers",
    "build:css": "tailwindcss -i ./app/styles/tailwind.css -o ./app/styles/generated.css",
    "build:remix": "remix build",
    "build": "npm run build:css && npm run build:remix",
    "build:worker": "esbuild --define:process.env.NODE_ENV='\"production\"' --minify --bundle --sourcemap --outdir=dist ./worker",
    "dev:remix": "remix dev",
    "dev:css": "tailwindcss -i ./app/styles/tailwind.css -o ./app/styles/generated.css --watch",
    "dev:worker": "esbuild --define:process.env.NODE_ENV='\"development\"' --bundle --sourcemap --outdir=dist ./worker",
    "dev": "NODE_ENV=development concurrently \"npm:dev:*\"",
    "start": "miniflare --watch",
    "deploy": "npm run build && wrangler publish"
  },
}

https://github.com/jacob-ebey/remix-cloudflare-demo/blob/main/package.json

こちらの構成を参考にしました。worker用のコマンドが増えるため、npm:dev:*で一括に並行で動かしています。

ドキュメントと違い、/app/styles/generated.cssにCSSが生成されます。

5. root.tsxに追記

app/root.tsx
- import deleteMeRemixStyles from "~/styles/demos/remix.css";
- import globalStylesUrl from "~/styles/global.css";
- import darkStylesUrl from "~/styles/dark.css";
+ import styles from '~/styles/generated.css';

export let links: LinksFunction = () => {
-  return [
-    { rel: "stylesheet", href: globalStylesUrl },
-    {
-      rel: "stylesheet",
-      href: darkStylesUrl,
-      media: "(prefers-color-scheme: dark)"
-    },
-    { rel: "stylesheet", href: deleteMeRemixStyles }
-  ];
+  return [{ rel: 'stylesheet', href: styles }];
};

スターターexampleを使っている前提にしています。

6. 動かす

npm run dev

# Cloudflare Workersの場合、新規ターミナルで
npm run start

いずれの場合でもdevでローカルで動かせます。Cloudflare Workersの場合はnpm run startも並行で動かしてください。


余談ですが、今の所、Remixのググラビリティ(検索しやすさ)が非常に悪いですね。「Remix IDE」ってのもあるから余計に。「remix-run」で検索すれば確実。

Discussion

ログインするとコメントできます