每個 Laravel 網站都可使用樣式，而 Tailwind CSS 是最簡單的方法，為網站增添光彩。這個實用的 CSS 框架提供預定義的類，設計 HTML 元素風格。無需編寫無盡的 CSS 程式碼，您可快速建立自定義網頁，並輕鬆維護和擴充套件樣式表。
Tailwind 與 Alpine.js 和 Livewire 都是 TALL 協議棧的一部分。Laravel 社羣構建了這個全棧開發解決方案，幫助各種技能水平的開發人員快速構建網路應用程式原型。這些解決方案易於使用，無需深厚的前端或後端技術知識。
這篇實踐文章將探討如何使用 Tailwind CSS 為你的 Laravel 專案增色。
使用 Tailwind 增強你的 Laravel 專案
要開始使用，先建立一個基本的 Laravel 頁面，然後使用 Tailwind CSS 以最小的代價為其設計樣式。
前提條件
要跟上本教程，你需要
要檢視最終專案，請檢視完整的專案程式碼。
Laravel 專案和設定 Tailwind
使用 Composer 建立一個新的 Laravel 專案：
1. 開啟終端，進入專案所在目錄並執行：
composer create-project laravel/laravel my-project
2. 進入my-project目錄，安裝所需的軟體包：
cd my-project
3. 安裝與 Tailwind 配合使用的軟體包：
npm install -D tailwindcss postcss autoprefixer
4. 執行以下命令來設定尾風的配置檔案：
npx tailwindcss init -p
此操作會在專案根目錄下放置兩個檔案：tailwind.config.js 和 postcss.config.js。
配置模板路徑
1. 接下來，在 tailwind.config.js 檔案中配置模板路徑。Laravel 預設在公共目錄下查詢 CSS 檔案。模板路徑告訴 Laravel 在哪裡可以找到應用程式的 CSS 檔案。
2. 用以下程式碼替換 tailwind.config.js 檔案中的程式碼：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
將 Tailwind CSS 指令新增到專案的 CSS 中
1. 要為 Tailwind CSS 新增指令，請進入 resources/css 資料夾並開啟 app.css 檔案。
2. 然後，新增以下程式碼：
@tailwind base; @tailwind components; @tailwind utilities;
構建應用程式
在本地執行應用程式之前：
1. 啟動 Vite 開發伺服器：
npm run dev
該命令捆綁靜態資產檔案，包括 Tailwind CSS，並啟動 Vite 本地伺服器。
2. 使用 Artisan 執行你的 Laravel 應用程式：
php artisan serve
現在，您的應用程式應執行在 http://127.0.0.1:8000/ 。它會顯示新建立的 Laravel 應用程式的預設輸出。
開啟 resources/views/welcome.blade.php 路由檢視檔案，可以看到其中已經使用了 Tailwind 實用工具類。
如何製作簡單的Tailwind元件
為了更好地瞭解 Tailwind 的工作原理：
1. 開啟 resources/views/welcome.blade.php。
2. 刪除應用程式歡迎檢視中的程式碼。
3. 將其替換為下面的程式碼，即可渲染出漂亮的卡片元件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
<title>Document</title>
</head>
<body>
<div class="max-w-md m-24 rounded overflow-hidden shadow-lg">
<img class="w-full" src="https://picsum.photos/400/300" alt="Blog Image">
<div class="px-6 py-4">
<h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>
<p class="mt-3 text-gray-600 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
exercitationem praesentium nihil.
</p>
<button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">
Read More
</button>
</div>
</div>
</body>
</html>
上面的程式碼使用 Vite 通過 @vite('resources/css/app.css') 匯入 app.css 檔案。它還匯入了 Tailwind。它使用這些 Tailwind CSS 實用工具類建立了一個基本標記元件，用於模擬部落格卡片：
max-w-sm— 將容器的最大寬度設定為 sm（小）斷點尺寸。m-24— 為容器的所有邊新增 24 個單位（96px 或 6rem）的邊距。rounded— 新增邊框半徑，使容器的邊角呈圓形。overflow-hidden— 隱藏任何溢位容器的內容。shadow-lg— 為容器新增陰影效果。w-full— 將影象寬度設定為容器的 100%。px-6 py-4— 在 x 軸上新增 6 個單位（24px 或 1.5rem）的填充，在 y 軸上新增 4 個單位（16px 或 1rem）的填充。font-bold— 將文字的字號設定為粗體。text-xl— 將文字的字型大小設定為超大。mb-2— 為元素新增 2 個單位（0.5rem 或 8px）的下邊框。text-gray-600— 將文字顏色設定為深灰色。text-base— 將文字字型大小設定為預設值。
在瀏覽器中預覽應用程式時，應該會看到與下圖類似的輸出結果。
網頁元件示例
將您的 Laravel Tailwind 專案部署到伺服器
在使用 Kinsta 部署和託管 Laravel 應用程式之前，請再做一些更改，以確保託管後能正常執行。
1. 開啟 app/Http/Middleware/TrustProxies.php。更改 protected $proxies 的值，使 Laravel 應用程式信任所有代理：
protected $proxies = '*';
2. 在專案根目錄下新建一個 .htaccess 檔案，並貼上以下程式碼：
<IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^(.*)$ public/$1 [L] </IfModule>
3. 建立一個新的 Git 倉庫並將程式碼推送至該倉庫（Kinsta 支援從 GitHub、GitLab 和 Bitbucket 推送程式碼）。
4. 登入你的 Kinsta 賬戶或建立一個新賬戶。進入 MyKinsta 控制面板後，單擊 “Add service” 按鈕，然後選擇 “Application“，如下圖所示。
在 MyKinsta 上新增應用程式
MyKinsta 會提示您連線 Git 賬戶。按照要求完成授權，然後選擇之前推送到版本庫的專案和要使用的分支。
在 Kinsta 上配置新應用程式的詳細資訊
5. 在 Environment variables 部分新增 Laravel APP_KEY 。金鑰位於本地專案目錄的 .env 檔案中。
在 Kinsta 上配置應用程式環境變數
6. 單擊 “Continue “，然後根據您的偏好選擇構建環境。
7. 將 “Resources” 部分的開始 命令暫時留空，然後單擊 “Continue” 繼續。
8. 最後，填寫付款資訊。部署工作立即開始。
要正常執行應用程式，您需要兩個構建包： PHP 用於執行 php 命令，Node.js 用於執行 npm 命令。為此，您需要
9. 進入應用程式，在左側導航欄點選 Settings。
10. 單擊 Add buildpack，然後新增 Node.js 和 PHP 的構建包。不過，請確保在序列中最後新增 PHP 構建包，因為這是一個基於 PHP 的應用程式。
- 單擊新增新構建包後出現的 “Deploy Now” 按鈕，如下圖所示。
在 Kinsta 上新增構建包後部署應用程式
- 最後，進入應用程式的 “Processes” 選項卡，編輯預設 Web 程序，並將其 Start command 替換為以下內容：
npm run build && heroku-php-apache2
更新 Kinsta 的程序啟動命令
更新啟動命令後，應用程式將自動使用新命令重新部署。部署成功後，您就可以訪問域，檢視您建立的精美卡片元件，並開始測試和開發應用程式。
小結
Tailwind 可使您的 Laravel 專案從簡單的基本功能升級到驚人的完美效果。它易於使用，無需大量程式碼即可實現所需外觀。
評論留言