はじめに

ec2 laravelでTailwind CSSを導入する機会があったため、まとめます。

構築済み

下記記事で、EC2でlaravelを構築済み

パブリックipでブラウザからアクセスすると、laravelのトップページが表示されます。

nodeをインストール

npmを使用するため、下記記事を参考にEC2にnodeをインストールします。

$ node -v
-bash: node: コマンドが見つかりません

$ cd

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

$ . ~/.nvm/nvm.sh

$ nvm install --lts

$ node -e "console.log('Running Node.js ' + process.version)"

$ node -v 
v16.17.0

インストール完了です。

Tailwind CSSをインストール

// laravelのディレクトリに移動します。
$ cd /var/www/html

$ php artisan -V
Laravel Framework 9.25.1

// Tailwind CSSをインストールします
$ npm install -D tailwindcss postcss autoprefixer

// tailwind.config.js が作成されます
$ npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

$ sudo vim tailwind.config.js

tailwind.config.jsのcontentに、Tailwind CSS のスタイルを参照するファイルを全て含むようにパスを追加します。

/var/www/html/tailwind.config.js

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

resources/css/app.css に、 Tailwind ディレクティブを追加します

$ sudo vim resources/css/app.css

/var/www/html/resources/css/app.css

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

Laravel-Mixをインストールします。

$ npm install laravel-mix --save-dev

$ sudo touch webpack.mix.js

$ sudo vim webpack.mix.js

webpackをビルドしたときに、Tailwind CSSが含まれるようにします。

/var/www/html/webpack.mix.js

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

package.jsonを修正します。

$ sudo vim package.json

/var/www/html/package.json


{
    "private": true,
    "scripts": {
-        "dev": "vite",
-        "build": "vite build"
+        "dev": "npm run development",
+        "development": "mix",
+	     "watch": "mix watch"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.8",
        "axios": "^0.27",
        "laravel-mix": "^6.0.49",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.16",
        "sass": "^1.54.5",
        "sass-loader": "^12.6.0",
        "tailwindcss": "^3.1.8",
        "vite": "^3.0.0"
    }
}

トップページをTailwind CSSを使ったページに修正

welcome.blade.php を修正します。

$ sudo mv resources/views/welcome.blade.php resources/views/_welcome.blade.php 
$ sudo vim resources/views/welcome.blade.php

/var/www/html/resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{{ mix('css/app.css') }}" rel="stylesheet">
  </head>
  <body class="flex justify-center items-center h-56">
    <h1 class="text-3xl text-green-500">Hello Tailwind</h1>
  </body>
</html>

viewのキャッシュをクリア後、npm run watchもしくはnpm run devでコンパイルを行います。

$ php artisan view:clear

$ npm run watch

> watch
> mix watch

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

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

✔ Mix
  Compiled successfully in 1.97s
                         
   Laravel Mix v6.0.49   
                         
✔ Compiled Successfully in 1937ms
┌──────────────┬──────────┐
│         File │ Size     │
├──────────────┼──────────┤
│   /js/app.js │ 672 KiB  │
│  css/app.css │ 14.7 KiB │
└──────────────┴──────────

ブラウザからアクセスすると、Tailwindの設定が反映されているのが確認できます。

参考