HonoXでtailwindcssを使う

ピン留めされたアイテム

 2025/03/04 追記現在create-honoで作成されるhonoxのテンプレートにはTailwindCSSが使用されているため、このスクラップに書かれている手順やテンプレートを参考にする必要はありません。

 できたものhttps://github.com/ryuapp/honox-tailwind-template

HonoXの新機能やエコシステムに合わせて更新しています

ryu

プロジェクトを新規作成(x-basic)

npm create hono@latest

ryu

tailwindcssをインストール

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

設定する

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./app/**/*.tsx'],
  theme: {
    extend: {},
  },
  plugins: [],
}

ryu

cssを設定する

app/style.css

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

_renderer.tsx内のheadタグにlinkタグを追加

app/routes/_renderer.tsx

      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
+        {import.meta.env.PROD ? (
+          <link href='static/assets/style.css' rel='stylesheet' />
+        ) : (
+          <link href='/app/style.css' rel='stylesheet' />
+        )}
        <Script src="/app/client.ts" />
        <Style />
      </head>

ryu

viteの設定でビルド後にcssファイルが含まれるようにする

vite.config.ts

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
+      build: {
+        rollupOptions: {
+          input: ['/app/style.css'],
+          output: {
+            assetFileNames: 'static/assets/[name].[ext]'
+          }
+        }
+      },
      plugins: [client()]
    }
  } else {

ryu

2024/03/31追記
Typeエラーが出るので@ts-ignoreを追加
ignoreしたくなければ、上記の公式の手順通りでよさそう

GitHubのIssueでもっとシンプルな構成があったので、そっちを採用する
cssファイルのパスを参照することで、rollupの設定を不要にできる

app/routes/_renderer.tsx

  import { Style } from 'hono/css'
  import { jsxRenderer } from 'hono/jsx-renderer'
  import { Script } from 'honox/server'
+ // @ts-ignore
+ import styles from "../style.css?url"

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>
-       {import.meta.env.PROD ? (
-         <link href='static/assets/style.css' rel='stylesheet' />
-       ) : (
-         <link href='/app/style.css' rel='stylesheet' />
-       )}
+       <link href={styles} rel="stylesheet" />
        <Script src="/app/client.ts" />
        <Style />
      </head>
      <body>{children}</body>
    </html>
  )
})

vite.config.ts

import pages from '@hono/vite-cloudflare-pages'
import honox from 'honox/vite'
import client from 'honox/vite/client'
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      plugins: [client()],
    }
  }

  return {
    plugins: [honox(), pages()],
    build: {
      assetsDir: 'static',
      ssrEmitAssets: true,
    },
  }
})

ryu

v0.1.19でLinkタグコンポーネントが追加された
これを使うことによって、dev環境とprod環境でタグを切り替えを行わずにlinkタグを使えるようになり、_renderer.tsxを簡素化することが出来るようになった

app/routes/_renderer.tsx

     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>{title}</title>
-        {import.meta.env.PROD ? (
-          <link href='static/assets/style.css' rel='stylesheet' />
-        ) : (
-          <link href='/app/style.css' rel='stylesheet' />
-        )}
+      <Link href="/app/style.css" rel="stylesheet" />
       <Script src="/app/client.ts" />
       <Style />
     </head>

vite.config.ts

import pages from '@hono/vite-cloudflare-pages'
import honox from 'honox/vite'
import client from 'honox/vite/client'
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      plugins: [client()],
      build: {
        rollupOptions: {
          input: ["/app/style.css"]
        },
      },
    }
  }

  return {
    plugins: [honox(), pages()]
  }
})

GitHubのテンプレートもこの方式に戻す

参考

ryu

テンプレートリポジトリのTailwindCSSのバージョンを4にアップデート。Viteのプラグインを使用したかったが、ビルド時にCSSが反映されなかったためAutoprefixerを現状も使用。

ryu

@sourceでappディレクトリを指定したところ、@tailwindcss/viteでも動作することが確認できた

ryu

@hono/vite-buildを使っていない古いコンフィグだったので最新のコンフィグに更新した。かなりシンプルになって良い。

import build from '@hono/vite-build/cloudflare-pages'
import honox from 'honox/vite'
import tailwindcss from '@tailwindcss/vite'
import adapter from '@hono/vite-dev-server/cloudflare'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    honox({
      client: {
        input: ['/app/style.css'],
      },
      devServer: { adapter },
    }),
    build(),
    tailwindcss(),
  ],
});