Next.jsプロジェクトでTailwind CSSを削除する方法

アジェンダ

Next.jsの環境構築の際に、意図せずTailwindを追加してしまったりすることがあり、削除したくなることがあります。
その際に、どのように削除すればよいか手順をまとめます。

手順

1. Tailwind CSSの依存関係をアンインストール

まず、Tailwind CSSに関連する依存関係をアンインストールします。以下のコマンドをターミナルで実行してください。

npm uninstall tailwindcss postcss autoprefixer

2. Tailwind CSSの設定ファイルを削除

次に、プロジェクトのルートディレクトリにあるtailwind.config.jsおよびpostcss.config.jsファイルを削除します。これらのファイルはTailwind CSSの設定ファイルです。

3. Tailwind CSSのインポートを削除

styles/globals.cssなどのファイルにあるTailwind CSSのインポート行を削除します。これにより、プロジェクトからTailwind CSSのスタイルが除去されます。

/* 例えば、以下の行を削除 */
@tailwind base;
@tailwind components;
@tailwind utilities;