ল্যারাভেলে ডিফল্ট ভাবে Tailwind CSS ব্যবহার করা হয়। আমরা যখন আর্টিসান কমান্ড ব্যবহার করে কোন ভিউ জেনারেট করি, সাধারণত জেনারেটেড এইচটিএমএল এ টেলউইন্ড সিএসএস ক্লাস ব্যবহার করা হয়।
তো ল্যারবেলে সহজে Tailwind CSS ব্যবহার করতে চাইলে CDN থেকে ব্যবহার করতে পারি। অথবা npm এর মাধ্যমে ইন্সটল করে নিতে পারি। যদি খুব সহজ ভাবে ব্যবহার করতে চাই, তাহলে এভাবে লেআউট ফাইলে ব্যবহার করতে পারি।
<script src="https://cdn.tailwindcss.com/"></script>
যেমন welcome.blade.php ফাইলে নিচের কোড যোগ করিঃ
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com/"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
যদিও এভাবে ব্যবহার করা ওয়াইজ হবে না। কারণ এতে পুরো CSS ফাইল লোড হবে। যা মোটামুটি অনেক বিশাল।
Tailwind CSS এর একটা সুবিধা হচ্ছে প্রজেক্ট বিল্ড করার সময় যে ক্লাস গুলো ব্যবহার করা হয় প্রজেক্টে, শুধু ঐ ক্লাস গুলো দিয়ে CSS ফাইল জেনারেট করে প্রজেক্টে যুক্ত করে। আর এ সুবিধা পেতে হলে npm ব্যবহার করে টেলউইন্ড সিএসএস প্রজেক্টে ইন্সটল করতে হবে।
ল্যারাভেলে টেলউইন্ড সিএসএস ইন্সটল
ল্যারাভেলে কিভাবে টেলউইন্ড সিএসএস যোগ করতে হয়, তার অফিশিয়াল গাইড পাওয়া যাবে এখানে। আমি জাস্ট অফিসিয়াল গাইডকে কপি করছি।
১ – ইন্সটল
npm install -D tailwindcss postcss autoprefixer
২ – ইনিশিয়ালাইজঃ
npx tailwindcss init -p
যা আমাদের প্রজেক্টে tailwind.config.js এবং postcss.config.js. এ দুইটা ফাইল যুক্ত করবে।
৩ – কনফিগারেশনঃ কোন কোন ফাইলে টেলউইন্ড সিএসএস যোগ করবে, তা ডিফাইন করতে হয় tailwind.config.js। ইনিশিয়ালি আমরা শুধু মাত্র blade ফাইলে যুক্ত করব। তাই tailwind.config.js এর কন্টেন্ট অ্যারেতে "./resources/*/.blade.php" যোগ করব।
content: [
"./resources/**/*.blade.php"
]
সম্পূর্ন tailwind.config.js হবে নিচের মতঃ
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php"
],
theme: {
extend: {},
},
plugins: [],
}
৪ – টেলউইন্ড সিএসএস ডিরেক্টিভ ./resources/css/app.css ফাইলে যোগ করাঃ
@tailwind base;
@tailwind components;
@tailwind utilities;
এই ডিরেক্টিভ গুলো দিয়ে বলে দিচ্ছি টেলউইন্ডের base, components এবং utilities ক্লাস গুলো যুক্ত করতে।
৫ – টেম্পলেটে টেলউইন্ড সিএসএস যোগ করাঃ
টেম্পলেট ফাইলে ভিট ব্যবহার করে আমরা টেলউইন্ড সিএসএস যোগ করব। যেমনঃ
@vite(['resources/css/app.css'])
লারাভেল প্রজেক্টের resources ফোল্ডারের ভেতর থাকা সিএসএস কিন্তু ওয়েব এক্সেস করা যায় না। শুধু মাত্র পাবলিক ফোল্ডারের ফাইল ওয়েব এক্সেস করা যায়। ভিট রিসোর্স ফোল্ডারের সিএসএস এবং JS বিল্ড করে দিবে এবং পাবলিক ফোল্ডারে যোগ করে দিবে। আর তার জন্য নিচের কমান্ড লিখতে হবেঃ
npm run build
যদিও ডেভেলপমেন্টের সময় আমরা নিচের কমান্ড ব্যবহার করবঃ
npm run dev
এবার যে কোন একটা ভিউতে টেলউইন্ড সিএসএস যোগ করে দেখতে পারি, যেমন welcome.blade.php ফাইলে যোগ করিঃ
<!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>
টেলউইন্ড-ইউআই ওয়েব সাইটে টেলউইন্ডের দারুণ সব কম্পোনেন্টস রয়েছে। যা আমরা ব্যবহার করতে পারি। যেমন একটা প্রাইসিং কম্পোনেন্টঃ
<!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>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl sm:text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Simple no-tricks pricing</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">Distinctio et nulla eum soluta et neque labore quibusdam. Saepe et quasi iusto modi velit ut non voluptas in. Explicabo id ut laborum.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none">
<div class="p-8 sm:p-10 lg:flex-auto">
<h3 class="text-2xl font-bold tracking-tight text-gray-900">Lifetime membership</h3>
<p class="mt-6 text-base leading-7 text-gray-600">Lorem ipsum dolor sit amet consect etur adipisicing elit. Itaque amet indis perferendis blanditiis repellendus etur quidem assumenda.</p>
<div class="mt-10 flex items-center gap-x-4">
<h4 class="flex-none text-sm font-semibold leading-6 text-indigo-600">What’s included</h4>
<div class="h-px flex-auto bg-gray-100"></div>
</div>
<ul role="list" class="mt-8 grid grid-cols-1 gap-4 text-sm leading-6 text-gray-600 sm:grid-cols-2 sm:gap-6">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
Private forum access
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
Member resources
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
Entry to annual conference
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
Official member t-shirt
</li>
</ul>
</div>
<div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
<div class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
<div class="mx-auto max-w-xs px-8">
<p class="text-base font-semibold text-gray-600">Pay once, own it forever</p>
<p class="mt-6 flex items-baseline justify-center gap-x-2">
<span class="text-5xl font-bold tracking-tight text-gray-900">$349</span>
<span class="text-sm font-semibold leading-6 tracking-wide text-gray-600">USD</span>
</p>
<a href="#" class="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get access</a>
<p class="mt-6 text-xs leading-5 text-gray-600">Invoices and receipts available for easy company reimbursement</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
উপরের কোডটা হচ্ছে একটা প্রাইসিং কম্পোনেন্ট। আউটপুটঃ
আমাদের মাথায় রাখতে হবে যে ডেভেলপ করার সময় ভিট সার্ভার npm run dev কমান্ড ব্যবহার করে চালু রাখতে হবে। আর তা না হলে Vite manifest not found at: ... এমন এরর আসবে। আর ডেভ সার্ভার চালু অবস্থায় আমরা যদি প্রজেক্টে কোন পরিবর্তন করি, তাহলে অটোমেটিক সাইট লোড হবে। যাকে বলে Instantaneous Hot Module Replacement (HMR)। পরিবর্তন দেখার জন্য নিজ থেকে গিয়ে রিলোড করা লাগবে না।
এডিটর প্লাগিন – ভিজুয়াল স্টুডিও কোডের জন্য টেলউইন্ড সিএসএস এর প্লাগিন রয়েছে। যা দিয়ে কোড হাইলাইট, অটোম্যাটিক ক্লাস সর্টিং এবং ইন্টেলিসেন্স সুবিধা পাওয়া যাবে।