🔥
HonoXでTailwind
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処理を入れたら完成です。
Discussion