نحوه نصب Tailwind CSS 3 در لاراول 9 با Vite 3، در این مطلب یاد میگیرم به چه شکل فریم ورک Tailwind رو در نسخه 9 لاراول نصب کنیم.
آموزش نصب Tailwind CSS 3 در لاراول 9 با Vite 3
در نسخه 9 اولیه از طریق فایل “webpack.mix.js’ تنظیمات فراخوانی Tailwind رو انجام می دادیم اما “Vite” جایگزین “webpack” شد و در حال حاضر اگر آخرین نسخه 9 لاراول مثل 9.19 رو نصب کنید فایل “vite.config.js” را در روت سایت مشاهده خواهید کرد. (توضیحات بیشتر)
Tailwind CSS چیست؟
Tailwind یک چارچوب یا فریم ورک CSS مدرن است. این یک چارچوب مبتنی بر ابزار اولیه است و مجموعه ای منحصر به فرد از کلاس های کاربردی را در اختیار شما قرار می دهد که روند توسعه را بسیار آسان می کند و منجر به ایجاد یک طراحی منحصر به فرد می شود. Utility-first CSS سریع، قوی و بسیار کارآمد کدنویسی را بدون دردسر می کند. Tailwind CSS کامپوننت یا کلاس های از قبل تعریف شده ای برای طراحی یک ویجت خاص را ارائه نمی دهد. این بدان معنی است که شما کاملاً آزاد هستید که نوحه طراحی و اجزای وب سایت را سفارشی کنید.
لاراول چیست؟
لاراول یک چارچوب کامل برای توسعه اپلیکیشن است. یک چارچوب PHP منبع باز که در آن توسعه اپ ما قوی و آسان است. مهمتر از همه، حفظ کیفیت کد هنگام استفاده از Tailwind CSS با Laravel در مقایسه با CSS سفارشی آسان تر است.
Vite چیست؟
Vite (کلمه فرانسوی به معنی “سریع”، تلفظ /vit/، مانند “veet”) یک ابزار ساخت است که هدف آن ارائه یک تجربه توسعه سریعتر و ناب برای پروژه های وب مدرن است.
آموزش نصب Tailwind CSS 3 در لاراول 9 با Vite 3
مرحله 1: پروژه لاراول را نصب کنید.
اگر لاراول رو نصب نکردید، به ترمینال برید، دستور زیر رو تایپ کنید و یک برنامه لاراول جدید ایجاد کنید.
composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-tailwind3-vite3
مرحله 2: Tailwind CSS را نصب کنید.
در این مرحله ما باید tailwind و وابستگی های آن (PostCSS و autoprefixer) رو نصب کنیم.
npm install -D tailwindcss postcss autoprefixer
//next
npx tailwindcss init -p
با این کار دو فایل در فهرست اصلی شما ایجاد می شود: tailwind.config.js و postcss.config.js.
فایل پیکربندی Tailwind جایی است که شما سفارشی سازی و قالب بندی را برای برنامه خود اضافه می کنید. همچنین جایی است که به Tailwind می گویید چه مسیرهایی را برای صفحات و اجزای شما جستجو کند.
شما باید یک مسیر الگو را در tailwind.config.js اضافه کنید.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
],
theme: {
extend: {},
},
plugins: [],
}
مرحله 3: Tailwind CSS را به app.css اضافه کنید.
// resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
مسیر “resources/css/app.css” رو در فایل “vite.config.js” حذف کنید.
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
export default defineConfig({
plugins: [
laravel({
//input: ["resources/css/app.css", "resources/js/app.js"],
input: ["resources/js/app.js"],
refresh: true,
}),
],
});
در مرحله بعد، باید CSS خود را از طریق جاوا اسکریپت وارد کنید. به طور معمول، این کار در فایل منابع/js/app.js برنامه شما انجام می شود:
// resources/js/app.js
import "./bootstrap";
import "../css/app.css";
مرحله 4: Vite را به لاراول بلید یا همان فایل view به شکل زیر وارد کنید.
// resources/views/welcome.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Install Tailwind CSS 3 in Laravel 9 With Vite 3 - iTsir.ir</title>
@vite('resources/js/app.js')
</head>
<body data-rsssl=1 class="antialiased">
<div class="flex justify-center items-center h-screen">
<h1 class="text-3xl text-purple-600 font-bold">How to Install Tailwind CSS 3 in Laravel 9 With Vite 3 - TechvBlogs</h1>
</div>
</body>
</html>
مرحله 5: سرور توسعه Vite را اجرا کنید.
دستور زیر را برای راه اندازی سرور Vite Development اجرا کنید:
npm run dev
مرحله 6: سرور لاراول را اجرا کنید.
php artisan serve
تمام!
جمع بندی
در این مقاله سعی کردم علاوه بر تعاریف اولیه نصب Tailwind CSS در لاراول نسخه 9.19 که همراه vite ارائه شد رو به شکل ساده توضیح بدم. امیدوارم این مطلب براتون مفید واقع شده باشه.
لطفا اگر نظر و پیشنهادی در خصوص مطالب و پیشبرد آنها دارید خوشحال میشم در قسمت دیدگاه ها مطرح بفرمایید.
بدون هیچ خطایی نصب شد ممنون
آرزوی موفقیت در پروژه های پیش رو