Tailwind Css CLI ব্যাক্ষ্যা সহ Install প্রসেস

Tailwind Css CLI ব্যাক্ষ্যা সহ Install প্রসেস

Abdullah Al Shamim's photo
Abdullah Al Shamim
·

2 min read

  • সবার প্রথমে আমাদের একটা 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 কমান্ড দিলে আমাদের প্রসেস করে একটা Output css ফাইল বানিয়ে দিবে। এবার Terminal-এ নতুন আর একটা Tab নিব এবং npm run build কমান্ড দিব, তাহলে একটা Server Link তৈরি হবে। সেখানে গেলেই আমরা আমাদের Tailwind CSS এর Output দেখতে পারবো। ধন্যবাদ।
Tailwind CSS