在使用 Laravel 8 開發之前，我需要先建立 Laravel 8 的專案，並且引入 livewire、Tailwind CSS 兩個套件。至於，為何要使用 livewire 跟 Tailwind CSS 套件呢？研究 Laravel 8 之前，才剛學了PHP的程式設計基礎，也稍微瞭解PHP有許多現成的框架，透過框架的功能，能夠使開發過程變得稍微輕鬆、程式架構可以更有彈性、許多基礎功能皆已開發完成，只需要引用它，然後，專心在主要的程式邏輯開發工作即可。
鑒於學習程式語言的過程，時間的消耗是必然的，但是要在短時間內同時學習前端的HTML5、JavaScript、CSS，以及後端的PHP程式語言與PHP框架，勢必曠日廢時，我必須找到自己要學習的核心，讓學習曲線降低。於是在看了幾位善心人士的教學影片，最終，確定了下列的學習組合：Laravel 8 + livewire + Tailwind CSS。
根據這陣子查找資料的結果，個人覺得前端技術 HTML5、CSS3、JavaScript、AJAX、RESTful 是網站系統開發的主流，而我現在無法花太多時間學習這部份，一部份原因當然也是沒興趣，本想先學習 Laravel 8 的 MVC 部份就好，但是，看了高見龍大神與哥布林挨踢頻道的教學影片後，才知道原來現在針對後端，Laravel Jetstream 提供兩種不同開發位置的套件來提供 AJAX 功能，一個是 livewire (適合後端開發者)、另一個是 inertia(適合前端開發者)，而 livewire 預設支援的CSS框架是 Tailwind，才會出現這樣的學習組合，以上都是按照個人的想法做出的一時之選，若有觀念上的錯誤，希望有緣人不吝指正。
建立 Laravel 專案
安裝 Livewire 套件
安裝 Tailwind CSS套件
重新編譯 app.css 與 app.js
** 安裝以上的快速方式是安裝 Laravel 時，同時啟用 jetstream，指令：laravel new your_project --jet ，但本次修改並不打算使用 Jetstream。 **
# laravel new helpdesk
# cd helpdesk //切換至 helpdesk 專案目錄
# npm install -D tailwindcss@latest postcss@latest autoprefixer@latest //安裝 Tailwind CSS 相依套件
# npx tailwindcss init //產生 Tailwind.config.js 檔案
# 透過文字編輯器或開發工具(VS Code) 編輯 tailwind.config.js，在檔案中加上紅色標註的文字，如下：
// tailwind.config.js
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
# 編輯 webpack.mix.js 檔案，加入紅色標註文字
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css","public/css",[
require("tailwindcss"),
]);
# 編輯 ./resources/css/ 目錄下的 app.css 檔案，加入下列三行文字：
@tailwind base;
@tailwind components;
@tailwind utilities;
【步驟四：編譯 Laravel Mix project】
# npm run dev