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

Laravel+Taillwind CSS CSS

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

環境

構築環境

ツールバージョン
Tailwind CSS3.0.23
Node.js17.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.
~~省略~~

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

設定ファイルの作成

# 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!が表示されれば正常に適用できています。

http://localhost:8080/

おまけ

Visual Studio CodeでTailwind CSSを使うならTailwind CSS IntelliSenseという拡張機能が入力補完をしてくれてとても便利です。

下記サイトのTaillwind CSSで使えるクラスがまとまったチートシートになっていますので、Taillwind CSSを使っていくのであればブックマーク必須!

Tailwind CSS Cheat Sheet
Cheat sheet to learn Tailwind CSS quickly. Browse and search all Tailwind utility classes or CSS properties on one page.

それでは良いTaillwind CSSライフをー

タイトルとURLをコピーしました