LaravelでTailwind CSSを使う

現在、さくらインターネットのレンタルサーバーでの稼働を想定したPHPによる会員システムを構築しています。いままでは自家製のフレームワークを使っていましたが、セキュリティの懸念や汎用性に考慮して今回はPHPで最も利用されているLaravelを使うことにしました。また、CSSフレームワークには、Next.jsで利用しているTailwind CSSを使うことにしました。開発当初はCDNで読み込んでいましたが、本格的に利用するためにインストールすることにしました。

手順

Tailwind CSS をインストール

npm 経由で tailwindcss とそのピア依存関係をインストールし、init コマンドを実行して tailwind.config.js と の両方を生成します。 . postcss.config.js

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

テンプレートのパスを構成

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

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

Tailwind ディレクティブを CSS に追加

Tailwind の各レイヤーの@tailwind ディレクティブを ファイルに追加します。

./resources/css/app.css

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

ビルドプロセスを開始

npm run dev を使用してビルド プロセスを実行します。さくらインターネットの環境では、優先度を下げて実行することで、ビルドを行うことができました。

/usr/bin/nice -n 20 npm run dev

💡 csh系は組み込みコマンドでniceがあるので注意

優先順位を下げない場合は、以下のようにkillされてしまいます。

$ npm run build

> build
> vite build

Killed

Tailwindを読み込む

公式サイト通りに実行してもapp.blade.phpにコンパイルしたはずのCSSが読み込まれませんでした。そこで以下のようにしています。

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

参考サイト

主な流れは公式サイトを参考にしました。

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

さくらインターネットのレンタルサーバー特有の問題は以下のサイトが参考になりました。

https://chigusa-web.com/blog/sakura-npm/

https://n-n.tokyo/archives/2484

https://qiita.com/fujishiro380/items/13affd8256ec4cb75541

https://zenn.dev/naoki_oshiumi/articles/c6cec9b25fae56

https://qiita.com/hirakei1203/items/1b99400fe66e10d25959

daisyUIの追加

tailwind CSSは便利ですが、Bootstrapと比較してmodalなどの機能が不足しています。そこで、今回はdaisyUIを追加しました。

インストール

daisyUIのインストール

nice -n 20 npm i -D daisyui@latest

tailwind.config.js に追記

module.exports = {
  //...
  plugins: [require("daisyui")],
}

おまじない

nice -n 20 npm install

ビルドプロセスを開始

nice -n 20 npm run dev

テーマの適用

tailwind.config.js に追記

利用したいテーマを追加します。今回はcorporateを追加しました。テーマの一覧はこちら。

daisyui: {
    themes: ["light", "dark", "corporate"],
  },

ビルドプロセスを開始

必要かどうかわかりませんが、一応実行しておきます。

nice -n 20 npm run dev

テーマの適用

app.blade.php に以下を追加します。

<!DOCTYPE html>
<html lang="ja" data-theme="corporate"> <----これを追加
<head>

CSSの反映を自動化する

tailwind.config.jsでwatch modeを有効にすることで、自動的にCSSを反映させることができます。

npm run watch

参考サイト

https://zenn.dev/kkeisuke/scraps/c3d668e6388676

https://zenn.dev/ikenohi/articles/596594edebb76f

追記

いつごろからかさくらインターネットのCUI環境でniceコマンドを実行すると「nice: Badly formed number.」というエラーが発生するようになりました。その場合は以下のようにパスを指定すると良いようです。

/usr/bin/nice -n 20 npm run dev