Tailwind Css CLI ব্যাক্ষ্যা সহ Install প্রসেস
Love to Explore PHP, Vue, Laravel and WordPress 💻
সবার প্রথমে আমাদের একটা Directory বানাতে হবে। আপনার Project এর নাম দিয়ে একটি Directory বানিয়ে ফেলুন। এরপর যেকোনো একটা Terminal ব্যবহার করে এই Directory তে ঢুকুন।
npm install -D tailwindcss autoprefixer viteএই কমান্ড Terminal-এ দিবো। এক্সট্রা হিসেবেautoprefixerওviteআছে। এইautoprefixerব্যবহার করেছি যেনো যেকোনো Browser এ সবcssকাজ করে। আরviteব্যবহার করেছি Live Server জন্য। আর ভবিষ্যতে Build করার জন্যও এটা দরকার পড়বে।npx tailwindcss initএই কমান্ড Terminal-এ ব্যবহার করবোtailwind.config.jsফাইল তৈরি হওয়ার জন্য। আর এই ফাইলের ভিতরে আমরা নিচের কোডগুলো লিখে দিব…
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*"],
theme: {
extend: {},
},
plugins: [],
}
💡 এইখানের content এর ভিতরে *(Star) চিহ্ন দিয়ে বোঝানো হয়েছে যে এই Directory-র ভিতরে যেখানে Tailwind CSS ব্যবহার করা হবে সেখান থেকেই যেনো কাজ করে। আলাদা ভাবে Path বা html/css ফাইলও চিনিয়ে দেওয়া যায়।
- এরপর Directory তে একটা
srcনামে ফোল্ডার বানাবো।srcফোল্ডারের ভিতরেtailwind.cssনামে একটা ফাইল নিব। আর এই ফাইলের ভিতরে নিচের কোড দিয়ে দিব…
@tailwind base;
@tailwind components;
@tailwind utilities;
- এবার
package.jsonফাইলে চলে যাবো এবং নিচের কোডটাdevDependenciesএর নিচে দিয়ে দিবো…
,
"scripts": {
"dev": "npx tailwindcss -i ./src/tailwind.css -o ./output/style.css --minify --watch",
"build": "vite"
}
💡 এখানে "dev" এর ভিতরের কোডটা ব্যবহার করবো বিভিন্ন জায়গার css প্রসেস করে এক জায়গায় এনে Output দিয়ে দেওয়ার জন্য। এটাই হবে Directory-র মূল css ফাইল।
এখানে -i দিয়ে বোঝানো হয়েছে কোন ফাইলটা input হিসেবে কাজ করবে আর -o দিয়ে বোঝানো হয়েছে output হিসেবে কোথায় যাবে। যে নামের ফাইল বানানো হবে সেই নামই এখানে দিয়ে দিতে হবে। --minify ফ্ল্যাগ ব্যবহার করা হয়েছে যেন আমাদের css ফাইলটার জায়গা কম লাগে আর --watch ফ্ল্যাগ হলো আমরা যদি কোনো ফাইলে পরিবর্তন করি তাহলে Live Server এ তা সাথে সাথে আপডেট হয়ে যাবে।
আর “build” এর ভিতরের vite দিয়ে আমাদের প্রজেক্টের Live Server চালু করা যাবে।
এই "dev" এবং “build” পরবর্তিতে Terminal এ ব্যবহার করবো। এগুলো আপনি চাইলে নাম হিসেবে যে কোনো কিছু দিতে পারেন।
- এবার Directory-র যেকোনো জায়গায় একটা
index.htmlফাইল বানাবো আর নিচের কোডটা দিয়ে দিব…
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/output/style.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello From SHAMIM</h1>
</body>
</html>
💡 এই html ফাইলে আমরা ৫ নম্বর স্টেপে একটা css ফাইল বানিয়েছি, এটা মূল css ফাইল। এই css ফাইলটা ওইখানে Link করিয়ে দিতে হবে।
- সর্বশেষ Terminal-এ
npm run devকমান্ড দিলে আমাদের প্রসেস করে একটা Outputcssফাইল বানিয়ে দিবে। এবার Terminal-এ নতুন আর একটা Tab নিব এবংnpm run buildকমান্ড দিব, তাহলে একটা Server Link তৈরি হবে। সেখানে গেলেই আমরা আমাদের Tailwind CSS এর Output দেখতে পারবো। ধন্যবাদ।
