💭
RemixでTailwindを使う時のpackage.jsonの書き方
公式のドキュメントの方法が分かりづらいので、俺なりに説明を書きます。
元の説明
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"
},
}
こちらの構成を参考にしました。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