Laravel MixとTailwindcssのインストール方法

現在、下記の本を参考にしてLaravelの学習をしており、その中で気づいた点を備忘録として残しておこうと思います。

【参考にした本はこちら↓】
プロフェッショナルWebプログラミング　久保田賢二郎 他著

【備忘録としてのページ範囲】
143ページ～152ページまでについて備忘録として記載します。

事前準備(必要なもの)

Node.js

Laravel Mixとは？

Laravel Mixとは『フロント側の開発を簡単に構築できるライブラリ』のこと。このライブラリをnpmでインストールするとサクッとフロント画面のデザインができてしまうすごいツールです。

公式サイト↓
URL:https://laravel-mix.com/docs/6.0/installation

Tailwindcssとは？

Bootstrapやfoundationと同じCSSフレームワークの一つで、特にカスタマイズ性に優れていることが特徴です。そのため、近年では多くのシステム開発で受け入れられています。

Laravel Mixの導入方法

では、さっそくLaravel Moxをnpmを使って順番に沿ってインストールしてみましょう。

npm installを実行して必要なパッケージをインストールする

npm install

Laravel Mixをインストールする

npm install laravel-mix --save-dev

Laravel Mixインストール前のpackage.jsonの中身

Laravel Mixインストール直後のpackage.jsonの中身

webpack.mix.jsを作成して、Mixの構成を記述する

ルートディレクトリにJSファイル『webpack.mix.js』を作成して、下記の内容を追加します。

参考にしたLaravel Mixに関するサイトはこちら↓
URL：https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

package.jsonの"script"タグを編集する

参考にしたサイトはこちら↓
URL:https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md

更新前

package.json

  "scripts": {
     "dev": "vite",
     "build": "vite build"
  }

更新後

package.json

  "scripts": {
     "dev": "npm run development",
     "development": "mix",
     "watch": "mix watch",
     "watch-poll": "mix watch -- --watch-options-poll=1000",
     "hot": "mix watch --hot",
     "prod": "npm run production",
     "production": "mix --production"
  }

Tailwindcssの導入方法

tailwindcssを導入するためのコマンドを実行

さて、最後にtailwind CSSをnpmを使ってインストールしてみましょう

npm install -D tailwindcss
npx tailwindcss init

以上です。

お疲れさまでした。