Vite+shadcn/uiをTailwind CSS V4.0で使う

記事の概要

shadcn/uiのViteでのインストールドキュメントでは、従来のTailwind v3を使用した説明となっており、そこに従ってセットアップを行う場合Tailwindのバージョンダウンが必要となる。
そのため、ViteでTailwind v4を使用したshadcn/uiのセットアップをまとめている。
また、pnpm dlx shadcn@canary initで、✖ Validating Tailwind CSS config. Found v4.となる場合の対策も記述している。

環境

• windows11
• node v22.11.0
• nnpm 10.4.1
• vite 6.1.1
• tailwindcss,tailwindcss/vite 4.0.7
• shadcn 2.4.0

Viteでshadcnを使用できるようにする

基本的なインストールは以下のリンク先にまとめられている。
https://ui.shadcn.com/docs/tailwind-v4#vite
tailwindがv4になったことにより、tailwindcss init -pが必要なくなった。
そのため、これを行うとpnpmやnpxでは次のようなエラーが表示される。

$ pnpm dlx tailwindcss init -p
ERR_PNPM_DLX_NO_BIN  No binaries found in tailwindcss

npx tailwindcss init -p
$ npm error could not determine executable to run
npm error A complete log of this run can be found in: ...

✖ Validating Tailwind CSS config. Found v4.

これらに従い、プロジェクトを新規作成を進めているとpnpm dlx shadcn@canary initを使用する機会がある。shadcn,tailwindcssのインストールガイドをそのまま進めていると以下のようなエラーが返ってくる。

✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS config. Found v4.
✔ Validating import alias.

No Tailwind CSS configuration found at {your project path}.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.

Tailwind CSS v4をインストールしているはずだが、shadcn/uiは見つけられていないようだ。
この問題を解決するには、v3で使用していた以下の3つをindex.css(試していませんが、App.cssでも良いのかもしれない)に含めなければいけないようだ。^[1]

@tailwind base;
@tailwind components;
@tailwind utilities;

脚注

1. https://github.com/shadcn-ui/ui/issues/6427#issuecomment-2610386583