Laravel と tailwind

医師国家試験問題をデータベース化することはかなりできているのですが、それを laravel を使ってフロントエンドも少し格好をつけたいと思って、いろいろやっています。

これまでのように jquery を使えばほとんどできると思いますが、vue や react を使って実現したいと思うようになり、いろいろ実験しているのですが、やはりいきなり全部はかなり難しいので、いま動いている laravel に tailwind を入れることから始めたいと思います。

例によって chatGPT にお訊きしたのですが、最近はタダで酷使しているためか、chatGPT さんも少々機嫌が悪く、あまり本気では取り組んでくれません。

示されたコードには動かない部分も多く、やはりネット情報の方がいい場合もあるようです。

プロジェクトの作成と tailwind のインストール

Kinsta(キンスタ)というWordPressホスティングサービスがあって、その記事にすぐ動作するコードが提示されています。

それをそのまま頂きます。


composer create-project laravel/laravel my-project
cd my-project
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3 つのファイルを設定する

3 つのファイルを以下のようにします。

~/my-project/tailwind.config.js 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  "./resources/**/*.blade.php",
  "./resources/**/*.js",
  "./resources/**/*.vue",
  ],
  theme: {
  extend: {},
  },
  plugins: [],
  }
~/my-project/resources/app.css 

@tailwind base;
@tailwind components;
@tailwind utilities;
~/my-project/resources/views/welcom.blade.php 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      @vite('resources/css/app.css')
    <title>Document</title>
  </head>
  <body>
    <div class="max-w-md  m-24 rounded overflow-hidden shadow-lg">
      <div class="px-6 py-4">
        <h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>
        <p class="mt-3 text-gray-600 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.
        </p>
        <button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Read More
        </button>
      </div>
    </div>
  </body>
</html>

サーバーを起動する

サーバーを 2 つ起動します。

それぞれ別の端末で同時に 2 つのサーバーを立ち上げます。


cd ~/my-project
npm run dev


cd ~/my-project
php artisan serve

http://127.0.0.1:8000/ にアクセスします。

ちゃんと tailwind が反映されています。

ビルド

上の例では、2 つのサーバーを起動する必要がありました。

でも、いつも 2 つのサーバーを起動する必要があるのでしょうか？

実は、「npm run dev」では開発サーバーが起動し、ビルドされたファイルがメモリ内に生成されますが、実際のファイルとしては保存されません。そのため、publicディレクトリにビルドされたファイルが出力されるわけではありません。

なので、「npm run dev」を停止すると tailwind は効きません。というかエラーになります。

そこで以下のようにしてビルドします。


cd ~/my-project
npm run build

そうすると、public に build フォルダが作成されて「npm run dev」を実行しなくても tailwind が反映されるようになります。


~/my-project/public
├── build
│   ├── assets
│   │   ├── app-6rJ3I2v6.css
│   │   └── app-CifqVuM1.js
│   └── manifest.json
├── favicon.ico
├── index.php
└── robots.txt

すごいというか、これはハマる要素がいっぱいですね。