Skip to content

Latest commit

 

History

History
216 lines (170 loc) · 10.3 KB

Laravel-Jetstream-Tailwind-CSS-guide.md

File metadata and controls

216 lines (170 loc) · 10.3 KB

Laravel Jetstream Tailwind CSS guide

作成日：2022/04/20

このドキュメントは、Laravel Jetstream に インストール されている TailwindCSS 実行環境を構築して利用する事を目的に書かれています。作成時より時が経つと書いている手順通りに出来なくなる可能性があります。

前提

目次

Tailwind CSS 概要

※ Laravel Jetstream は、Tailwind CSS がインストールされています。
以下の手順ですぐに実行できます。

Tailwind CSSは、すべてのHTMLファイル、JavaScriptコンポーネント、およびその他のテンプレートでクラス名をスキャンし、対応するスタイルを生成して、静的CSSファイルに書き込むことで機能します。

Get started with Tailwind CSS
https://tailwindcss.com/docs/installation

Tailwind CSS は、HTMLファイルの html tag に書いた、class="xxx" CSS スタイルの変更を見つけ、CSSとJS を独自にコンパイルして css と js ファイルを作成します。

例：<h1 class="xxx">TailwindCSS</h1>
例：テキストサイズを大きくしている：<h1 class="text-9xl">TailwindCSS</h1>

コンパイルされ作成されたCSS と JS は以下の public フォルダに保存されます。

/public/css/app.css
/public/js/app.js

※Tailwind CSS で編集した場合必ず再コンパイルが必要です。

※ コンパイルし作成された app.css および app.js はブラウザにキャッシュされるため、Tailwind CSS を利用して編集変更しても HTMLファイルが反映されないように見える場合があります。

Tailwind CSS コンパイル 概要

Laravel Jetstream > Tailwind
https://jetstream.laravel.com/2.x/concept-overview.html#tailwind

新しい Terminal window を開きます。
laravel-jetstream をインストールしたディレクトリへ移動

cd /srv/www/laravel-jetstream

※ Tailwind CSS を編集中は npm run watch を実行します。
watch コマンドで HTML （laravel の場合 .blade.php ）ファイルの変更を追いかけ、変更毎に CSS / JavaScript をコンパイルします。

npm run watch

応答（ npm run watch は実行し続けるので、終了する際は、control + C で終了。）

> watch
> mix watch

● Mix █████████████████████████ emitting (95%)
 emit

● Mix █████████████████████████ done (99%) plugins
 WebpackBar:done

✔ Mix
  Compiled successfully in 2.99s
   Laravel Mix v6.0.43

✔ Compiled Successfully in 2960ms
┌─────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                    File │ Size     │
├─────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                              /js/app.js │ 694 KiB  │
│                                                                             css/app.css │ 47.5 KiB │
└─────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

npm run watch は実行し続けるので、終了する際は、control + C で終了。

※ Tailwind CSS でファイルを編集中は、Terminal window で npm run watch を実行し続ける必要があります。そうしないと、Tailwind CSS での変更が反映されません。

Tailwind CSS コンパイル コマンド

開発のためにCSS / JavaScriptをコンパイルし、変更時に再コンパイル。※Tailwind CSS の編集中に実行します。
Compile your CSS / JavaScript for development and recompile on change...

npm run watch

開発のためにCSS/JavaScriptをコンパイル
Compile your CSS / JavaScript for development...

npm run dev

本番用にCSS/JavaScriptをコンパイル
Compile your CSS / JavaScript for production...

npm run prod

ブラウザのキャッシュを削除

コンパイルし作成された app.css および app.js はブラウザにキャッシュされるため、ブラウザのキャッシュを消去および削除しておきます。
※編集が反映されなくなったら改めてキャッシュを消去・削除してください。

Firefox のキャッシュを消去するには
削除したいデータから、"キャッシュ" のみ選択すること
https://support.mozilla.org/ja/kb/how-clear-firefox-cache

Microsoft Edge の閲覧履歴を表示または削除する
削除したいデータから、"キャッシュされた画像とファイル" のみ選択すること
https://support.microsoft.com/ja-jp/microsoft-edge/microsoft-edge-%E3%81%AE%E9%96%B2%E8%A6%A7%E5%B1%A5%E6%AD%B4%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%BE%E3%81%9F%E3%81%AF%E5%89%8A%E9%99%A4%E3%81%99%E3%82%8B-00cf7943-a9e1-975a-a33d-ac10ce454ca4

開発中のWebSiteからローカルにキャッシュを保存させない

作成中のWebSiteを他の人に確認してもらいたい場合、WebSite側からブラウザにキャッシュを残さない設定をしておきます。

*.blade.php の head 属性の中に Cache-Control を追加しておく。

<meta http-equiv="Cache-Control" content="no-cache">

記載例

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta http-equiv="Cache-Control" content="no-cache">

Laravel Jetstream に関係する .blade.php

/resources/views/layouts/app.blade.php
/resources/views/layouts/guest.blade.php

Laravel デフォルトの welcome.blade.php

/resources/views/welcome.blade.php

welcome.blade.php で Tailwind CSS を使用する

welcome.blade.php は、Laravel Jetstream のテンプレートコンテンツではないので css/app.css を読み込むように指定します。

welcome.blade.php の head 属性の中に <link rel="stylesheet" href="{{ mix('css/app.css') }}"> を追加しておく。

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>

max_user_watches 変更対象ファイルの監視上限数を変更する必要がある場合

Error: ENOSPC: System limit for number of file watchers reached
https://blog.dksg.jp/2019/09/error-enospc-system-limit-for-number-of.html

「VisualStudioCodeは、この大きなワークスペースでのファイルの変更を監視できません」（エラーENOSPC）
https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc

現在の設定値を確認

cat /proc/sys/fs/inotify/max_user_watches

応答（ Amazon Linux 2 のデフォルト値 ）

8192

インスタンスのメモリ空き量から検討して計算し設定します。
メモリの空き容量を調べます。

free -m

応答

              total        used        free      shared  buff/cache   available
Mem:            982         624         126           0         230         183
Swap:          2047         113        1934

値を変更（ 131072 は、8192（デフォルト値）の16倍です ）最大約134MiB のメモリが消費されます。

echo fs.inotify.max_user_watches=131072 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

値を変更（ 262144 は、8192（デフォルト値）の32倍です ）最大約270MiB のメモリが消費されます。

echo fs.inotify.max_user_watches=262144 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

値を変更（ 524288 は、8192（デフォルト値）の64倍です ）最大約540MiB のメモリが消費されます。

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

sysctl -p を実行して新しい値をロードできます。

sudo sysctl -p

Get started with Tailwind CSS
https://tailwindcss.com/docs/installation
Laravel Jetstream > Tailwind
https://jetstream.laravel.com/2.x/concept-overview.html#tailwind
LError: ENOSPC: System limit for number of file watchers reached
https://blog.dksg.jp/2019/09/error-enospc-system-limit-for-number-of.html