آموزش نصب و راه اندازی Tailwind CSS در لاراول

اگر تا امروز برای طراحی ظاهر صفحات وب مجبور بودید بین هزاران خط کد CSS سنتی غرق شوید یا خودتان را به قالب‌های تکراری بوت‌استرپ محدود کنید، وقتش رسیده که با Tailwind CSS v4 جادوی سرعت در فرانت‌اند را تجربه کنید! تلویند یک فریم‌ورک کامپوننت‌محور نیست؛ بلکه مجموعه‌ای از کلاس‌های آماده و کوچک (Utility Classes) است که به شما اجازه می‌دهد مستقیماً درون فایل‌های HTML یا Blade، جذاب‌ترین رابط‌های کاربری را با سرعت جت خلق کنید.

هر توسعه دهنده Laravel یا Backend Developer حرفه‌ای که به دنبال Laravel Performance و سرعت بالای لود صفحات است، باید نحوه راه‌اندازی اصولی این ابزار را بلد باشد. فرقی نمی‌کند در حال طراحی سایت شرکتی هستید، روی یک طراحی فروشگاه اینترنتی بزرگ کار می‌کنید یا وظیفه توسعه یک طراحی پنل مدیریت پیچیده را بر عهده دارید؛ اولین قدم، سینک کردن صحیح تلویند با ابزارهای لاراول است. در ادامه، روش نصب رسمی نسخه ۴ تلویند را روی دو ابزار Vite (سیستم فوق‌العاده سریع و مدرن) و Laravel Mix (سیستم سنتی پروژه‌های قدیمی) قدم‌به‌قدم یاد می‌گیریم.

🚀 روش اول: نصب و راه‌اندازی با استفاده از Vite (روش مدرن)

در نسخه‌های جدید، لاراول به صورت پیش‌فرض از ابزار فوق‌العاده سریع Vite استفاده می‌کند، اما در پروژه‌های قدیمی‌تر ممکن است هنوز با Laravel Mix روبرو شوید. چه در حال طراحی سایت اختصاصی باشید و چه بخواهید یک طراحی پنل مدیریت پیشرفته را پیاده‌سازی کنید، تسلط بر پیکربندی این ابزارها به شما کمک می‌کند خروجی‌های بهینه‌تری داشته باشید و روی Laravel Performance و سرعت بارگذاری پروژه تأثیر مستقیمی بگذارید.

🚀 روش اول: نصب و راه‌اندازی با استفاده از Vite (روش مدرن)

۱. ایجاد پروژه لاراول

اگر یک پروژه آماده ندارید، ابتدا ترمینال خود را باز کرده و با این دستور یک پروژه لاراولی جدید بسازید:

composer create-project laravel/laravel projectName

۲. نصب پکیج‌های Tailwind CSS

با اجرای دستور زیر در مسیر اصلی پروژه، تلویند نسخه ۴ و پلاگین رسمی بومی آن برای ویت نصب خواهند شد:

npm install tailwindcss @tailwindcss/vite

🛠️

۳. پیکربندی افزونه در فایل تنظیمات

حالا باید پلاگین نصب‌شده را به هسته کامپایلر معرفی کنید. فایل vite.config.js را در ریشه پروژه خود باز کرده و کدهای زیر را به بخش پلاکین‌ها اضافه کنید:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    // …
  ],
})

🎨

۴. ایمپورت دایرکتیو اصلی و آدرس‌دهی سورس‌ها

فایل اصلی استایل پروژه یعنی resources/css/app.css را باز کنید. در نسخه v4، تمام تنظیمات و مسیر فایل‌ها (قالب‌ها، کامپوننت‌های بلید و فایل‌های جی‌اس) با دایرکتیو source و به صورت مستقیم در همین فایل قرار می‌گیرند تا موتور تلویند آن‌ها را اسکن کند:

@import "tailwindcss";

@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";
@source "../**/*.blade.php";
@source "../**/*.js";

🔄

۵. اجرای سرور مانیتورینگ دارایی‌ها

برای اینکه هر تغییری در کلاس‌ها اعمال می‌کنید به صورت آنی کامپایل شود، دستور زیر را در ترمینال بزنید:

npm run dev

💻

۶. استفاده از کدهای تلویند در ویوها

حالا کافی است فایل ویوی اصلی خود یعنی resources/views/welcome.blade.php را باز کرده و در تگ head، استایل‌ها را با دایرکتیو ویت فراخوانی کنید. این روش فونداسیون فوق‌العاده‌ای برای ساخت سامانه آنلاین یا پروژه‌های بزرگ خواهد بود:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @vite('resources/css/app.css')
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

📦 روش دوم: نصب و راه‌اندازی با استفاده از Laravel Mix (روش قدیمی)

اگر به عنوان یک Backend Developer در حال نگهداری از سیستم‌های قدیمی مثل یک طراحی CRM یا سیستم‌های طراحی ERP شرکتی هستید که با لاراول میکس توسعه یافته‌اند، از این روش استفاده کنید.

۱. نصب پکیج‌های سازگار با PostCSS

دستور زیر را در ترمینال پروژه اجرا کنید تا پکیج‌های تلویند و پست‌سی‌اس‌اس هماهنگ با لاراول میکس دانلود شوند:

npm install tailwindcss @tailwindcss/postcss postcss

⚙️

۲. تنظیم فایل پیکربندی Laravel Mix

فایل تنظیمات اصلی یعنی webpack.mix.js را در ریشه پروژه باز کنید و افزونه تلویند را به زنجیره پردازش متد postCss متصل کنید:

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

mix
  .js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("@tailwindcss/postcss"),
  ]);

🖌️

۳. تزریق کدهای تلویند و سورس‌های اسکن

مانند روش قبل، فایل resources/css/app.css را باز کرده و دایرکتیوها را در بالاترین خطوط آن بنویسید تا کلاس‌ها در هنگام [badge_color=blue]توسعه وب[/badge] به درستی شناسایی شوند:

@import "tailwindcss";

@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";
@source "../**/*.blade.php";
@source "../**/*.js";

⏳

۴. کامپایل دارایی‌ها در میکس

برای اینکه میکس کدهای شما را مانیتور کند و با ذخیره هر فایل، خروجی جدید بسازد دستور زیر را بزنید:

npm run watch

🖥️

۵. لود کردن استایل در خروجی بلید

فایل ویوی خود (مثلاً resources/views/welcome.blade.php) را باز کرده و فایل CSS کامپایل شده را با هلپر قدیمی لاراول فراخوانی کنید:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

🛠️ جمع‌بندی؛ آماده‌سازی فرانت‌اند برای پروژه‌های بزرگ

🎯

نکته پایانی برای هنرجویان

یادگیری نصب اصولی تلویند، اولین قدم برای ورود به دنیای حرفه‌ای فرانت‌اند است. وقتی بتوانید استایل‌های خود را به درستی پیکربندی کنید، در آینده راحت‌تر می‌توانید بخش ظاهر سایت را با بخش‌های پیچیده بک‌اند لاراولی مثل طراحی API، متدهای ایمن Laravel Security و ارتباط با REST APIها مچ کنید و پلتفرم‌های قدرتمندی مانند یک طراحی سایت شرکتی یا حتی یک طراحی فروشگاه اینترنتی مقیاس‌پذیر خلق کنید.