laravel | TECH NOTE

基本的には公式の手順に従っていきます。公式の手順とは異なり、sail環境で実行するため、すべてのコマンドにsailがついています。また、Viteを使います。

https://tailwindcss.com/docs/guides/laravel

Tailwind CSSをインストールする

すでにnpm installしてある状態で、次のコマンドを実行します。

$ sail npm install -D tailwindcss postcss autoprefixer
$ sail npx tailwindcss init -p

コマンドを実行すると、tailwind.config.jsとpostcss.config.jsが作成されます。

テンプレートのパスを設定する

tailwind.config.jsを編集してテンプレートファイルのパスを追加します。

修正前のtailwind.config.jsは次のようになっています。

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

contentを次のように編集します。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

公式の手順どおりに編集していますが、Vue.jsを使わないのであれば最後の1行は不要です。

CSSファイルにTailwindディレクティブを追加する

@tailwindディレクティブをresources/css/app.cssに追加します。

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

ビルドプロセスを開始する

すでにnpm run devを実行中の場合は一度停止してから再度実行してください。

$ sail npm run dev

これでインストール作業は完了し、Tailwind CSSが使用可能な状態になります。

Tailwind CSSを使ってみる

では実際に使ってみましょう。

welcome.blade.phpを修正して機能しているかを確認します。

まずは、<head>タグに@vite('resources/css/app.css')を埋め込みます。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
      ...
      @vite('resources/css/app.css')
      ...
    </head>

これで使用する準備が整いましたが、welcome.blade.phpの場合、すでに<style>タグでTailwind CSSが埋め込まれているので、これをコメントアウトしておきます。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        ...
        <!-- Styles -->
        <!-- style>
            /* ! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com */ ...
        </style -->
  </head>

この修正は他のBladeファイルでは不要です。

では実際に使ってみます。

公式サイトの手順にあった<h1>タグを記述します。

        <h1 class="text-3xl font-bold underline">
            Hello World!
        </h1>

画面を表示してみて、

のように表示され、デベロッパーツール上でも

のようにapp.cssに定義されたTailwind CSSのクラスが適用されていることが確認できたら正常にインストールできています。

Laravelで作りたいアプリケーションがあるため、macOS上で開発するための環境を構築します。

Laravel Sailでインストールする

macOS上でDocker Desktopを導入している場合、もっとも簡単に開発環境を構築できる手段になると思います。

作成したいアプリケーションがexample-appの場合、次のようにコマンドを入力します。

$ curl -s "https://laravel.build/example-app" | bash

最後にパスワードが求められますので入力してください。

初期設定を行う

PHPStormで開発を行うため、アプリケーションを開いた後必要な初期設定を行います。

まずはコンテナを起動します。

$ ./vendor/bin/sail up

コンテナが起動している状態で、設定をひらきます。

PHP言語レベル、CLIインタープリターを設定します。

今回はLaravel 10.xがサポートしているバージョンのうち、8.3を使用していますので、PHP言語レベルは8.3を指定しています。

また、CLIインタープリターはローカルのPHPではなく、Dockerコンテナー上のPHPを使用することで、ローカルにPHPをインストールしなくて済みます。CLIインタープリターの右の…ボタンをクリックし、CLIインタープリターダイアログの左上の+ボタンをクリックし、「From Docker, Vagrant, VM, WSL, Remote…」をクリックしてください。

リモートPHPインタープリターの構成ダイアログで、Dockerを選択し、

サーバーの右ある新規…ボタンをクリックし、

OKボタンをクリックしてください。

OKボタンをクリックすると設定は完了します。

デバッグの設定を行う

次にデバッグの設定を行います。docker-compose.ymlを確認すると、SAIL_XDEBUG_MODE環境変数がない場合、デバッグモードがOFFになっています。

        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'

docker-compose.ymlを修正するのではなく、.envファイルにSAIL_XDEBUG_MODEを追加します。