Laravel Sail 環境で Bootstrap から TailwindCSS へ切り替える方法

Laravel Sail 環境で動作している Laravel アプリケーションのフロントエンドを、Bootstrap から TailwindCSS へ切り替える方法をご紹介します。

前提条件
1. TailwindCSS をインストールする
2. TailwindCSS の設定ファイルを作成する
3. PostCSS の設定ファイルを作成する
4. TailwindCSS の設定ファイルを修正する
5. CSS ファイルを更新する
6. Laravel アプリケーションでの変更箇所
7. TailwindCSS のビルドを実行する
8. アプリケーションの表示確認
9. 各種バージョン情報

前提条件

Laravel Sail 環境がセットアップされていること
既にアプリケーションで Bootstrap を利用していること
Node.js および npm がインストールされていること（Laravel Sail に含まれています）

1. TailwindCSS をインストールする

まずは、TailwindCSS をインストールします。以下のコマンドを実行して、TailwindCSS をプロジェクトに追加します。

./vendor/bin/sail npm install -D tailwindcss postcss autoprefixer

-D オプションを使用して、開発依存としてインストールします。

2. TailwindCSS の設定ファイルを作成する

次に、TailwindCSS の設定ファイルを生成します。./vendor/bin/sail を使ってコマンドを実行します。

./vendor/bin/sail npx tailwindcss init

これで、tailwind.config.js というファイルがプロジェクトのルートディレクトリに生成されます。

3. PostCSS の設定ファイルを作成する

TailwindCSS を使用するには、PostCSS の設定ファイルも必要です。postcss.config.cjs というファイルを手動で作成します。

以下のコマンドで、PostCSS 設定ファイルを作成します。

echo "module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
};" > postcss.config.cjs

これにより、postcss.config.cjs ファイルが生成され、TailwindCSS と Autoprefixer が有効になります。

4. TailwindCSS の設定ファイルを修正する

tailwind.config.js の content セクションに、Blade ファイルや JavaScript ファイルを含める設定を追加します。

module.exports = {
  content: [
    './resources/views/**/*.blade.php',
    './resources/js/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. CSS ファイルを更新する

次に、TailwindCSS を使うために、resources/css/app.css を更新します。

既存の Bootstrap の CSS を削除し、TailwindCSS の基本設定を追加します。

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

6. Laravel アプリケーションでの変更箇所

Blade テンプレートで、これまでの Bootstrap のクラスを削除し、TailwindCSS のクラスを追加します。例えば、<div class="container"> を <div class="max-w-7xl mx-auto"> のように置き換えます。

7. TailwindCSS のビルドを実行する

次に、TailwindCSS をビルドします。開発用のビルドは以下のコマンドで実行できます。

./vendor/bin/sail npm run dev

本番用のビルドは次のコマンドで実行します。

./vendor/bin/sail npm run build

8. アプリケーションの表示確認

これで、Laravel Sail 環境で TailwindCSS が導入され、フロントエンドのデザインが反映されているかを確認できます。

9. 各種バージョン情報

今回の切り替え作業に使用した環境のバージョン情報は以下の通りです。

Laravel: 11.27.2
PHP: 8.3.12
Node.js: 18.16.1
npm: 9.6.7
TailwindCSS: 3.4.13
PostCSS: 8.4.24
Autoprefixer: 10.4.14
MySQL: 8.0.32
Composer: 2.8.1