🔥

HonoXでTailwind

に公開
Tailwind CSS
Hono
HonoX
tech

HonoXというフレームワークでTailwindCSSを使う方法です。

デフォルトでは、hono/cssというものを使っていますが、Tailwindの人もいるだろうということです。

結論

依存関係インストール

bun add -D tailwindcss postcss autoprefixer -p

Tailwindを初期化

bunx tailwindcss init -p

そして、tailwind.config.jsを以下のようにします:

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

app/tailwind.cssを作成して、以下のようにします

app/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

このファイルを./app/client.tsでimportします

tailwind.config.js
  import { createClient } from 'honox/client'
+ import './tailwind.css'

  createClient()

これれ完成です！

仕組み

bun add -D tailwindcss postcss autoprefixer -p
bunx tailwindcss init -p

この2つで、TailwindCSSをインストールして、設定ファイルを追加します。
このままだとTailwindのクラス名が認識されないので、content: ['./app/**/*.tsx']と書き、appディレクトリ内の.tsxファイルを読み込ませるようにします。

それでも、スタイルは反映されないので、PostCSSを使ったTailwindのスタイルファイル./app/tailwind.cssを作ります。

しかしそれでも反映はされません、スタイルを読み込ませるようにする必要があります。
HonoXの全てのHTMLに反映される(であろう)JavaScriptエントリーポイント./app/client.tsにimport処理を入れたら完成です。

GitHubで編集を提案

Discussion