現在、さくらインターネットのレンタルサーバーでの稼働を想定した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

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

</aside>

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

$ npm run build

> build
> vite build

Killed

Tailwindを読み込む

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