インストール

パッケージを追加して、スタイルを読み込みます。Tailwind CSS v4 を使うプロジェクトで動きます。

Tailwind が必要です

スタイルは Tailwind CSS v4 の @theme を前提にしています。先に Tailwind を入れてください。

導入の手順

パッケージを追加する
お使いのパッケージマネージャで追加します。
pnpm add @kazuemon/ui pnpm add -D tailwindcss @tailwindcss/postcss
スタイルを読み込む
アプリの CSS の入口で、Tailwind のあとに読み込みます。Next.js なら、ふつうは次の場所です。
my-app
- app
  layout.tsxglobals.css を読み込む
  globals.cssここに書き足す
  page.tsx
- package.json
- postcss.config.mjs
postcss.config.mjs
export default { plugins: { '@tailwindcss/postcss': {} }, };
app/globals.css
@import 'tailwindcss'; @import '@kazuemon/ui/tailwind.css';

部品は名前つきで読み込みます。ボタンを置く例です。

import { Button } from '@kazuemon/ui';

export function Save(props: Props) {
  return <Button color="primary">保存</Button>;
}

最終更新: 2026/09/20