HonoX で TailwindCSS を使おう

HonoX 0.1.19 で外部でビルドされる（ここでは HonoX によって直接ビルドされるのではなく、 Vite や PostCSS を指す）、CSS の差し込みに対応したので、 TailwindCSS のような PostCSS でビルドされてスタイルが決定されるようなスタイリング手法も使えるようになりました。

ということで、早速やってみましょう。まずはスターターセットから起動します。

$ npm create hono@latest  # x-basic を選ぶ
$ cd honox-tailwindcss

作成したら、 TailwindCSS の設定を入れます。

$ pnpm add tailwindcss postcss autoprefixer --save-dev
$ npx tailwindcss init

ここまではいつもと同じですね。次に Vite の設定を少し変更します。

import pages from "@hono/vite-cloudflare-pages";
import adapter from "@hono/vite-dev-server/cloudflare";
import honox from "honox/vite";
import client from "honox/vite/client";
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  if (mode === "client") {
    return {
      build: {
        rollupOptions: {
          input: ["/app/globals.css"], // ★ここを追加
        },
      },
      plugins: [client()],
    };
  } else {
    return {
      plugins: [
        honox({
          devServer: {
            adapter,
          },
        }),
        pages(),
      ],
    };
  }
});

Rollup 側のビルド設定に TailwindCSS のエントリーポイントを渡してあげます。今回の場合、 app/globals.css の中身は以下の通りです：

@tailwind base;
@tailwind components;
@tailwind utilities;

最後にレンダラー、多くは routes/_renderer.tsx だと思いますが、 Script 同様にタグを追加してあげましょう。

import { Style } from "hono/css";
import { jsxRenderer } from "hono/jsx-renderer";
import { Link, Script } from "honox/server";

export default jsxRenderer(({ children, title }) => {
  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
        <Script src="/app/client.ts" async />
        <Link href="/app/globals.css" rel="stylesheet" /> {/* ★ここを追加 */}
        <Style />
      </head>
      <body>{children}</body>
    </html>
  );
});