v4が正式リリースされた後もtailwind css v3を使い続ける方法

Tailwind CSSがバージョン4にアップデートされました。
ビルド時のファイルサイズが大幅に小さくなったほか、Viteとの併用時にPostCSSやautoprefixerが不要になっているなど大幅に改善されています。

一方でShadcn/uiなどV4に対応していないUIフレームワークもまだまだ存在しますので、対応が追いつくまでTailwind V3を導入する方法を備忘で残しておきます。

npm

コマンド

npm install -D tailwindcss@3.4.17 postcss autoprefixer //tailwindだけバージョン3.4.17を指定

npx tailwindcss@3.4.17 init -p //dlxでもバージョン指定

yarn(v4)

コマンド

yarn -D tailwindcss@3.4.17 postcss autoprefixer //tailwindだけバージョン3.4.17を指定

yarn dlx tailwindcss@3.4.17 init -p //dlxでもバージョン指定

pnpm

コマンド

pnpm install -D tailwindcss@3.4.17 postcss autoprefixer //tailwindだけバージョン3.4.17を指定

pnpm dlx tailwindcss@3.4.17 init -p //dlxでもバージョン指定