【Laravel12 + Tailwind CSS】環境構築

Laravel12プロジェクトにTailwind CSSを手動で適用する手順の解説です。

Installation - Laravel 12.x - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing ...

Install Tailwind CSS with Laravel

Setting up Tailwind CSS in a Laravel project.

前提条件
新規プロジェクト作成
Node.js パッケージインストール
Vite起動
レイアウトテンプレートへの適用
Laravelビルトインサーバ起動

前提条件

Laravel12を使っていきます
PHP8.2以降インストール済（Laravel12の要件）
Composerインストール済
Node.jsインストール済(v22.xを使っていきます)
Ubuntu24.04(WSL2)上で作業していきます

新規プロジェクト作成

新規プロジェクト作成「lara12-tailwind-app」を作成します。

composer create-project laravel/laravel:^12 lara12-tailwind-app

Laravel12の場合、デフォルトで Tailwind CSS がインストールされるように設定されています。（まだインストールはされていません）

Node.js パッケージインストール

プロジェクトフォルダに入って Node.js のパッケージをインストールします。

cd lara12-tailwind-app
npm install

インストール済のパッケージを確認します。

npm ls

Tailwind CSS がインストールされています。

Vite起動

Laravel12では、デフォルトでViteやCSSの設定が最適化されているので、

そのままViteを起動します。

npm run dev

Webブラウザで http://localhost:5173/ にアクセスします。

Viteのデフォルトページが表示されました。

レイアウトテンプレートへの適用

プロジェクトのビューファイルで Tailwind CSS を読み込むようにします。

例として、「resources/views/welcom.blade.php」を編集してみます。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @vite('resources/css/app.css')
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

「<head> ～ </head>」のブロック内に