【Next.js】Payloadの管理画面でTailwindcssを使えるようにする

Next.js製のCMSであるPayloadでTailwindcssを使えるようにする方法を紹介します

Payloadの公式にもインストール手順は乗っていますがtailwindcssのバージョンが古く、最新バージョンは4系では別の方法が必要だったので書き残します

方法

1. tailwindcssのインストール

以下のコマンドでインストールします

npm install tailwindcss @tailwindcss/postcss postcss

2. postcss.config.mjsの作成と内容の追加

ルートディレクトリにpostcss.config.mjsという名前でファイルを作成して以下の内容を記述します

const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config

3. tailwindcssのimportの記述をする

src/app/(payload)/custom.scssにtailwindcssのimportの記述をします

@layer theme,base,components,utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

これで管理画面でtailwindcssを使う準備は一通り完了です

4. 表示の確認

ここからはtailwindcssが使えていることを確認するためにカスタムUIを作成して表示までします

src/components/sample.tsxというファイルを作成して適当なレイアウトの作成

export default function Sample() {
  return (
    <div className="bg-red-500">
      <h1>tailwindテストです</h1>
    </div>
  )
}

src/collections/Users.tsのfieldに作ったコンポーネントを使用するように設定

import type { CollectionConfig } from 'payload'

export const Users: CollectionConfig = {
  slug: 'users',
  admin: {
    useAsTitle: 'email',
  },
  auth: true,
  fields: [
     // 以下を追加
    {
      name: 'sample',
      type: 'ui',
      admin: {
        components: {
          Field: '@/components/sample',
        },
      },
    },
  ],
}

最後にimportmapを作成するコマンドを実行してnpm run devで画面の確認をします

npx payload generate:importmap 
npm run dev

ユーザ作成画面で文字色の背景が赤くなっているので正しくtailwindcssが使えているようです！

まとめ

基本のレイアウトはそのままでtailwindcssを追加することができました

Payloadの中身はNext.jsなのでshadcnもインストールすることで使うことができます！

お手軽にいい感じのカスタムができて良さそうですね