Docker＋Laravel環境でTailwind CSSを使えるようにする

Laravel8からCSSフレームワークとして採用されている、Tailwind CSSを使ってみたく環境を構築してみたので、手順を備忘録代わりに残しておきます。
参考にして頂ければ幸いです。

環境
環境構築
おまけ

環境

前提環境

Docker
Laravel9

前提環境の詳細は下記「Docker＋LEMP環境構築」に詳しく記載してますので参考にして頂ければと思います。

構築環境

ツール	バージョン
Tailwind CSS	3.0.23
Node.js	17.8.0

利用ツール

Visual Studio Code
今回の環境構築ではコードの記述、ファイル検索、コマンド実行に利用しています。
代替えできるツールであれば何を使ってもらっても構いません。

環境構築

Node.jsのインストール

Dockerfileの更新

PHPコンテナのDockerfileに下記を追加

# nodeインストール
RUN curl -fsSL https://deb.nodesource.com/setup_17.x | bash -
RUN apt-get install -y nodejs
RUN npm install npm@latest -g

完成したDockerfile

FROM php:8.1-fpm

COPY ./docker/php/php.ini /usr/local/etc/app/php.ini

COPY --from=composer:2.2.9 /usr/bin/composer /usr/bin/composer

# composerでlaravelインストール時に必要
RUN apt-get update && apt-get install -y \
    zip \
    unzip \
    curl 

# laravelに必要な拡張機能
RUN docker-php-ext-install bcmath \
    pdo_mysql

# nodeインストール
RUN curl -fsSL https://deb.nodesource.com/setup_17.x | bash -
RUN apt-get install -y nodejs
RUN npm install npm@latest -g

WORKDIR /var/www/htmlbuild php

PHPコンテナのビルド

$ docker-compose build php

インストールが成功したか確認

Dockerの立ち上げ

$ docker-compose up -d

PHPコンテナに入る

$ docker-compose exec php bash

Node.js、npmのバージョン確認

# node -v
v17.8.0

# npm -v
8.6.0

Tailwind CSSのインストール

下記のサイトを参考に手順をまとめました

Laravel公式 – Tailwind CSSインストール

Tailwind CSS公式 – Laravelインストールガイド

PHPコンテナ内でインストールコマンドの実行

# npm install -D tailwindcss postcss autoprefixer

インストールが正常に完了したか確認

# npm view tailwindcss

tailwindcss@3.0.23 | MIT | deps: 21 | versions: 658
A utility-first CSS framework for rapidly building custom user interfaces.

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
tailwindcss.com

~~省略~~

バージョン情報が表示されればインストールは成功です。

設定ファイルの作成

# npx tailwindcss init
Need to install the following packages:
  tailwindcss
Ok to proceed? (y) y

Created Tailwind CSS config file: tailwind.config.js

設定ファイルを作ってよいか聞かれるので「y」を入力して進めてください。
Laravelプロジェクト直下にtailwind.config.jsというファイルができていればOKです。

テンプレートパスの追加

Laravelプロジェクト直下のtailwind.config.jsを編集

Visual Studio Codeで「ctrl + p」を押下するとファイル名で検索が可能。

スムーズにファイルが開けます。

module.exports = {
  content: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Taillwind CSSのインポート

Laravelプロジェクト配下のresources/css/app.cssを編集

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

LaravelMixの構成にTailwind CSSを追加

Laravelプロジェクト直下のwebpack.mix.jsを編集

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ]);

対象ファイルのコンパイル

PHPコンテナ内で下記コマンドの実行

# npm run dev

表示の確認

今回はTailwind CSSが効いているか確認したいだけなので手軽に確認が行えるresources/views/welcome.blade.phpを編集しちゃいます。

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

下記URLでアクセスしてみて、下線の引かれたHello world!が表示されれば正常に適用できています。