PluginizeLab

Author: Aminur Islam

  • একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস

    একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস

    আমরা যারা ওয়েব ডিজাইন সেক্টরে আছি বা আসব বলে ভাবছি তাদের সিএসএস ফ্রেমওয়ার্ক এর শুরুটা হয়ত বুটস্ট্র্যাপ দিয়েই হয়েছে বা হবে, কারণ এটি নতুনদের জন্য শুরু করাটা খুব সহজ এবং আমাদের দেশে এর চাহিদাও অনেক। কিন্তু বেশ কয়েক বছর যাবৎ একটি সিএসএস ফ্রেমওয়ার্ক এর নাম আমরা খুবই শুনে আসছি (বলতে পারেন ট্রেন্ড) সেটি হল টেইলউইন্ড সিএসএস। আর যারা বিভিন্ন জাভাস্ক্রিপ্ট লাইব্রেরি, ফ্রেমওয়ার্ক নিয়ে কাজ করেন বা শুরু করেছেন যেমনঃ React, Vue ইত্যাদি তাদের কাছেতো টেইলউইন্ড সিএসএস নামটা খুবই পরিচিত। এমনকি বর্তমান সময়ে টেইলউইন্ড সিএসএস সবচেয়ে জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক। আজকে আমি চেষ্টা করব খুব সহজভাবে টেইলউইন্ড সিএসএস সম্পর্কে লিখতে, যেন নতুনরা খুব সহজে টেইলউইন্ড সিএসএস শুরু করতে পারেন।



    সংক্ষেপে টেইলউইন্ড সিএসএসঃ

    টেইলউইন্ড সিএসএস কে ইউটিলিটি ফার্স্ট সিএসএস ফ্রেমওয়ার্ক বলা হয়। এখানে আপনি ইউটিলিটি সিএসএস ক্লাস ডিরেক্ট এইচটিএমএল ফাইলে লিখে সব ধরনের ডিজাইন করতে পারবেন। টেইলউইন্ড সিএসএস ব্যবহার করলে আপনাকে এইচটিএমএল ফাইলের বাহিরে আসলে তেমন কিছু করতে হবে না। এটি অনেক fast, flexible এবং relaible। টেইলউইন্ড সিএসএস মূলত অনেক গুলো ইউটিলিটি সিএসএস ক্লাসের সমন্বয়ে তৈরি তাই ডেভেলপমেন্ট টাইমে সিএসএস ফাইল সাইজ বেশি হলেও যখন প্রোডাকশনের জন্য বিল্ড করা হয় তখন শুধু এইচটিএমএল ফাইলে ব্যবহৃত সিএসএস ক্লাস গুলোর জন্য যে স্টাইল গুলো আছে শুধুমাত্র সেই স্টাইল গুলোকে জেনারেট করে খুব ছোট একটা সিএসএস ফাইল আমাদেরকে দেয়। যেখানে কোন অপ্রয়োজনীয় অথবা ডুপ্লিকেট সিএসএস থাকে না।



    টেইলউইন্ড সিএসএস কিভাবে কাজ করেঃ

    টেইলউইন্ড সিএসএস মূলত যেকোনো এইচটিএমএল ফাইল, জাভাস্ক্রিপ্ট কম্পোনেন্ট অথবা যেকোন ধরনের টেম্পলেট ফাইল থেকে সিএসএস ক্লাস নামগুলো স্ক্যান করে তারপর স্ক্যানকৃত সিএসএস এর জন্য যে স্টাইল গুলো আছে সেগুলো জেনারেট করে আমাদের কে একটা স্ট্যাটিক সিএসএস ফাইল দেয় যে ফাইল টা এইচটিএমএল ফাইল এর হেড সেকশন এ কল করতে হয়।



    টেইলউইন্ড সিএসএস ইনস্টলেশনের ধাপসমূহঃ

    আমরা বেশ কয়েকভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইনস্টলেশন করতে পারি। যেমনঃ Tailwind CLI ব্যবহার করে, PostCSS ব্যবহার করে এবং CDN ব্যবহার করে। আপনার কাছে মনে হতে পারে CDN ব্যবহার করা সহজ কিন্তু এখানে সবচেয়ে বড় সমস্যা হল এখানে আপনি টেইলউইন্ড কনফিগারেশন এবং কাস্টমাইজেশন ফিচার পাবেন না। আমি এখানে Tailwind CLI ব্যবহার করে কিভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইন্সটল করবেন সেইটা দেখাব

    ধাপ-১ঃ
    প্রথমে আমাদের প্রোজেক্ট এ node (আপনার মেশিনে অবশ্যই Node.js ভার্সন 12.13.0 অথবা এর চেয়ে আপগ্রেড ভার্সন ইন্সটল থাকতে হবে) initialize করে নিতে হবে। প্রোজেক্ট ফোল্ডার তৈরি করুন এবং প্রোজেক্ট ফোল্ডার এ টার্মিনাল ওপেন করে নিম্নের কমান্ড টা টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।

    npm init -y

    ধাপ-২ঃ
    এখন দেভ ডিপেন্ডেন্সি হিসাবে টেইলউইন্ড সিএসএস ইন্সটল করতে হবে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন। 

    npm install -D tailwindcss
    Enter fullscreen mode

    Exit fullscreen mode

    ধাপ-৩ঃ
    এখন tailwind.config.js ফাইল তৈরি করতে হবে যেখানে টেইলউইন্ড সিএসএস এর সব ধরনের কনফিগারেশন থাকে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন। 

    npx tailwindcss init
    Enter fullscreen mode

    Exit fullscreen mode

    ধাপ-৪ঃ
    tailwind.config.js ফাইল এর content array এর মধ্যে সকল টেম্পলেট এর এক্সটেনশন লিখে দিতে হবে যেখান থেকে টেইলউইন্ড সিএসএস ইউটিলিটি স্ক্যান করবে। মানে আমরা যে যে ফাইল এ টেইলউইন্ড সিএসএস এর সাপোর্ট চাই সেগুলো। যেমনঃ আমরা এখানে শুধু এইচটিএমএল ফাইল এ টেইলউইন্ড সিএসএস লিখব তাই এখানে .html লিখেছি content array এর মধ্যে। 

    //tailwind.config.js file
