Table of Contents
はじめに
AdonisJSでビューをInertiaにしたときのガイドがtailwindcssやshadcn/uiにもなかったので、手順を残しました。
ちなみにtailwindcssはビューをEdgeJSの場合のガイドはありました。
Install Tailwind CSS with Adonis - Tailwind CSS
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
AdonisJSプロジェクト作成
npm init adonisjs@latest my-project -- --kit=inertia
cd my-project
tailwindcssのセットアップ
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
content: ['./inertia/**/*.{js,ts,jsx,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
}
inertia/css/app.css:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
/* ↓追加 */
@tailwind base;
@tailwind components;
@tailwind utilities;
shadcn/uiのセットアップ
まずはnpx shadcn@latest initコマンドの実行を成功させるため、tsconfig.jsonにpathsオプションを以下のように追加します。
{
"extends": "@adonisjs/tsconfig/tsconfig.app.json",
"compilerOptions": {
"rootDir": "./",
"outDir": "./build",
"paths": {
"@/*": [
"./src/*"
]
}
},
"exclude": [
"./inertia/**/*",
"node_modules",
"build"
]
}
npx shadcn@latest init
質問に答えていくと無事にセットアップが完了します。
次に自動で作成されたsrc/lib/util.tsをinertia/libへ移動します。
あとは最初に変更したtsconfig.jsonのpathsをinertiaディレクトリに向くよう再度変更します。
tsconfig.json:
{
"extends": "@adonisjs/tsconfig/tsconfig.app.json",
"compilerOptions": {
"rootDir": "./",
"outDir": "./build",
"paths": {
"@/*": [
"./inertia/*"
]
}
},
"exclude": [
"./inertia/**/*",
"node_modules",
"build"
]
}
さらに、inertia/tsconfig.jsonの方も変更します。
inertia/tsconfig.json:
{
"extends": "@adonisjs/tsconfig/tsconfig.client.json",
"compilerOptions": {
"baseUrl": ".",
"module": "ESNext",
"jsx": "react-jsx",
"paths": {
"@/*": [
"./*"
]
},
},
"include": [
"./**/*.ts",
"./**/*.tsx"
],
}
最後にvite.config.tsを変更してセットアップ完了です。
vite.config.ts:
export default defineConfig({
// ....
resolve: {
alias: {
'@/': `${getDirname(import.meta.url)}/inertia/`,
},
},
})
Buttonコンポーネントを追加する
試しにButtonコンポーネントを追加してみます。
npx shadcn@latest add button
するとinertia/components/ui/button.tsxが作られるはずです。
これを表示してみます。
inertia/pages/home.tsx:
import { Button } from '@/components/ui/button'
import { Head } from '@inertiajs/react'
export default function Home(props: { version: number }) {
return (
<>
<Head title="Homepage" />
<div className="container">
<div className="title">AdonisJS {props.version} x Inertia x React</div>
<Button onClick={() => console.log('Click!')}>Click</Button>
</div>
</>
)
}
これでnpm run devで起動して無事にボタンが表示されればOKです。