module.exports = {
content: ["*.{html}"],
theme: {
extend: {},
},
plugins: [],
}
    Enter fullscreen mode

    Exit fullscreen mode

    ধাপ-৫ঃ
    এখন ২টা ফোল্ডার তৈরি করতে হবে। আমি ফোল্ডার এর নাম দিলাম যথাক্রমে src এবং dist। src ফোল্ডার এর মধ্যে input.css নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব এবং dist ফোল্ডার এর মধ্যে output.css নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব। input.css ফাইলটি মূলত Tailwind নিজে ব্যবহার করবে, যেখানে টেইলউইন্ড সিএসএস এর সকল ডিরেক্টিভ গুলো থাকবে। এই ডিরেক্টিভ গুলোর মাধ্যমে টেইলউইন্ড সিএসএস এর base, components এবং utilities সিএসএস গুলো কল হবে। input.css ফাইলে আমাদের নিম্নের কোড লিখতে হবে। 

    /* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
    Enter fullscreen mode

    Exit fullscreen mode

    ধাপ-৬ঃ
    এখন টেইলউইন্ড ডেভেলপার মোডে কিভাবে বিল্ড হবে সেটা বলে দেয়ার জন্য package.json ফাইলে আমাদেরকে একটি বিল্ড স্ক্রিপ্ট লিখে দিতে হবে। এই স্ক্রিপ্টের মাধ্যমে Tailwind CLI টেম্পলেট ফাইল স্ক্যান করে স্ট্যাটিক সিএসএস বিল্ড করবে। 

    "scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css -w"
}
    Enter fullscreen mode

    Exit fullscreen mode

    এখানে -i এর পরে ইনপুট সিএসএস ফাইলের এর পাথ, -o এর পরে অউটপুট সিএসএস ফাইলের পাথ নির্দেশ করে দিতে হবে এবং -w এর মাধ্যমে আমরা ওয়াচ ফ্ল্যাগ চালু করে দিয়েছি যাতে tailwind.config.js বা input.css ফাইলে কোন পরিবর্তন হলে অটোমেটিক টেইলউইন্ড বিল্ড হয়।

    ধাপ-৭ঃ
    এখন output.css ফাইলটি এইচটিএমএল ফাইলের হেডট্যাগ এর মধ্যে কল করতে হবে। 

    <link rel="stylesheet" href="dist/output.css">
    Enter fullscreen mode

    Exit fullscreen mode

    ধাপ-৮ঃ
    আমাদের প্রোজেক্ট এখন ১০০% প্রস্তুত টেইলউইন্ড সিএসএস লেখার জন্য। যেকোনো এইচটিএমএল ট্যাগের ক্লাস হিসাবে টেইলউইন্ড সিএসএস ইউটিলিটি ক্লাস গুলো লিখলেই প্রত্যাশিত অউটপুট পেয়ে যাবেন। কিন্তু এর আগে টার্মিনাল এ আপনাকে আর একটা কমান্ড চালু রাখতে হবে সেইটা নিম্নরূপঃ 

    npm run build
    Enter fullscreen mode

    Exit fullscreen mode

    ধাপ-৯ঃ
    এই ধাপটা একেবারে অপশনাল আপনি যদি কোড এডিটরে টেইলউইন্ড সিএসএস এর ইন্টেলিজেন্স সাপোর্ট পেতে চান তাহলে টেইলউইন্ড সিএসএস এর নিজস্ব এক্সটেনশন আপনার কোড এডিটরে ইন্সটল করে নিতে পারেন। যেমনঃ Visual Studio Code এর জন্য Tailwind CSS IntelliSense এক্সটেনশন।
    Tailwind CSS IntelliSense



    ইউটিলিটি-ফার্স্ট ফান্ডামেন্টালসঃ

    আমি আগেও বলেছি টেইলউইন্ড সিএসএস হল অনেক গুলো ইউটিলিটি সিএসএস ক্লাস নিয়ে গঠিত একটা সিএসএস ফ্রেমওয়ার্ক। ইউটিলিটি ফিচার টাই মূলত টেইলউইন্ড সিএসএসকে অন্য সকল সিএসএস ফ্রেমওয়ার্ক থেকে আলাদা করেছে। বুটস্ট্র্যাপ সিএসএস ফ্রেমওয়ার্ক যেমন আমাদেরকে একটা কমপ্লিট কম্পোনেন্ট দেয় অপরদিকে টেইলউইন্ড সিএসএস ফ্রেমওয়ার্ক আমাদেরকে এমন কমপ্লিট কম্পোনেন্ট দেয় না। বুটস্ট্র্যাপের একটা কম্পোনেন্ট এর মধ্যে margin, padding, width, height, font-size, color এসব আগে থেকেই বলা থাকে আমরা শুধু সেই কম্পোনেন্ট এর এইচটিএমএল মার্কআপটা আমাদের এইচটিএমএল ফাইলে বসালেই সুন্দর একটা কার্ড কম্পোনেন্ট পেয়ে যাই। অন্যদিকে টেইলউইন্ড সিএসএস এমন কম্পোনেন্ট না দিয়ে margin, padding এর মত লো লেভেল সিএসএস দিয়ে তৈরিকৃত অসংখ্য ইউটিলিটি ক্লাস আমাদেরকে প্রোভাইড করে যেগুলো ব্যবহার করে আমরা নিজেদের ইচ্ছা মতো ডিজাইন করতে পারি।

    কোন একটা ডিজাইন যদি আমরা ভ্যানিলা সিএসএস ব্যবহার করে করতে চাই তাহলে আমাদেরকে ২টা বিষয় অবশ্যই করতে হয় তা হল অনেকগুলো অর্থবধক ক্লাস এর নাম লিখতে হয় এবং সেই নাম গুলো ধরে ধরে সিএসএস ফাইলে লাইন বাই লাইন সিএসএস লিখতে হয়। এক্ষেত্রে যেমন আমাদের ক্লাস এর অর্থবধক নাম বের করতে যেয়ে সময় নষ্ট হয় আবার সেইসাথে সিএসএস গুলো নিজে থেকে লিখতে হয় এবং একটা সময় দেখা যায় কোড ডুপ্লিকেশন প্রব্লেমটাও চলে আসে।

    অন্যদিকে ইউটিলিটি সিএসএস ব্যবহার করলে আমাদেরকে আর ক্লাস নাম নিয়ে ভাবার দরকার পরে না, টেইলউইন্ড এর ইউটিলিটি ক্লাস গুলোকে ডেকে আনলেই কাজ হয়ে যায়। আপনাদের মনে হতে পারে এতো এতো ইউটিলিটি ক্লাস কিভাবে মনে রাখবো, ভয়ের কিছু নেয় কিছুই মনে রাখতে হবে না, টেইলউইন্ড এর প্রায় সব ইউটিলিটি ক্লাসই ডিক্লারেটিভ এছাড়াও টেইলউইন্ড এর নিজস্ব ইন্টেলিজেন্স সাপোর্ট আপনার কোড এডিটর এ থাকলেতো এসব নিয়ে আপনাকে তেমন কোন চিন্তাই করতে হবে না। কিছুদিন নিয়মিত প্র্যাকটিস করলে সব কিছু আপনার আয়ত্তে চলে আসবে। আরেকটা বিষয় জানা থাকা জরুরী টেইলউইন্ড সিএসএস এর সমস্ত হিসাব করা হয় rem একক দিয়ে, যেমনঃ p-6 মানে padding-1.5rem। চলুন একটা উদাহরণ দেখা যাকঃ
    Card 

    <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
        <div class="shrink-0">
                <img class="h-12 w-12" src="https://aiarnob.com/frontend/assets/images/favicons/apple-touch-icon.png" alt="ChitChat Logo">
        </div>
        <div>
                <div class="text-xl font-medium text-black">AI Arnob</div>
                <p class="text-slate-500">You have a new message!</p>
    </div>
</div>
    Enter fullscreen mode

    Exit fullscreen mode

    উপড়ের সুন্দর কার্ড টা ডিজাইন করার জন্য কিন্তু আমাদের কোন সিএসএস লিখতে হয় নাই জাস্ট কিছু টেইলউইন্ড ইউটিলিটি ক্লাস ব্যবহার করা হয়েছে। লক্ষ করলে দেখবেন যে, এখানে ইউটিলিটি ক্লাসগুলো কতটা ডিক্লারেটিভ, যেমনঃ

    • p-6 এর মাধ্যমে চারপাশে padding দিয়েছি 1.5rem।
    • max-w-sm এর মাধ্যমে ম্যাক্সিমাম উইড্থ দিয়েছি sm মানে 24rem।
    • mx-auto এর মাধ্যমে মার্জিন বামে এবং ডানে অটো করেছি।
    • bg-white এর মাধ্যমে ব্যাকগ্রাউন্ড কালার সাদা দিয়েছি।
    • rounded-xl এর মাধ্যমে বর্ডার রউন্ড করেছি।
    • shadow-lg এর মাধ্যমে বক্স শ্যাডো অ্যাপ্লাই করেছি।
    • flex এর মাধ্যমে ডিভ টাকে ডিসপ্লে ফ্লেক্স করেছি।

    এতক্ষণে হয়ত বুঝে গিয়েছেন কিভাবে টেইলউইন্ড ইউটিলিটি ক্লাসগুলো কাজ করে। টেইলউইন্ড সিএসএস এর খুবই সুন্দর একটা ডকুমেন্টেশন আছে এবং সার্চ ফিচার টাও অনেক দুর্দান্ত কাজ করে, আপনার যা প্রয়োজন জাস্ট সার্চ বক্স এ লিখুন রেজাল্ট চলে আসবে চোখের পলকে।



    বিভিন্ন ধরনের স্টেট হ্যান্ডল করাঃ (Hover, Focus, and Other States)

    এতক্ষণে হয়ত আপনার মনে প্রশ্ন জেগেছে যে, টেইলউইন্ড সিএসএস এর মাধ্যমে আমরা কিভাবে বিভিন্ন ধরনের স্টেট ম্যানেজ করতে পারি। এটার ও একটা খুব ভালো সমাধান আছে। যেকোনো ইউটিলিটি ক্লাসের সামনে আমাদেরকে জাস্ট মডিফায়ার লিখতে হবে। নিম্নের উদাহরণ তা দেখলেই বুঝতে পারবেন।
    State 

    <button class="bg-sky-600 hover:bg-sky-700 text-white px-7 py-2 rounded-full">
        Click me
</button>
    Enter fullscreen mode

    Exit fullscreen mode

    এখানে স্বাভাবিক ভাবে বাটন ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে bg-sky-600 এবং হুভার স্টেট এ ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে hover:bg-sky-700। এখানে hover: টা হল মডিফায়ার। এভাবে :focus, :active, :first-child, :required, ::before, ::after, ::placeholder, ::selection এরকম আরও অনেক মডিফায়ার ব্যবহার করে ইউটিলিটি ক্লাস লেখা যায়। বিভিন্ন স্টেট সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।



    রেস্পন্সিভ ডিজাইনঃ

    টেইলউইন্ড সিএসএস এর বিভিন্ন রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট আছে যেগুলো ব্যবহার করে জটিল জটিল রেস্পন্সিভ ইন্টারফেস ডিজাইন করা যায়। টেইলউইন্ড সিএসএস মোবাইল ফার্স্ট এপ্রোচ এ কাজ করে তাই রেস্পন্সিভ এর জন্য ডিফল্ট যে ৫ ধরনের ব্রেকপয়েন্ট(চাইলে আপনি ইচ্ছামত কাস্টোমাইজ করতে পারবেন) আছে সেগুলোতে min-width উল্লেখ করা। ব্রেকপয়েন্টগুলো নিম্নরূপঃ
    |ব্রেকপয়েন্ট প্রিফিক্স|মিনিমাম উইড্থ|সিএসএস মিডিয়া কুয়েরি|
    |-|-|-|
    |sm|640px|@media (min-width: 640px) { ... }|
    |md| 768px |@media (min-width: 768px) { ... }|
    |lg| 1024px |@media (min-width: 1024px) { ... }|
    |xl| 1280px |@media (min-width: 1280px) { ... }|
    |2xl| 1536px |@media (min-width: 1536px) { ... }|

    সরাসরি কোন ইউটিলিটি ক্লাস লিখলে সেটি সবগুলো ডিভাইসে কাজ করে কিন্তু যখন কোন ইউটিলিটি ক্লাসের এর আগে রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট যেমনঃ sm: লেখা হবে তখন সেটি ডিভাইস উইড্থ 768px এর সমান বা এর চেয়ে বড় হলে কাজ করবে। 

    <img class="w-16 md:w-32 lg:w-48" src="...">
    Enter fullscreen mode

    Exit fullscreen mode

    এখানে ইমেজ এর ডিফল্ট উইড্থ ১৬, মিডিয়াম স্ক্রীন এর জন্য হবে ৩২ এবং লার্জ স্ক্রীন এর জন্য হবে ৪৮। রেস্পন্সিভ ডিজাইন সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।



    ডার্ক এবং লাইট মোডঃ

    টেইলউইন্ড সিএসএস ব্যবহার করে খুব সহজে আপনি আপনার ওয়েবসাইটে ডার্ক মোড এনাবল করতে পারবেন। সাইটকে ডার্ক করার জন্য টেইলউইন্ড সিএসএস dark নামে একটি ভারিয়ান্ট দেয়, যেটি যেকোনো ইউটিলিটি ক্লাস এর সামনে দিলে তখন তা শুধুমাত্র ডার্ক মোডে কাজ করবে। 

    <button class="bg-sky-600 hover:bg-sky-700 dark:bg-sky-200">
  Save changes
</button>
    Enter fullscreen mode

    Exit fullscreen mode

    উপরের কোডে dark:bg-sky-200 লেখা হয়েছে যার ফলে ডার্ক মোডে বাটনটির ব্যাকগ্রাউন্ড কালার হবে bg-sky-200।

    ডার্ক মোড স্ট্রাটেজি
    ডার্ক মোড স্ট্রাটেজি ২ ধরনের হয় class স্ট্রাটেজি এবং media স্ট্রাটেজি। tailwind.config.js ফাইলে ডার্ক মোড স্ট্রাটেজি বলে দিতে হবে। 

    //tailwind.config.js file
module.exports = {
  darkMode: 'class',
  // ...
}
    Enter fullscreen mode

    Exit fullscreen mode

    আপনি যদি কাস্টম বাটন ব্যবহার করে ডার্ক এবং লাইট মোড toggle করতে চান তাহলে class স্ট্রাটেজি ব্যবহার করতে পারেন আর যদি চান যে অপারেটিং সিস্টেমের প্রেফারেন্স এর উপর নির্ভর করে সাইট ডার্ক অথবা লাইট হবে তাহলে media স্ট্রাটেজি ব্যবহার করতে হবে। ডার্ক মোড সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।



    পুনরায় ব্যবহারযোগ্য স্টাইলঃ

    আমাদের প্রোজেক্ট এ অনেক সময় একই ডিজাইনের কম্পোনেন্ট একাধিক জায়গায় ব্যবহার করতে হয় তখন দেখা যায় ইউটিলিটি ক্লাসগুলোর ডুপ্লিকেশন চলে আসে। যেমনঃ নিম্নের ডিজাইনে রাউন্ডেড অবতার ডিজাইন বার বার রিপিট করা হয়েছে যার ফোলে একই ইউটিলিটি ক্লাস এর ডুপ্লিকেশন তৈরি হয়েছে।
    usercard 

    <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg">
        <div class="flex items-center space-x-2 text-base">
                <h4 class="font-semibold text-slate-900">Users</h4>
            <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">100</span>
        </div>
        <div class="mt-3 flex -space-x-2 overflow-hidden">
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1550525811-e5869dd03032" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263" alt=""/>
        </div>
        <div class="mt-3 text-sm font-medium">
                <a href="#" class="text-blue-500">+ 95 others</a>
        </div>
</div>
    Enter fullscreen mode

    Exit fullscreen mode

    ইউটিলিটি ক্লাস এর ডুপ্লিকেশন সমস্যা সমাধানের জন্য টেইলউইন্ড সিএসএস আমাদের সুন্দর একটা প্রসেস দিয়েছে। input.css ফাইলে @apply ডিরেক্টিভ এর মাধ্যমে আমরা আমাদের নিজেরদের পছন্দ মতো ক্লাস নাম দিয়ে নতুন একটা কম্পোনেন্ট তৈরি করতে পারি। 

    @tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .user-avatar {
    @apply inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover;
  }
}
    Enter fullscreen mode

    Exit fullscreen mode

    এখন আমরা শুধু user-avatar ক্লাস টা ব্যবহার করলেই রাউন্ডেড অবতার ডিজাইনটা পেয়ে যাব। আরেকটা বিষয় @layer ডিরেক্টিভের মাধ্যমে নির্ধারিত হয় আমাদের তৈরি করা স্টাইল base, components নাকি utilities এর আন্ডার এ যাবে সেইটা।

    এখানে আমি চেষ্টা করেছি নতুনদের জন্য টেইলউইন্ড সিএসএস এর বেসিক টা তুলে ধরতে এবং টেইলউইন্ড ভীতিটা দূর করতে। এই লেখাটি মনোযোগ দিয়ে পরে থাকলে আপনি টেইলউইন্ড সিএসএস ব্যবহার করে ডিজাইন করার জন্য প্রাথমিক ভাবে প্রস্তুত। টেইলউইন্ড সিএসএস এর আরও অ্যাডভান্স কিছু বিষয় আছে যেগুলো আপনারা অফিসিয়াল ডকুমেন্টেশন থেকে দেখে নিতে পারেন।

  • How to Install WordPress and Essential Plugins Using WP-CLI

    How to Install WordPress and Essential Plugins Using WP-CLI

    Setting up a WordPress site can be time-consuming if done manually, but with WP-CLI, the process becomes much faster and more efficient. In this tutorial, I’ll show you how to install WordPress along with a few essential plugins using a single command sequence.



    Step 1: Download WordPress Core

    First, you’ll need to download the WordPress core files. This command will download WordPress to a directory called mywebsite. 

    wp core download --path=mywebsite
    Enter fullscreen mode

    Exit fullscreen mode



    Step 2: Create the Configuration File

    Navigate into the newly created mywebsite directory, and create the wp-config.php file with your database credentials: 

    cd mywebsite
wp config create --dbname=silk --dbuser=root --dbpass=root
    Enter fullscreen mode

    Exit fullscreen mode



    Step 3: Create the Database

    Now, create the database using the following command: 

    wp db create
    Enter fullscreen mode

    Exit fullscreen mode



    Step 4: Install WordPress

    Install WordPress using your local URL, site title, and admin credentials: 

    wp core install --url=mywebsite.test --title="Site Title" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev
    Enter fullscreen mode

    Exit fullscreen mode



    Step 5: Install and Activate Plugins

    Finally, install and activate the necessary plugins. In this example, we’ll install WooCommerce and Dokan Lite: 

    wp plugin install woocommerce --activate
wp plugin install dokan-lite --activate
    Enter fullscreen mode

    Exit fullscreen mode



    All-in-One Command Sequence

    For your convenience, here’s the entire process in one continuous block of code. Just copy and paste the code below into your terminal to install WordPress and a few plugins with a single command. 

    wp core download --path=mywebsite
cd mywebsite
wp config create --dbname=silk --dbuser=root --dbpass=root
wp db create
wp core install --url=mywebsite.test --title="Site Title" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev
wp plugin install woocommerce --activate
wp plugin install dokan-lite --activate
    Enter fullscreen mode

    Exit fullscreen mode

    Prerequisite: Install WP-CLI to you machine.

  • Nuxt.js Data Fetching Hook: Async Data.

    Nuxt.js Data Fetching Hook: Async Data.

    In this blog, I am discussing the Nuxt.js asyncData hook. For server-side rendering in Nuxt.js need to use specific hooks. This allows your page to render with all of its required data presents.



    Nuxt.js has two hooks for asynchronous data loading:

    1. The fetch hook
    2. The asyncData hook

    Also, Nuxt.js supports traditional Vue patterns for loading data in your client-side app, such as fetching data in a component’s mounted() hook.



    Some important features of asyncData hook in Nuxt.js:

    1. asyncData works on both server-side & client-side rendering.
    2. asyncData is called every time before loading a component.
    3. You can use only on next pages, not in vue components.
    4. anyncData is called from the server-side before the component is mounted. That’s why you don’t have access to ’this’ keyword inside asyncData().
    5. This method receives the context object as the first argument and you can use it to access core nuxt properties such as route, store, params, app, etc.
    6. The result from asyncData will be merged with data.

    Here is the example of nuxt asyncData using @nuxt/axios library: 

    <template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({params, $axios }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>
    Enter fullscreen mode

    Exit fullscreen mode

    asyncData hook returned the promise and resolved during the route transition. This means that no “loading placeholder” is visible during client-side transitions but you can use the loading bar can be used to indicate a loading state to the user.



    asyncData() on both client-side & server-side:

    To test how asyncData() works on both client-side & server-side, please write the bellow code on your Nuxt.js page. 

    <script>
export default{
    asyncData(context){
        console.log(context);
}
}
</script>
    Enter fullscreen mode

    Exit fullscreen mode

    Server Side Test
    Now reload the page on the browser and look inside your terminal(also can check on browser console panel Nuxt SSR Response) on which your Nuxt.js application running. You can see the context object like the below screenshot. That means its works on the server-side.
    Nuxt.js SSR

    Client Side Test
    You can also check client-side rendering when you come to this page from another Nuxt.js page (The link must be used NuxtLink for linking between pages). Now open your browser dev tools and check the console panel and you see the magic of asyncData().
    Client Side Test Nuxt.js



    How you can use Async data in components:

    We already know that we can not use anyncData hook inside any component but we can use another way for component.
    Make the API call in the asyncData method of the page component and pass the data as props to the sub components. Both Client & Server side rendering will work fine.

    Referance: Nuxt.js Official Data Fetch Hook

  • How to Use Nuxt.js Loading Progress Bar

    How to Use Nuxt.js Loading Progress Bar

    Are you using Nuxt.js on your current project as front-end framework? then you have a great news, Nuxt.js Out of the box gives you its own loading progress bar component that’s shown between routes. You can do anything with the Nuxt.js loading progress bar, customize it, disable it, or can create your own loading progress bar.



    Active & Customize Progress Bar:

    You can activate the progress bar on your Nuxt.js application by adding the loading property of the nuxt.config.js inside the export default { //code here } with the corresponding properties.

    To set a green progress bar with a height of 5px, add the following code inside your project nuxt.config.js file. 

    export default {
  loading: {
    color: 'green',
    height: '5px',
    throttle: 0
  }
}
    Enter fullscreen mode

    Exit fullscreen mode

    You can customize many things, you can change color(color name/color hex code), height, duration, direction for rtl sites, keep animating progress bar when loading takes longer than duration. 

    export default {
  loading: {
    color: 'green',
    height: '5px',
    duration: 1000,
    rtl: true,
    continuous: true
  }
}
    Enter fullscreen mode

    Exit fullscreen mode



    Disable the Progress Bar:

    You can disable the progress bar globally or locally. If you want to disable the progress bar globally then add loading: false in your nuxt.config.js file: 

    export default {
  loading: false
}
    Enter fullscreen mode

    Exit fullscreen mode

    Your can also disable the progress bar for specific page. Add loading: false in the specific page. 

    <template>
  <h1>Contact Us Page</h1>
</template>

<script>
  export default {
    loading: false
  }
</script>
    Enter fullscreen mode

    Exit fullscreen mode



    Custom Loading Progress Bar:

    You can also create your own custom loading progress bar. Inside the component directory create your custom component in LoadingBar.vue: 

    <template>
  <div v-if="loading" class="loading-page">
    <p>Loading...</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      loading: false
    }),
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
  }
</script>

<style scoped>
  .loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 200px;
    font-size: 30px;
    font-family: sans-serif;
  }
</style>
    Enter fullscreen mode

    Exit fullscreen mode

    Then go to nuxt.config.js file and add your custom loading component to the loading property. 

    export default {
  loading: '~/components/LoadingBar.vue'
}
    Enter fullscreen mode

    Exit fullscreen mode

    It’s very simple, right? Now you can see your own custom loading bar between routes changing.



    Useful Links: