[{"data":1,"prerenderedAt":128},["ShallowReactive",2],{"$fj1t0wyVv0NEvqahxilSr7t-APaiKHt7QcW4S8I9fMGo":3,"post-tags-একদম-নতুনদের-জন্য-বাংলায":86},[4],{"id":5,"date":6,"date_gmt":6,"guid":7,"modified":6,"modified_gmt":6,"slug":9,"status":10,"type":11,"link":8,"title":12,"content":14,"excerpt":17,"author":19,"featured_media":20,"comment_status":21,"ping_status":21,"sticky":16,"template":22,"format":23,"meta":24,"categories":25,"tags":26,"class_list":29,"post_image_original":39,"devto_meta":40,"_links":46},49,"2024-08-10T17:48:23",{"rendered":8},"https:\u002F\u002Flab.aiarnob.com\u002F%e0%a6%8f%e0%a6%95%e0%a6%a6%e0%a6%ae-%e0%a6%a8%e0%a6%a4%e0%a7%81%e0%a6%a8%e0%a6%a6%e0%a7%87%e0%a6%b0-%e0%a6%9c%e0%a6%a8%e0%a7%8d%e0%a6%af-%e0%a6%ac%e0%a6%be%e0%a6%82%e0%a6%b2%e0%a6%be%e0%a6%af\u002F","%e0%a6%8f%e0%a6%95%e0%a6%a6%e0%a6%ae-%e0%a6%a8%e0%a6%a4%e0%a7%81%e0%a6%a8%e0%a6%a6%e0%a7%87%e0%a6%b0-%e0%a6%9c%e0%a6%a8%e0%a7%8d%e0%a6%af-%e0%a6%ac%e0%a6%be%e0%a6%82%e0%a6%b2%e0%a6%be%e0%a6%af","publish","post",{"rendered":13},"একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস",{"rendered":15,"protected":16},"\u003Cp>আমরা যারা ওয়েব ডিজাইন সেক্টরে আছি বা আসব বলে ভাবছি তাদের সিএসএস ফ্রেমওয়ার্ক এর শুরুটা হয়ত বুটস্ট্র্যাপ দিয়েই হয়েছে বা হবে, কারণ এটি নতুনদের জন্য শুরু করাটা খুব সহজ এবং আমাদের দেশে এর চাহিদাও অনেক। কিন্তু বেশ কয়েক বছর যাবৎ একটি সিএসএস ফ্রেমওয়ার্ক এর নাম আমরা খুবই শুনে আসছি (বলতে পারেন ট্রেন্ড) সেটি হল টেইলউইন্ড সিএসএস। আর যারা বিভিন্ন জাভাস্ক্রিপ্ট লাইব্রেরি, ফ্রেমওয়ার্ক নিয়ে কাজ করেন বা শুরু করেছেন যেমনঃ React, Vue ইত্যাদি তাদের কাছেতো টেইলউইন্ড সিএসএস নামটা খুবই পরিচিত। এমনকি বর্তমান সময়ে টেইলউইন্ড সিএসএস সবচেয়ে জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক। আজকে আমি চেষ্টা করব খুব সহজভাবে টেইলউইন্ড সিএসএস সম্পর্কে লিখতে, যেন নতুনরা খুব সহজে টেইলউইন্ড সিএসএস শুরু করতে পারেন।\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"%E0%A6%B8%E0%A6%82%E0%A6%95%E0%A7%8D%E0%A6%B7%E0%A7%87%E0%A6%AA%E0%A7%87-%E0%A6%9F%E0%A7%87%E0%A6%87%E0%A6%B2%E0%A6%89%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%A1-%E0%A6%B8%E0%A6%BF%E0%A6%8F%E0%A6%B8%E0%A6%8F%E0%A6%B8%E0%A6%83\" href=\"#%E0%A6%B8%E0%A6%82%E0%A6%95%E0%A7%8D%E0%A6%B7%E0%A7%87%E0%A6%AA%E0%A7%87-%E0%A6%9F%E0%A7%87%E0%A6%87%E0%A6%B2%E0%A6%89%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%A1-%E0%A6%B8%E0%A6%BF%E0%A6%8F%E0%A6%B8%E0%A6%8F%E0%A6%B8%E0%A6%83\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  সংক্ষেপে টেইলউইন্ড সিএসএসঃ\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>টেইলউইন্ড সিএসএস কে ইউটিলিটি ফার্স্ট সিএসএস ফ্রেমওয়ার্ক বলা হয়। এখানে আপনি ইউটিলিটি সিএসএস ক্লাস ডিরেক্ট এইচটিএমএল ফাইলে লিখে সব ধরনের ডিজাইন করতে পারবেন। টেইলউইন্ড সিএসএস ব্যবহার করলে আপনাকে এইচটিএমএল ফাইলের বাহিরে আসলে তেমন কিছু করতে হবে না। এটি অনেক fast, flexible এবং relaible। টেইলউইন্ড সিএসএস মূলত অনেক গুলো ইউটিলিটি সিএসএস ক্লাসের সমন্বয়ে তৈরি তাই ডেভেলপমেন্ট টাইমে সিএসএস ফাইল সাইজ বেশি হলেও যখন প্রোডাকশনের জন্য বিল্ড করা হয় তখন শুধু এইচটিএমএল ফাইলে ব্যবহৃত সিএসএস ক্লাস গুলোর জন্য যে স্টাইল গুলো আছে শুধুমাত্র সেই স্টাইল গুলোকে জেনারেট করে খুব ছোট একটা সিএসএস ফাইল আমাদেরকে দেয়। যেখানে কোন অপ্রয়োজনীয় অথবা ডুপ্লিকেট সিএসএস থাকে না।\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"%E0%A6%9F%E0%A7%87%E0%A6%87%E0%A6%B2%E0%A6%89%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%A1-%E0%A6%B8%E0%A6%BF%E0%A6%8F%E0%A6%B8%E0%A6%8F%E0%A6%B8-%E0%A6%95%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%AC%E0%A7%87-%E0%A6%95%E0%A6%BE%E0%A6%9C-%E0%A6%95%E0%A6%B0%E0%A7%87%E0%A6%83\" href=\"#%E0%A6%9F%E0%A7%87%E0%A6%87%E0%A6%B2%E0%A6%89%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%A1-%E0%A6%B8%E0%A6%BF%E0%A6%8F%E0%A6%B8%E0%A6%8F%E0%A6%B8-%E0%A6%95%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%AC%E0%A7%87-%E0%A6%95%E0%A6%BE%E0%A6%9C-%E0%A6%95%E0%A6%B0%E0%A7%87%E0%A6%83\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  টেইলউইন্ড সিএসএস কিভাবে কাজ করেঃ\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>টেইলউইন্ড সিএসএস মূলত যেকোনো এইচটিএমএল ফাইল, জাভাস্ক্রিপ্ট কম্পোনেন্ট অথবা যেকোন ধরনের টেম্পলেট ফাইল থেকে সিএসএস ক্লাস নামগুলো স্ক্যান করে তারপর স্ক্যানকৃত সিএসএস এর জন্য যে স্টাইল গুলো আছে সেগুলো জেনারেট করে আমাদের কে একটা স্ট্যাটিক সিএসএস ফাইল দেয় যে ফাইল টা এইচটিএমএল ফাইল এর হেড সেকশন এ কল করতে হয়।\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"%E0%A6%9F%E0%A7%87%E0%A6%87%E0%A6%B2%E0%A6%89%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%A1-%E0%A6%B8%E0%A6%BF%E0%A6%8F%E0%A6%B8%E0%A6%8F%E0%A6%B8-%E0%A6%87%E0%A6%A8%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A6%B2%E0%A7%87%E0%A6%B6%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%A7%E0%A6%BE%E0%A6%AA%E0%A6%B8%E0%A6%AE%E0%A7%82%E0%A6%B9%E0%A6%83\" href=\"#%E0%A6%9F%E0%A7%87%E0%A6%87%E0%A6%B2%E0%A6%89%E0%A6%87%E0%A6%A8%E0%A7%8D%E0%A6%A1-%E0%A6%B8%E0%A6%BF%E0%A6%8F%E0%A6%B8%E0%A6%8F%E0%A6%B8-%E0%A6%87%E0%A6%A8%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A6%B2%E0%A7%87%E0%A6%B6%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%A7%E0%A6%BE%E0%A6%AA%E0%A6%B8%E0%A6%AE%E0%A7%82%E0%A6%B9%E0%A6%83\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  টেইলউইন্ড সিএসএস ইনস্টলেশনের ধাপসমূহঃ\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>আমরা বেশ কয়েকভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইনস্টলেশন করতে পারি। যেমনঃ Tailwind CLI ব্যবহার করে, PostCSS ব্যবহার করে এবং CDN ব্যবহার করে। আপনার কাছে মনে হতে পারে CDN ব্যবহার করা সহজ কিন্তু এখানে সবচেয়ে বড় সমস্যা হল এখানে আপনি টেইলউইন্ড কনফিগারেশন এবং কাস্টমাইজেশন ফিচার পাবেন না। আমি এখানে Tailwind CLI ব্যবহার করে কিভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইন্সটল করবেন সেইটা দেখাব\u003C\u002Fp>\n\u003Cp>\u003Cstrong>ধাপ-১ঃ\u003C\u002Fstrong>\u003Cbr \u002F>\nপ্রথমে আমাদের প্রোজেক্ট এ node (আপনার মেশিনে অবশ্যই Node.js ভার্সন 12.13.0 অথবা এর চেয়ে আপগ্রেড ভার্সন ইন্সটল থাকতে হবে) initialize করে নিতে হবে। প্রোজেক্ট ফোল্ডার তৈরি করুন এবং প্রোজেক্ট ফোল্ডার এ টার্মিনাল ওপেন করে নিম্নের কমান্ড টা টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।\n\u003C\u002Fp>\n\u003Cp>\u003Ccode>npm init -y\u003C\u002Fcode>\n\u003C\u002Fp>\n\u003Cp>\u003Cstrong>ধাপ-২ঃ\u003C\u002Fstrong>\u003Cbr \u002F>\nএখন দেভ ডিপেন্ডেন্সি হিসাবে টেইলউইন্ড সিএসএস ইন্সটল করতে হবে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>npm install -D tailwindcss\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>ধাপ-৩ঃ\u003C\u002Fstrong>\u003Cbr \u002F>\nএখন \u003Ccode>tailwind.config.js\u003C\u002Fcode> ফাইল তৈরি করতে হবে যেখানে টেইলউইন্ড সিএসএস এর সব ধরনের কনফিগারেশন থাকে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>npx tailwindcss init\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>ধাপ-৪ঃ\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003Ccode>tailwind.config.js\u003C\u002Fcode> ফাইল এর content array এর মধ্যে সকল টেম্পলেট এর এক্সটেনশন লিখে দিতে হবে যেখান থেকে টেইলউইন্ড সিএসএস ইউটিলিটি স্ক্যান করবে। মানে আমরা যে যে ফাইল এ টেইলউইন্ড সিএসএস এর সাপোর্ট চাই সেগুলো। যেমনঃ আমরা এখানে শুধু এইচটিএমএল ফাইল এ টেইলউইন্ড সিএসএস লিখব তাই এখানে .html লিখেছি content array এর মধ্যে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"c1\">\u002F\u002Ftailwind.config.js file\u003C\u002Fspan>\n\u003Cspan class=\"nx\">module\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">exports\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n\u003Cspan class=\"na\">content\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan>\u003Cspan class=\"s2\">*.{html}\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan>\u003Cspan class=\"p\">],\u003C\u002Fspan>\n\u003Cspan class=\"na\">theme\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n\u003Cspan class=\"na\">extend\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">{},\u003C\u002Fspan>\n\u003Cspan class=\"p\">},\u003C\u002Fspan>\n\u003Cspan class=\"na\">plugins\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[],\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>ধাপ-৫ঃ\u003C\u002Fstrong>\u003Cbr \u002F>\nএখন ২টা ফোল্ডার তৈরি করতে হবে। আমি ফোল্ডার এর নাম দিলাম যথাক্রমে src এবং dist। src ফোল্ডার এর মধ্যে \u003Ccode>input.css\u003C\u002Fcode> নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব এবং dist ফোল্ডার এর মধ্যে \u003Ccode>output.css\u003C\u002Fcode> নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব। \u003Ccode>input.css\u003C\u002Fcode> ফাইলটি মূলত Tailwind নিজে ব্যবহার করবে, যেখানে টেইলউইন্ড সিএসএস এর সকল ডিরেক্টিভ গুলো থাকবে। এই ডিরেক্টিভ গুলোর মাধ্যমে টেইলউইন্ড সিএসএস এর base, components এবং utilities সিএসএস গুলো কল হবে। \u003Ccode>input.css\u003C\u002Fcode> ফাইলে আমাদের নিম্নের কোড লিখতে হবে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"c\">\u002F* src\u002Finput.css *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"k\">@tailwind\u003C\u002Fspan> \u003Cspan class=\"n\">base\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\u003Cspan class=\"k\">@tailwind\u003C\u002Fspan> \u003Cspan class=\"n\">components\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\u003Cspan class=\"k\">@tailwind\u003C\u002Fspan> \u003Cspan class=\"n\">utilities\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>ধাপ-৬ঃ\u003C\u002Fstrong>\u003Cbr \u002F>\nএখন টেইলউইন্ড ডেভেলপার মোডে কিভাবে বিল্ড হবে সেটা বলে দেয়ার জন্য \u003Ccode>package.json\u003C\u002Fcode> ফাইলে আমাদেরকে একটি বিল্ড স্ক্রিপ্ট লিখে দিতে হবে। এই স্ক্রিপ্টের মাধ্যমে Tailwind CLI টেম্পলেট ফাইল স্ক্যান করে স্ট্যাটিক সিএসএস বিল্ড করবে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight json\">\u003Ccode>\u003Cspan class=\"nl\">\"scripts\"\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\u003Cspan class=\"w\"> \u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\u003Cspan class=\"w\">\n    \u003C\u002Fspan>\u003Cspan class=\"nl\">\"build\"\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\u003Cspan class=\"w\"> \u003C\u002Fspan>\u003Cspan class=\"s2\">\"tailwindcss -i .\u002Fsrc\u002Finput.css -o .\u002Fdist\u002Foutput.css -w\"\u003C\u002Fspan>\u003Cspan class=\"w\">\n\u003C\u002Fspan>\u003Cspan class=\"p\">}\u003C\u002Fspan>\u003Cspan class=\"w\">\n\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>এখানে -i এর পরে ইনপুট সিএসএস ফাইলের এর পাথ, -o এর পরে অউটপুট সিএসএস ফাইলের পাথ নির্দেশ করে দিতে হবে এবং -w এর মাধ্যমে আমরা ওয়াচ ফ্ল্যাগ চালু করে দিয়েছি যাতে \u003Ccode>tailwind.config.js\u003C\u002Fcode> বা \u003Ccode>input.css\u003C\u002Fcode> ফাইলে কোন পরিবর্তন হলে অটোমেটিক টেইলউইন্ড বিল্ড হয়।\u003C\u002Fp>\n\u003Cp>\u003Cstrong>ধাপ-৭ঃ\u003C\u002Fstrong>\u003Cbr \u002F>\nএখন \u003Ccode>output.css\u003C\u002Fcode> ফাইলটি এইচটিএমএল ফাইলের হেডট্যাগ এর মধ্যে কল করতে হবে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><link\u003C\u002Fspan> \u003Cspan class=\"na\">rel=\u003C\u002Fspan>\u003Cspan class=\"s\">\"stylesheet\"\u003C\u002Fspan> \u003Cspan class=\"na\">href=\u003C\u002Fspan>\u003Cspan class=\"s\">\"dist\u002Foutput.css\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>ধাপ-৮ঃ\u003C\u002Fstrong>\u003Cbr \u002F>\nআমাদের প্রোজেক্ট এখন ১০০% প্রস্তুত টেইলউইন্ড সিএসএস লেখার জন্য। যেকোনো এইচটিএমএল ট্যাগের ক্লাস হিসাবে টেইলউইন্ড সিএসএস ইউটিলিটি ক্লাস গুলো লিখলেই প্রত্যাশিত অউটপুট পেয়ে যাবেন। কিন্তু এর আগে টার্মিনাল এ আপনাকে আর একটা  কমান্ড চালু রাখতে হবে সেইটা নিম্নরূপঃ\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>npm run build\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>ধাপ-৯ঃ\u003C\u002Fstrong>\u003Cbr \u002F>\nএই ধাপটা একেবারে অপশনাল আপনি যদি কোড এডিটরে টেইলউইন্ড সিএসএস এর ইন্টেলিজেন্স সাপোর্ট পেতে চান তাহলে টেইলউইন্ড সিএসএস এর নিজস্ব এক্সটেনশন আপনার কোড এডিটরে ইন্সটল করে নিতে পারেন। যেমনঃ Visual Studio Code এর জন্য \u003Ccode>Tailwind CSS IntelliSense\u003C\u002Fcode> এক্সটেনশন।\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fres.cloudinary.com%2Ftechdiary-dev%2Fimage%2Fupload%2Ff_auto%2Fq_auto%2Fv1%2Ftechdiary-article-covers%2Fpxqrzvkiqxs35zfhdqxr\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fres.cloudinary.com%2Ftechdiary-dev%2Fimage%2Fupload%2Ff_auto%2Fq_auto%2Fv1%2Ftechdiary-article-covers%2Fpxqrzvkiqxs35zfhdqxr\" alt=\"Tailwind CSS IntelliSense\" loading=\"lazy\" width=\"1061\" height=\"680\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"%E0%A6%87%E0%A6%89%E0%A6%9F%E0%A6%BF%E0%A6%B2%E0%A6%BF%E0%A6%9F%E0%A6%BF%E0%A6%AB%E0%A6%BE%E0%A6%B0%E0%A7%8D%E0%A6%B8%E0%A7%8D%E0%A6%9F-%E0%A6%AB%E0%A6%BE%E0%A6%A8%E0%A7%8D%E0%A6%A1%E0%A6%BE%E0%A6%AE%E0%A7%87%E0%A6%A8%E0%A7%8D%E0%A6%9F%E0%A6%BE%E0%A6%B2%E0%A6%B8%E0%A6%83\" href=\"#%E0%A6%87%E0%A6%89%E0%A6%9F%E0%A6%BF%E0%A6%B2%E0%A6%BF%E0%A6%9F%E0%A6%BF%E0%A6%AB%E0%A6%BE%E0%A6%B0%E0%A7%8D%E0%A6%B8%E0%A7%8D%E0%A6%9F-%E0%A6%AB%E0%A6%BE%E0%A6%A8%E0%A7%8D%E0%A6%A1%E0%A6%BE%E0%A6%AE%E0%A7%87%E0%A6%A8%E0%A7%8D%E0%A6%9F%E0%A6%BE%E0%A6%B2%E0%A6%B8%E0%A6%83\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  ইউটিলিটি-ফার্স্ট ফান্ডামেন্টালসঃ\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>আমি আগেও বলেছি টেইলউইন্ড সিএসএস হল অনেক গুলো ইউটিলিটি সিএসএস ক্লাস নিয়ে গঠিত একটা সিএসএস ফ্রেমওয়ার্ক। ইউটিলিটি ফিচার টাই মূলত টেইলউইন্ড সিএসএসকে অন্য সকল সিএসএস ফ্রেমওয়ার্ক থেকে আলাদা করেছে। বুটস্ট্র্যাপ সিএসএস ফ্রেমওয়ার্ক যেমন আমাদেরকে একটা কমপ্লিট কম্পোনেন্ট দেয় অপরদিকে টেইলউইন্ড সিএসএস ফ্রেমওয়ার্ক আমাদেরকে এমন কমপ্লিট কম্পোনেন্ট দেয় না। বুটস্ট্র্যাপের একটা কম্পোনেন্ট এর মধ্যে margin, padding, width, height, font-size, color এসব আগে থেকেই বলা থাকে আমরা শুধু সেই কম্পোনেন্ট এর এইচটিএমএল মার্কআপটা আমাদের এইচটিএমএল ফাইলে বসালেই সুন্দর একটা কার্ড কম্পোনেন্ট পেয়ে যাই। অন্যদিকে টেইলউইন্ড সিএসএস এমন কম্পোনেন্ট না দিয়ে margin, padding এর মত লো লেভেল সিএসএস দিয়ে তৈরিকৃত অসংখ্য ইউটিলিটি ক্লাস আমাদেরকে প্রোভাইড করে যেগুলো ব্যবহার করে আমরা নিজেদের ইচ্ছা মতো ডিজাইন করতে পারি।\u003C\u002Fp>\n\u003Cp>কোন একটা ডিজাইন যদি আমরা ভ্যানিলা সিএসএস ব্যবহার করে করতে চাই তাহলে আমাদেরকে ২টা বিষয় অবশ্যই করতে হয় তা হল অনেকগুলো অর্থবধক ক্লাস এর নাম লিখতে হয় এবং সেই নাম গুলো ধরে ধরে সিএসএস ফাইলে লাইন বাই লাইন সিএসএস লিখতে হয়। এক্ষেত্রে যেমন আমাদের ক্লাস এর অর্থবধক নাম বের করতে যেয়ে সময় নষ্ট হয় আবার সেইসাথে সিএসএস গুলো নিজে থেকে লিখতে হয় এবং একটা সময় দেখা যায় কোড ডুপ্লিকেশন প্রব্লেমটাও চলে আসে।\u003C\u002Fp>\n\u003Cp>অন্যদিকে ইউটিলিটি সিএসএস ব্যবহার করলে আমাদেরকে আর ক্লাস নাম নিয়ে ভাবার দরকার পরে না, টেইলউইন্ড এর ইউটিলিটি ক্লাস গুলোকে ডেকে আনলেই কাজ হয়ে যায়। আপনাদের মনে হতে পারে এতো এতো ইউটিলিটি ক্লাস কিভাবে মনে রাখবো, ভয়ের কিছু নেয় কিছুই মনে রাখতে হবে না, টেইলউইন্ড এর প্রায় সব ইউটিলিটি ক্লাসই ডিক্লারেটিভ এছাড়াও টেইলউইন্ড এর নিজস্ব ইন্টেলিজেন্স সাপোর্ট আপনার কোড এডিটর এ থাকলেতো এসব নিয়ে আপনাকে তেমন কোন চিন্তাই করতে হবে না। কিছুদিন নিয়মিত প্র্যাকটিস করলে সব কিছু আপনার আয়ত্তে চলে আসবে। আরেকটা বিষয় জানা থাকা জরুরী টেইলউইন্ড সিএসএস এর সমস্ত হিসাব করা হয় rem একক দিয়ে, যেমনঃ p-6 মানে padding-1.5rem। চলুন একটা উদাহরণ দেখা যাকঃ\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fres.cloudinary.com%2Ftechdiary-dev%2Fimage%2Fupload%2Ff_auto%2Fq_auto%2Fv1%2Ftechdiary-article-covers%2Frmtr9uslctbznyg9jus1\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fres.cloudinary.com%2Ftechdiary-dev%2Fimage%2Fupload%2Ff_auto%2Fq_auto%2Fv1%2Ftechdiary-article-covers%2Frmtr9uslctbznyg9jus1\" alt=\"Card\" loading=\"lazy\" width=\"1408\" height=\"356\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><div\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n        \u003Cspan class=\"nt\"><div\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"shrink-0\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><img\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"h-12 w-12\"\u003C\u002Fspan> \u003Cspan class=\"na\">src=\u003C\u002Fspan>\u003Cspan class=\"s\">\"https:\u002F\u002Faiarnob.com\u002Ffrontend\u002Fassets\u002Fimages\u002Ffavicons\u002Fapple-touch-icon.png\"\u003C\u002Fspan> \u003Cspan class=\"na\">alt=\u003C\u002Fspan>\u003Cspan class=\"s\">\"ChitChat Logo\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n        \u003Cspan class=\"nt\"><\u002Fdiv>\u003C\u002Fspan>\n        \u003Cspan class=\"nt\"><div>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><div\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"text-xl font-medium text-black\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>AI Arnob\u003Cspan class=\"nt\"><\u002Fdiv>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><p\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"text-slate-500\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>You have a new message!\u003Cspan class=\"nt\"><\u002Fp>\u003C\u002Fspan>\n    \u003Cspan class=\"nt\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"nt\"><\u002Fdiv>\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>উপড়ের সুন্দর কার্ড টা ডিজাইন করার জন্য কিন্তু আমাদের কোন সিএসএস লিখতে হয় নাই জাস্ট কিছু টেইলউইন্ড ইউটিলিটি ক্লাস ব্যবহার করা হয়েছে। লক্ষ করলে দেখবেন যে, এখানে ইউটিলিটি ক্লাসগুলো কতটা ডিক্লারেটিভ, যেমনঃ \u003C\u002Fp>\n\u003Cul>\n\u003Cli>p-6 এর মাধ্যমে চারপাশে padding দিয়েছি 1.5rem। \u003C\u002Fli>\n\u003Cli>max-w-sm এর মাধ্যমে ম্যাক্সিমাম উইড্থ দিয়েছি sm মানে 24rem।\u003C\u002Fli>\n\u003Cli>mx-auto এর মাধ্যমে মার্জিন বামে এবং ডানে অটো করেছি।\u003C\u002Fli>\n\u003Cli>bg-white এর মাধ্যমে ব্যাকগ্রাউন্ড কালার সাদা দিয়েছি।\u003C\u002Fli>\n\u003Cli>rounded-xl এর মাধ্যমে বর্ডার রউন্ড করেছি।\u003C\u002Fli>\n\u003Cli>shadow-lg এর মাধ্যমে বক্স শ্যাডো অ্যাপ্লাই করেছি।\u003C\u002Fli>\n\u003Cli>flex এর মাধ্যমে ডিভ টাকে ডিসপ্লে ফ্লেক্স করেছি।\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>এতক্ষণে হয়ত বুঝে গিয়েছেন কিভাবে টেইলউইন্ড ইউটিলিটি ক্লাসগুলো কাজ করে। টেইলউইন্ড সিএসএস এর খুবই সুন্দর একটা  \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Futility-first\" target=\"_blank\" rel=\"noopener noreferrer\">ডকুমেন্টেশন\u003C\u002Fa> আছে এবং সার্চ ফিচার টাও অনেক দুর্দান্ত কাজ করে, আপনার যা প্রয়োজন জাস্ট সার্চ বক্স এ লিখুন রেজাল্ট চলে আসবে চোখের পলকে।\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"%E0%A6%AC%E0%A6%BF%E0%A6%AD%E0%A6%BF%E0%A6%A8%E0%A7%8D%E0%A6%A8-%E0%A6%A7%E0%A6%B0%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A7%87%E0%A6%9F-%E0%A6%B9%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%A8%E0%A7%8D%E0%A6%A1%E0%A6%B2-%E0%A6%95%E0%A6%B0%E0%A6%BE%E0%A6%83-hover-focus-and-other-states\" href=\"#%E0%A6%AC%E0%A6%BF%E0%A6%AD%E0%A6%BF%E0%A6%A8%E0%A7%8D%E0%A6%A8-%E0%A6%A7%E0%A6%B0%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A7%87%E0%A6%9F-%E0%A6%B9%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%A8%E0%A7%8D%E0%A6%A1%E0%A6%B2-%E0%A6%95%E0%A6%B0%E0%A6%BE%E0%A6%83-hover-focus-and-other-states\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  বিভিন্ন ধরনের স্টেট হ্যান্ডল করাঃ (Hover, Focus, and Other States)\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>এতক্ষণে হয়ত আপনার মনে প্রশ্ন জেগেছে যে, টেইলউইন্ড সিএসএস এর মাধ্যমে আমরা কিভাবে বিভিন্ন ধরনের স্টেট ম্যানেজ করতে পারি। এটার ও একটা খুব ভালো সমাধান আছে। যেকোনো ইউটিলিটি ক্লাসের সামনে আমাদেরকে জাস্ট মডিফায়ার লিখতে হবে। নিম্নের উদাহরণ তা দেখলেই বুঝতে পারবেন।\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fres.cloudinary.com%2Ftechdiary-dev%2Fimage%2Fupload%2Ff_auto%2Fq_auto%2Fv1%2Ftechdiary-article-covers%2Fotj2jyqzd5mydtz67z13\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fres.cloudinary.com%2Ftechdiary-dev%2Fimage%2Fupload%2Ff_auto%2Fq_auto%2Fv1%2Ftechdiary-article-covers%2Fotj2jyqzd5mydtz67z13\" alt=\"State\" loading=\"lazy\" width=\"1408\" height=\"560\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><button\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"bg-sky-600 hover:bg-sky-700 text-white px-7 py-2 rounded-full\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n        Click me\n\u003Cspan class=\"nt\"><\u002Fbutton>\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>এখানে স্বাভাবিক ভাবে বাটন ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে \u003Ccode>bg-sky-600\u003C\u002Fcode> এবং হুভার স্টেট এ ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে \u003Ccode>hover:bg-sky-700\u003C\u002Fcode>। এখানে hover: টা হল মডিফায়ার। এভাবে :focus, :active, :first-child, :required, ::before, ::after, ::placeholder, ::selection এরকম আরও অনেক মডিফায়ার ব্যবহার করে ইউটিলিটি ক্লাস লেখা যায়। বিভিন্ন স্টেট সম্পর্কে আরও বিস্তারিত জানার জন্য \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fhover-focus-and-other-states\" target=\"_blank\" rel=\"noopener noreferrer\">ডকুমেন্টেশন\u003C\u002Fa> দেখুন।\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"%E0%A6%B0%E0%A7%87%E0%A6%B8%E0%A7%8D%E0%A6%AA%E0%A6%A8%E0%A7%8D%E0%A6%B8%E0%A6%BF%E0%A6%AD-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8%E0%A6%83\" href=\"#%E0%A6%B0%E0%A7%87%E0%A6%B8%E0%A7%8D%E0%A6%AA%E0%A6%A8%E0%A7%8D%E0%A6%B8%E0%A6%BF%E0%A6%AD-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8%E0%A6%83\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  রেস্পন্সিভ ডিজাইনঃ\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>টেইলউইন্ড সিএসএস এর বিভিন্ন রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট আছে যেগুলো ব্যবহার করে জটিল জটিল রেস্পন্সিভ ইন্টারফেস ডিজাইন করা যায়। টেইলউইন্ড সিএসএস মোবাইল ফার্স্ট এপ্রোচ এ কাজ করে তাই রেস্পন্সিভ এর জন্য ডিফল্ট যে ৫ ধরনের ব্রেকপয়েন্ট(চাইলে আপনি ইচ্ছামত কাস্টোমাইজ করতে পারবেন) আছে সেগুলোতে \u003Ccode>min-width\u003C\u002Fcode> উল্লেখ করা। ব্রেকপয়েন্টগুলো নিম্নরূপঃ\u003Cbr \u002F>\n|ব্রেকপয়েন্ট প্রিফিক্স|মিনিমাম উইড্থ|সিএসএস মিডিয়া কুয়েরি|\u003Cbr \u002F>\n|-|-|-|\u003Cbr \u002F>\n|\u003Ccode>sm\u003C\u002Fcode>|640px|\u003Ccode>@media (min-width: 640px) { ... }\u003C\u002Fcode>|\u003Cbr \u002F>\n|\u003Ccode>md\u003C\u002Fcode>| 768px |\u003Ccode>@media (min-width: 768px) { ... }\u003C\u002Fcode>|\u003Cbr \u002F>\n|\u003Ccode>lg\u003C\u002Fcode>| 1024px |\u003Ccode>@media (min-width: 1024px) { ... }\u003C\u002Fcode>|\u003Cbr \u002F>\n|\u003Ccode>xl\u003C\u002Fcode>| 1280px |\u003Ccode>@media (min-width: 1280px) { ... }\u003C\u002Fcode>|\u003Cbr \u002F>\n|\u003Ccode>2xl\u003C\u002Fcode>| 1536px |\u003Ccode>@media (min-width: 1536px) { ... }\u003C\u002Fcode>|\u003C\u002Fp>\n\u003Cp>সরাসরি কোন ইউটিলিটি ক্লাস লিখলে সেটি সবগুলো ডিভাইসে কাজ করে কিন্তু যখন কোন ইউটিলিটি ক্লাসের এর আগে রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট যেমনঃ \u003Ccode>sm:\u003C\u002Fcode> লেখা হবে তখন সেটি ডিভাইস উইড্থ \u003Ccode>768px\u003C\u002Fcode> এর সমান বা এর চেয়ে বড় হলে কাজ করবে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><img\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"w-16 md:w-32 lg:w-48\"\u003C\u002Fspan> \u003Cspan class=\"na\">src=\u003C\u002Fspan>\u003Cspan class=\"s\">\"...\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>এখানে ইমেজ এর ডিফল্ট উইড্থ ১৬, মিডিয়াম স্ক্রীন এর জন্য হবে ৩২ এবং লার্জ স্ক্রীন এর জন্য হবে ৪৮। রেস্পন্সিভ ডিজাইন সম্পর্কে আরও বিস্তারিত জানার জন্য \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fresponsive-design\" target=\"_blank\" rel=\"noopener noreferrer\">ডকুমেন্টেশন\u003C\u002Fa> দেখুন।\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"%E0%A6%A1%E0%A6%BE%E0%A6%B0%E0%A7%8D%E0%A6%95-%E0%A6%8F%E0%A6%AC%E0%A6%82-%E0%A6%B2%E0%A6%BE%E0%A6%87%E0%A6%9F-%E0%A6%AE%E0%A7%8B%E0%A6%A1%E0%A6%83\" href=\"#%E0%A6%A1%E0%A6%BE%E0%A6%B0%E0%A7%8D%E0%A6%95-%E0%A6%8F%E0%A6%AC%E0%A6%82-%E0%A6%B2%E0%A6%BE%E0%A6%87%E0%A6%9F-%E0%A6%AE%E0%A7%8B%E0%A6%A1%E0%A6%83\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  ডার্ক এবং লাইট মোডঃ\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>টেইলউইন্ড সিএসএস ব্যবহার করে খুব সহজে আপনি আপনার ওয়েবসাইটে ডার্ক মোড এনাবল করতে পারবেন। সাইটকে ডার্ক করার জন্য টেইলউইন্ড সিএসএস \u003Ccode>dark\u003C\u002Fcode> নামে একটি ভারিয়ান্ট দেয়, যেটি যেকোনো ইউটিলিটি ক্লাস এর সামনে দিলে তখন তা শুধুমাত্র ডার্ক মোডে কাজ করবে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><button\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"bg-sky-600 hover:bg-sky-700 dark:bg-sky-200\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n  Save changes\n\u003Cspan class=\"nt\"><\u002Fbutton>\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>উপরের কোডে \u003Ccode>dark:bg-sky-200\u003C\u002Fcode> লেখা হয়েছে যার ফলে ডার্ক মোডে বাটনটির ব্যাকগ্রাউন্ড কালার হবে \u003Ccode>bg-sky-200\u003C\u002Fcode>।\u003C\u002Fp>\n\u003Cp>\u003Cstrong>ডার্ক মোড স্ট্রাটেজি\u003C\u002Fstrong>\u003Cbr \u002F>\nডার্ক মোড স্ট্রাটেজি ২ ধরনের হয় \u003Ccode>class\u003C\u002Fcode> স্ট্রাটেজি এবং \u003Ccode>media\u003C\u002Fcode> স্ট্রাটেজি। \u003Ccode>tailwind.config.js\u003C\u002Fcode> ফাইলে ডার্ক মোড স্ট্রাটেজি বলে দিতে হবে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"c1\">\u002F\u002Ftailwind.config.js file\u003C\u002Fspan>\n\u003Cspan class=\"nx\">module\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">exports\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"na\">darkMode\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">class\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n  \u003Cspan class=\"c1\">\u002F\u002F ...\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>আপনি যদি কাস্টম বাটন ব্যবহার করে ডার্ক এবং লাইট মোড toggle করতে চান তাহলে \u003Ccode>class\u003C\u002Fcode> স্ট্রাটেজি ব্যবহার করতে পারেন আর যদি চান যে অপারেটিং সিস্টেমের প্রেফারেন্স এর উপর নির্ভর করে সাইট ডার্ক অথবা লাইট হবে তাহলে \u003Ccode>media\u003C\u002Fcode> স্ট্রাটেজি ব্যবহার করতে হবে। ডার্ক মোড সম্পর্কে আরও বিস্তারিত জানার জন্য \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fdark-mode\" target=\"_blank\" rel=\"noopener noreferrer\">ডকুমেন্টেশন\u003C\u002Fa> দেখুন।\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"%E0%A6%AA%E0%A7%81%E0%A6%A8%E0%A6%B0%E0%A6%BE%E0%A6%AF%E0%A6%BC-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%AC%E0%A6%B9%E0%A6%BE%E0%A6%B0%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A7%8D%E0%A6%AF-%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A6%BE%E0%A6%87%E0%A6%B2%E0%A6%83\" href=\"#%E0%A6%AA%E0%A7%81%E0%A6%A8%E0%A6%B0%E0%A6%BE%E0%A6%AF%E0%A6%BC-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%AC%E0%A6%B9%E0%A6%BE%E0%A6%B0%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A7%8D%E0%A6%AF-%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A6%BE%E0%A6%87%E0%A6%B2%E0%A6%83\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  পুনরায় ব্যবহারযোগ্য স্টাইলঃ\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>আমাদের প্রোজেক্ট এ অনেক সময় একই ডিজাইনের কম্পোনেন্ট একাধিক জায়গায় ব্যবহার করতে হয় তখন দেখা যায় ইউটিলিটি ক্লাসগুলোর ডুপ্লিকেশন চলে আসে। যেমনঃ নিম্নের ডিজাইনে রাউন্ডেড অবতার ডিজাইন বার বার রিপিট করা হয়েছে যার ফোলে একই ইউটিলিটি ক্লাস এর ডুপ্লিকেশন তৈরি হয়েছে।\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fres.cloudinary.com%2Ftechdiary-dev%2Fimage%2Fupload%2Ff_auto%2Fq_auto%2Fv1%2Ftechdiary-article-covers%2Fqaycdhl3zm1eoud2iqlx\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fres.cloudinary.com%2Ftechdiary-dev%2Fimage%2Fupload%2Ff_auto%2Fq_auto%2Fv1%2Ftechdiary-article-covers%2Fqaycdhl3zm1eoud2iqlx\" alt=\"usercard\" loading=\"lazy\" width=\"1408\" height=\"434\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><div\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n        \u003Cspan class=\"nt\"><div\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"flex items-center space-x-2 text-base\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><h4\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"font-semibold text-slate-900\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>Users\u003Cspan class=\"nt\"><\u002Fh4>\u003C\u002Fspan>\n            \u003Cspan class=\"nt\"><span\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>100\u003Cspan class=\"nt\"><\u002Fspan>\u003C\u002Fspan>\n        \u003Cspan class=\"nt\"><\u002Fdiv>\u003C\u002Fspan>\n        \u003Cspan class=\"nt\"><div\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"mt-3 flex -space-x-2 overflow-hidden\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><img\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\"\u003C\u002Fspan> \u003Cspan class=\"na\">src=\u003C\u002Fspan>\u003Cspan class=\"s\">\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1491528323818-fdd1faba62cc\"\u003C\u002Fspan> \u003Cspan class=\"na\">alt=\u003C\u002Fspan>\u003Cspan class=\"s\">\"\"\u003C\u002Fspan>\u003Cspan class=\"nt\">\u002F>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><img\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\"\u003C\u002Fspan> \u003Cspan class=\"na\">src=\u003C\u002Fspan>\u003Cspan class=\"s\">\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1550525811-e5869dd03032\"\u003C\u002Fspan> \u003Cspan class=\"na\">alt=\u003C\u002Fspan>\u003Cspan class=\"s\">\"\"\u003C\u002Fspan>\u003Cspan class=\"nt\">\u002F>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><img\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\"\u003C\u002Fspan> \u003Cspan class=\"na\">src=\u003C\u002Fspan>\u003Cspan class=\"s\">\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1500648767791-00dcc994a43e\"\u003C\u002Fspan> \u003Cspan class=\"na\">alt=\u003C\u002Fspan>\u003Cspan class=\"s\">\"\"\u003C\u002Fspan>\u003Cspan class=\"nt\">\u002F>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><img\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\"\u003C\u002Fspan> \u003Cspan class=\"na\">src=\u003C\u002Fspan>\u003Cspan class=\"s\">\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1472099645785-5658abf4ff4e\"\u003C\u002Fspan> \u003Cspan class=\"na\">alt=\u003C\u002Fspan>\u003Cspan class=\"s\">\"\"\u003C\u002Fspan>\u003Cspan class=\"nt\">\u002F>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><img\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\"\u003C\u002Fspan> \u003Cspan class=\"na\">src=\u003C\u002Fspan>\u003Cspan class=\"s\">\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517365830460-955ce3ccd263\"\u003C\u002Fspan> \u003Cspan class=\"na\">alt=\u003C\u002Fspan>\u003Cspan class=\"s\">\"\"\u003C\u002Fspan>\u003Cspan class=\"nt\">\u002F>\u003C\u002Fspan>\n        \u003Cspan class=\"nt\"><\u002Fdiv>\u003C\u002Fspan>\n        \u003Cspan class=\"nt\"><div\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"mt-3 text-sm font-medium\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>\n                \u003Cspan class=\"nt\"><a\u003C\u002Fspan> \u003Cspan class=\"na\">href=\u003C\u002Fspan>\u003Cspan class=\"s\">\"#\"\u003C\u002Fspan> \u003Cspan class=\"na\">class=\u003C\u002Fspan>\u003Cspan class=\"s\">\"text-blue-500\"\u003C\u002Fspan>\u003Cspan class=\"nt\">>\u003C\u002Fspan>+ 95 others\u003Cspan class=\"nt\"><\u002Fa>\u003C\u002Fspan>\n        \u003Cspan class=\"nt\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"nt\"><\u002Fdiv>\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>ইউটিলিটি ক্লাস এর ডুপ্লিকেশন সমস্যা সমাধানের জন্য টেইলউইন্ড সিএসএস আমাদের সুন্দর একটা প্রসেস দিয়েছে। \u003Ccode>input.css\u003C\u002Fcode> ফাইলে \u003Ca class=\"mentioned-user\" href=\"https:\u002F\u002Fdev.to\u002Fapply\">@apply\u003C\u002Fa> ডিরেক্টিভ এর মাধ্যমে আমরা আমাদের নিজেরদের পছন্দ মতো ক্লাস নাম দিয়ে নতুন একটা কম্পোনেন্ট তৈরি করতে পারি।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"k\">@tailwind\u003C\u002Fspan> \u003Cspan class=\"n\">base\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\u003Cspan class=\"k\">@tailwind\u003C\u002Fspan> \u003Cspan class=\"n\">components\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\u003Cspan class=\"k\">@tailwind\u003C\u002Fspan> \u003Cspan class=\"n\">utilities\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\u003Cspan class=\"k\">@layer\u003C\u002Fspan> \u003Cspan class=\"n\">components\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"nc\">.user-avatar\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"err\">@apply\u003C\u002Fspan> \u003Cspan class=\"err\">inline-block\u003C\u002Fspan> \u003Cspan class=\"err\">h-12\u003C\u002Fspan> \u003Cspan class=\"err\">w-12\u003C\u002Fspan> \u003Cspan class=\"err\">rounded-full\u003C\u002Fspan> \u003Cspan class=\"err\">ring-2\u003C\u002Fspan> \u003Cspan class=\"err\">ring-white\u003C\u002Fspan> \u003Cspan class=\"err\">object-cover;\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>এখন আমরা শুধু \u003Ccode>user-avatar\u003C\u002Fcode> ক্লাস টা ব্যবহার করলেই রাউন্ডেড অবতার ডিজাইনটা পেয়ে যাব। আরেকটা বিষয় \u003Ccode>@layer\u003C\u002Fcode> ডিরেক্টিভের মাধ্যমে নির্ধারিত হয় আমাদের তৈরি করা স্টাইল base, components নাকি utilities এর আন্ডার এ যাবে সেইটা।\u003C\u002Fp>\n\u003Cp>এখানে আমি চেষ্টা করেছি নতুনদের জন্য টেইলউইন্ড সিএসএস এর বেসিক টা তুলে ধরতে এবং টেইলউইন্ড ভীতিটা দূর করতে। এই লেখাটি মনোযোগ দিয়ে পরে থাকলে আপনি টেইলউইন্ড সিএসএস ব্যবহার করে ডিজাইন করার জন্য প্রাথমিক ভাবে প্রস্তুত। টেইলউইন্ড সিএসএস এর আরও অ্যাডভান্স কিছু বিষয় আছে যেগুলো আপনারা অফিসিয়াল \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Finstallation\" target=\"_blank\" rel=\"noopener noreferrer\">ডকুমেন্টেশন\u003C\u002Fa> থেকে দেখে নিতে পারেন।\u003C\u002Fp>\n",false,{"rendered":18,"protected":16},"\u003Cp>আমরা যারা ওয়েব ডিজাইন সেক্টরে আছি বা আসব বলে ভাবছি তাদের সিএসএস ফ্রেমওয়ার্ক এর শুরুটা হয়ত…\u003C\u002Fp>\n",1,50,"open","","standard",{"footnotes":22},[19],[27,28],29,30,[30,11,31,32,33,34,35,36,37,38],"post-49","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","tag-tailwindcss","https:\u002F\u002Flab.aiarnob.com\u002Fwp-content\u002Fuploads\u002F2024\u002F08\u002Fdevto-1954751-cover.webp",{"edited_at":41,"published_at":42,"reactions":43,"comments":44,"reading_time":43,"body_markdown":45},null,"2024-08-10T17:48:23Z",3,0,"আমরা যারা ওয়েব ডিজাইন সেক্টরে আছি বা আসব বলে ভাবছি তাদের সিএসএস ফ্রেমওয়ার্ক এর শুরুটা হয়ত বুটস্ট্র্যাপ দিয়েই হয়েছে বা হবে, কারণ এটি নতুনদের জন্য শুরু করাটা খুব সহজ এবং আমাদের দেশে এর চাহিদাও অনেক। কিন্তু বেশ কয়েক বছর যাবৎ একটি সিএসএস ফ্রেমওয়ার্ক এর নাম আমরা খুবই শুনে আসছি (বলতে পারেন ট্রেন্ড) সেটি হল টেইলউইন্ড সিএসএস। আর যারা বিভিন্ন জাভাস্ক্রিপ্ট লাইব্রেরি, ফ্রেমওয়ার্ক নিয়ে কাজ করেন বা শুরু করেছেন যেমনঃ React, Vue ইত্যাদি তাদের কাছেতো টেইলউইন্ড সিএসএস নামটা খুবই পরিচিত। এমনকি বর্তমান সময়ে টেইলউইন্ড সিএসএস সবচেয়ে জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক। আজকে আমি চেষ্টা করব খুব সহজভাবে টেইলউইন্ড সিএসএস সম্পর্কে লিখতে, যেন নতুনরা খুব সহজে টেইলউইন্ড সিএসএস শুরু করতে পারেন।\n\n### সংক্ষেপে টেইলউইন্ড সিএসএসঃ\nটেইলউইন্ড সিএসএস কে ইউটিলিটি ফার্স্ট সিএসএস ফ্রেমওয়ার্ক বলা হয়। এখানে আপনি ইউটিলিটি সিএসএস ক্লাস ডিরেক্ট এইচটিএমএল ফাইলে লিখে সব ধরনের ডিজাইন করতে পারবেন। টেইলউইন্ড সিএসএস ব্যবহার করলে আপনাকে এইচটিএমএল ফাইলের বাহিরে আসলে তেমন কিছু করতে হবে না। এটি অনেক fast, flexible এবং relaible। টেইলউইন্ড সিএসএস মূলত অনেক গুলো ইউটিলিটি সিএসএস ক্লাসের সমন্বয়ে তৈরি তাই ডেভেলপমেন্ট টাইমে সিএসএস ফাইল সাইজ বেশি হলেও যখন প্রোডাকশনের জন্য বিল্ড করা হয় তখন শুধু এইচটিএমএল ফাইলে ব্যবহৃত সিএসএস ক্লাস গুলোর জন্য যে স্টাইল গুলো আছে শুধুমাত্র সেই স্টাইল গুলোকে জেনারেট করে খুব ছোট একটা সিএসএস ফাইল আমাদেরকে দেয়। যেখানে কোন অপ্রয়োজনীয় অথবা ডুপ্লিকেট সিএসএস থাকে না।\n\n### টেইলউইন্ড সিএসএস কিভাবে কাজ করেঃ\nটেইলউইন্ড সিএসএস মূলত যেকোনো এইচটিএমএল ফাইল, জাভাস্ক্রিপ্ট কম্পোনেন্ট অথবা যেকোন ধরনের টেম্পলেট ফাইল থেকে সিএসএস ক্লাস নামগুলো স্ক্যান করে তারপর স্ক্যানকৃত সিএসএস এর জন্য যে স্টাইল গুলো আছে সেগুলো জেনারেট করে আমাদের কে একটা স্ট্যাটিক সিএসএস ফাইল দেয় যে ফাইল টা এইচটিএমএল ফাইল এর হেড সেকশন এ কল করতে হয়।\n\n### টেইলউইন্ড সিএসএস ইনস্টলেশনের ধাপসমূহঃ\nআমরা বেশ কয়েকভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইনস্টলেশন করতে পারি। যেমনঃ Tailwind CLI ব্যবহার করে, PostCSS ব্যবহার করে এবং CDN ব্যবহার করে। আপনার কাছে মনে হতে পারে CDN ব্যবহার করা সহজ কিন্তু এখানে সবচেয়ে বড় সমস্যা হল এখানে আপনি টেইলউইন্ড কনফিগারেশন এবং কাস্টমাইজেশন ফিচার পাবেন না। আমি এখানে Tailwind CLI ব্যবহার করে কিভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইন্সটল করবেন সেইটা দেখাব\n\n**ধাপ-১ঃ**\nপ্রথমে আমাদের প্রোজেক্ট এ node (আপনার মেশিনে অবশ্যই Node.js ভার্সন 12.13.0 অথবা এর চেয়ে আপগ্রেড ভার্সন ইন্সটল থাকতে হবে) initialize করে নিতে হবে। প্রোজেক্ট ফোল্ডার তৈরি করুন এবং প্রোজেক্ট ফোল্ডার এ টার্মিনাল ওপেন করে নিম্নের কমান্ড টা টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।\n```npm init -y```\n\n**ধাপ-২ঃ**\nএখন দেভ ডিপেন্ডেন্সি হিসাবে টেইলউইন্ড সিএসএস ইন্সটল করতে হবে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।\n```language\nnpm install -D tailwindcss\n```\n\n**ধাপ-৩ঃ**\nএখন `tailwind.config.js` ফাইল তৈরি করতে হবে যেখানে টেইলউইন্ড সিএসএস এর সব ধরনের কনফিগারেশন থাকে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।\n```language\nnpx tailwindcss init\n```\n\n**ধাপ-৪ঃ**\n`tailwind.config.js` ফাইল এর content array এর মধ্যে সকল টেম্পলেট এর এক্সটেনশন লিখে দিতে হবে যেখান থেকে টেইলউইন্ড সিএসএস ইউটিলিটি স্ক্যান করবে। মানে আমরা যে যে ফাইল এ টেইলউইন্ড সিএসএস এর সাপোর্ট চাই সেগুলো। যেমনঃ আমরা এখানে শুধু এইচটিএমএল ফাইল এ টেইলউইন্ড সিএসএস লিখব তাই এখানে .html লিখেছি content array এর মধ্যে।\n```js\n\u002F\u002Ftailwind.config.js file\nmodule.exports = {\ncontent: [\"*.{html}\"],\ntheme: {\nextend: {},\n},\nplugins: [],\n}\n```\n\n**ধাপ-৫ঃ**\nএখন ২টা ফোল্ডার তৈরি করতে হবে। আমি ফোল্ডার এর নাম দিলাম যথাক্রমে src এবং dist। src ফোল্ডার এর মধ্যে `input.css` নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব এবং dist ফোল্ডার এর মধ্যে `output.css` নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব। `input.css` ফাইলটি মূলত Tailwind নিজে ব্যবহার করবে, যেখানে টেইলউইন্ড সিএসএস এর সকল ডিরেক্টিভ গুলো থাকবে। এই ডিরেক্টিভ গুলোর মাধ্যমে টেইলউইন্ড সিএসএস এর base, components এবং utilities সিএসএস গুলো কল হবে। `input.css` ফাইলে আমাদের নিম্নের কোড লিখতে হবে।\n```css\n\u002F* src\u002Finput.css *\u002F\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n**ধাপ-৬ঃ**\nএখন টেইলউইন্ড ডেভেলপার মোডে কিভাবে বিল্ড হবে সেটা বলে দেয়ার জন্য `package.json` ফাইলে আমাদেরকে একটি বিল্ড স্ক্রিপ্ট লিখে দিতে হবে। এই স্ক্রিপ্টের মাধ্যমে Tailwind CLI টেম্পলেট ফাইল স্ক্যান করে স্ট্যাটিক সিএসএস বিল্ড করবে। \n```json\n\"scripts\": {\n    \"build\": \"tailwindcss -i .\u002Fsrc\u002Finput.css -o .\u002Fdist\u002Foutput.css -w\"\n}\n```\nএখানে -i এর পরে ইনপুট সিএসএস ফাইলের এর পাথ, -o এর পরে অউটপুট সিএসএস ফাইলের পাথ নির্দেশ করে দিতে হবে এবং -w এর মাধ্যমে আমরা ওয়াচ ফ্ল্যাগ চালু করে দিয়েছি যাতে `tailwind.config.js` বা `input.css` ফাইলে কোন পরিবর্তন হলে অটোমেটিক টেইলউইন্ড বিল্ড হয়।\n\n**ধাপ-৭ঃ**\nএখন `output.css` ফাইলটি এইচটিএমএল ফাইলের হেডট্যাগ এর মধ্যে কল করতে হবে।\n```html\n\u003Clink rel=\"stylesheet\" href=\"dist\u002Foutput.css\">\n```\n\n**ধাপ-৮ঃ**\nআমাদের প্রোজেক্ট এখন ১০০% প্রস্তুত টেইলউইন্ড সিএসএস লেখার জন্য। যেকোনো এইচটিএমএল ট্যাগের ক্লাস হিসাবে টেইলউইন্ড সিএসএস ইউটিলিটি ক্লাস গুলো লিখলেই প্রত্যাশিত অউটপুট পেয়ে যাবেন। কিন্তু এর আগে টার্মিনাল এ আপনাকে আর একটা  কমান্ড চালু রাখতে হবে সেইটা নিম্নরূপঃ\n```html\nnpm run build\n```\n\n**ধাপ-৯ঃ**\nএই ধাপটা একেবারে অপশনাল আপনি যদি কোড এডিটরে টেইলউইন্ড সিএসএস এর ইন্টেলিজেন্স সাপোর্ট পেতে চান তাহলে টেইলউইন্ড সিএসএস এর নিজস্ব এক্সটেনশন আপনার কোড এডিটরে ইন্সটল করে নিতে পারেন। যেমনঃ Visual Studio Code এর জন্য `Tailwind CSS IntelliSense` এক্সটেনশন।\n![Tailwind CSS IntelliSense](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fpxqrzvkiqxs35zfhdqxr)\n\n### ইউটিলিটি-ফার্স্ট ফান্ডামেন্টালসঃ\nআমি আগেও বলেছি টেইলউইন্ড সিএসএস হল অনেক গুলো ইউটিলিটি সিএসএস ক্লাস নিয়ে গঠিত একটা সিএসএস ফ্রেমওয়ার্ক। ইউটিলিটি ফিচার টাই মূলত টেইলউইন্ড সিএসএসকে অন্য সকল সিএসএস ফ্রেমওয়ার্ক থেকে আলাদা করেছে। বুটস্ট্র্যাপ সিএসএস ফ্রেমওয়ার্ক যেমন আমাদেরকে একটা কমপ্লিট কম্পোনেন্ট দেয় অপরদিকে টেইলউইন্ড সিএসএস ফ্রেমওয়ার্ক আমাদেরকে এমন কমপ্লিট কম্পোনেন্ট দেয় না। বুটস্ট্র্যাপের একটা কম্পোনেন্ট এর মধ্যে margin, padding, width, height, font-size, color এসব আগে থেকেই বলা থাকে আমরা শুধু সেই কম্পোনেন্ট এর এইচটিএমএল মার্কআপটা আমাদের এইচটিএমএল ফাইলে বসালেই সুন্দর একটা কার্ড কম্পোনেন্ট পেয়ে যাই। অন্যদিকে টেইলউইন্ড সিএসএস এমন কম্পোনেন্ট না দিয়ে margin, padding এর মত লো লেভেল সিএসএস দিয়ে তৈরিকৃত অসংখ্য ইউটিলিটি ক্লাস আমাদেরকে প্রোভাইড করে যেগুলো ব্যবহার করে আমরা নিজেদের ইচ্ছা মতো ডিজাইন করতে পারি।\n\nকোন একটা ডিজাইন যদি আমরা ভ্যানিলা সিএসএস ব্যবহার করে করতে চাই তাহলে আমাদেরকে ২টা বিষয় অবশ্যই করতে হয় তা হল অনেকগুলো অর্থবধক ক্লাস এর নাম লিখতে হয় এবং সেই নাম গুলো ধরে ধরে সিএসএস ফাইলে লাইন বাই লাইন সিএসএস লিখতে হয়। এক্ষেত্রে যেমন আমাদের ক্লাস এর অর্থবধক নাম বের করতে যেয়ে সময় নষ্ট হয় আবার সেইসাথে সিএসএস গুলো নিজে থেকে লিখতে হয় এবং একটা সময় দেখা যায় কোড ডুপ্লিকেশন প্রব্লেমটাও চলে আসে।\n\nঅন্যদিকে ইউটিলিটি সিএসএস ব্যবহার করলে আমাদেরকে আর ক্লাস নাম নিয়ে ভাবার দরকার পরে না, টেইলউইন্ড এর ইউটিলিটি ক্লাস গুলোকে ডেকে আনলেই কাজ হয়ে যায়। আপনাদের মনে হতে পারে এতো এতো ইউটিলিটি ক্লাস কিভাবে মনে রাখবো, ভয়ের কিছু নেয় কিছুই মনে রাখতে হবে না, টেইলউইন্ড এর প্রায় সব ইউটিলিটি ক্লাসই ডিক্লারেটিভ এছাড়াও টেইলউইন্ড এর নিজস্ব ইন্টেলিজেন্স সাপোর্ট আপনার কোড এডিটর এ থাকলেতো এসব নিয়ে আপনাকে তেমন কোন চিন্তাই করতে হবে না। কিছুদিন নিয়মিত প্র্যাকটিস করলে সব কিছু আপনার আয়ত্তে চলে আসবে। আরেকটা বিষয় জানা থাকা জরুরী টেইলউইন্ড সিএসএস এর সমস্ত হিসাব করা হয় rem একক দিয়ে, যেমনঃ p-6 মানে padding-1.5rem। চলুন একটা উদাহরণ দেখা যাকঃ\n![Card](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Frmtr9uslctbznyg9jus1)\n\n```html\n\u003Cdiv class=\"p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4\">\n        \u003Cdiv class=\"shrink-0\">\n                \u003Cimg class=\"h-12 w-12\" src=\"https:\u002F\u002Faiarnob.com\u002Ffrontend\u002Fassets\u002Fimages\u002Ffavicons\u002Fapple-touch-icon.png\" alt=\"ChitChat Logo\">\n        \u003C\u002Fdiv>\n        \u003Cdiv>\n                \u003Cdiv class=\"text-xl font-medium text-black\">AI Arnob\u003C\u002Fdiv>\n                \u003Cp class=\"text-slate-500\">You have a new message!\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\nউপড়ের সুন্দর কার্ড টা ডিজাইন করার জন্য কিন্তু আমাদের কোন সিএসএস লিখতে হয় নাই জাস্ট কিছু টেইলউইন্ড ইউটিলিটি ক্লাস ব্যবহার করা হয়েছে। লক্ষ করলে দেখবেন যে, এখানে ইউটিলিটি ক্লাসগুলো কতটা ডিক্লারেটিভ, যেমনঃ \n- p-6 এর মাধ্যমে চারপাশে padding দিয়েছি 1.5rem। \n- max-w-sm এর মাধ্যমে ম্যাক্সিমাম উইড্থ দিয়েছি sm মানে 24rem।\n- mx-auto এর মাধ্যমে মার্জিন বামে এবং ডানে অটো করেছি।\n- bg-white এর মাধ্যমে ব্যাকগ্রাউন্ড কালার সাদা দিয়েছি।\n- rounded-xl এর মাধ্যমে বর্ডার রউন্ড করেছি।\n- shadow-lg এর মাধ্যমে বক্স শ্যাডো অ্যাপ্লাই করেছি।\n- flex এর মাধ্যমে ডিভ টাকে ডিসপ্লে ফ্লেক্স করেছি।\n\nএতক্ষণে হয়ত বুঝে গিয়েছেন কিভাবে টেইলউইন্ড ইউটিলিটি ক্লাসগুলো কাজ করে। টেইলউইন্ড সিএসএস এর খুবই সুন্দর একটা  \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Futility-first\" target=\"_blank\">ডকুমেন্টেশন\u003C\u002Fa> আছে এবং সার্চ ফিচার টাও অনেক দুর্দান্ত কাজ করে, আপনার যা প্রয়োজন জাস্ট সার্চ বক্স এ লিখুন রেজাল্ট চলে আসবে চোখের পলকে।\n\n### বিভিন্ন ধরনের স্টেট হ্যান্ডল করাঃ (Hover, Focus, and Other States) \nএতক্ষণে হয়ত আপনার মনে প্রশ্ন জেগেছে যে, টেইলউইন্ড সিএসএস এর মাধ্যমে আমরা কিভাবে বিভিন্ন ধরনের স্টেট ম্যানেজ করতে পারি। এটার ও একটা খুব ভালো সমাধান আছে। যেকোনো ইউটিলিটি ক্লাসের সামনে আমাদেরকে জাস্ট মডিফায়ার লিখতে হবে। নিম্নের উদাহরণ তা দেখলেই বুঝতে পারবেন।\n![State](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fotj2jyqzd5mydtz67z13)\n```html\n\u003Cbutton class=\"bg-sky-600 hover:bg-sky-700 text-white px-7 py-2 rounded-full\">\n        Click me\n\u003C\u002Fbutton>\n```\nএখানে স্বাভাবিক ভাবে বাটন ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে `bg-sky-600` এবং হুভার স্টেট এ ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে `hover:bg-sky-700`। এখানে hover: টা হল মডিফায়ার। এভাবে :focus, :active, :first-child, :required, ::before, ::after, ::placeholder, ::selection এরকম আরও অনেক মডিফায়ার ব্যবহার করে ইউটিলিটি ক্লাস লেখা যায়। বিভিন্ন স্টেট সম্পর্কে আরও বিস্তারিত জানার জন্য \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fhover-focus-and-other-states\" target=\"_blank\">ডকুমেন্টেশন\u003C\u002Fa> দেখুন।\n\n### রেস্পন্সিভ ডিজাইনঃ\nটেইলউইন্ড সিএসএস এর বিভিন্ন রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট আছে যেগুলো ব্যবহার করে জটিল জটিল রেস্পন্সিভ ইন্টারফেস ডিজাইন করা যায়। টেইলউইন্ড সিএসএস মোবাইল ফার্স্ট এপ্রোচ এ কাজ করে তাই রেস্পন্সিভ এর জন্য ডিফল্ট যে ৫ ধরনের ব্রেকপয়েন্ট(চাইলে আপনি ইচ্ছামত কাস্টোমাইজ করতে পারবেন) আছে সেগুলোতে `min-width` উল্লেখ করা। ব্রেকপয়েন্টগুলো নিম্নরূপঃ\n|ব্রেকপয়েন্ট প্রিফিক্স|মিনিমাম উইড্থ|সিএসএস মিডিয়া কুয়েরি|\n|-|-|-|\n|`sm`|640px|`@media (min-width: 640px) { ... }`|\n|`md`| 768px |`@media (min-width: 768px) { ... }`|\n|`lg`| 1024px |`@media (min-width: 1024px) { ... }`|\n|`xl`| 1280px |`@media (min-width: 1280px) { ... }`|\n|`2xl`| 1536px |`@media (min-width: 1536px) { ... }`|\n\nসরাসরি কোন ইউটিলিটি ক্লাস লিখলে সেটি সবগুলো ডিভাইসে কাজ করে কিন্তু যখন কোন ইউটিলিটি ক্লাসের এর আগে রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট যেমনঃ `sm:` লেখা হবে তখন সেটি ডিভাইস উইড্থ `768px` এর সমান বা এর চেয়ে বড় হলে কাজ করবে।\n```html\n\u003Cimg class=\"w-16 md:w-32 lg:w-48\" src=\"...\">\n```\nএখানে ইমেজ এর ডিফল্ট উইড্থ ১৬, মিডিয়াম স্ক্রীন এর জন্য হবে ৩২ এবং লার্জ স্ক্রীন এর জন্য হবে ৪৮। রেস্পন্সিভ ডিজাইন সম্পর্কে আরও বিস্তারিত জানার জন্য \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fresponsive-design\" target=\"_blank\">ডকুমেন্টেশন\u003C\u002Fa> দেখুন।\n\n### ডার্ক এবং লাইট মোডঃ\nটেইলউইন্ড সিএসএস ব্যবহার করে খুব সহজে আপনি আপনার ওয়েবসাইটে ডার্ক মোড এনাবল করতে পারবেন। সাইটকে ডার্ক করার জন্য টেইলউইন্ড সিএসএস `dark` নামে একটি ভারিয়ান্ট দেয়, যেটি যেকোনো ইউটিলিটি ক্লাস এর সামনে দিলে তখন তা শুধুমাত্র ডার্ক মোডে কাজ করবে।\n```html\n\u003Cbutton class=\"bg-sky-600 hover:bg-sky-700 dark:bg-sky-200\">\n  Save changes\n\u003C\u002Fbutton>\n```\nউপরের কোডে `dark:bg-sky-200` লেখা হয়েছে যার ফলে ডার্ক মোডে বাটনটির ব্যাকগ্রাউন্ড কালার হবে `bg-sky-200`।\n\n**ডার্ক মোড স্ট্রাটেজি**\nডার্ক মোড স্ট্রাটেজি ২ ধরনের হয় `class` স্ট্রাটেজি এবং `media` স্ট্রাটেজি। `tailwind.config.js` ফাইলে ডার্ক মোড স্ট্রাটেজি বলে দিতে হবে।\n```js\n\u002F\u002Ftailwind.config.js file\nmodule.exports = {\n  darkMode: 'class',\n  \u002F\u002F ...\n}\n```\nআপনি যদি কাস্টম বাটন ব্যবহার করে ডার্ক এবং লাইট মোড toggle করতে চান তাহলে `class` স্ট্রাটেজি ব্যবহার করতে পারেন আর যদি চান যে অপারেটিং সিস্টেমের প্রেফারেন্স এর উপর নির্ভর করে সাইট ডার্ক অথবা লাইট হবে তাহলে `media` স্ট্রাটেজি ব্যবহার করতে হবে। ডার্ক মোড সম্পর্কে আরও বিস্তারিত জানার জন্য \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fdark-mode\" target=\"_blank\">ডকুমেন্টেশন\u003C\u002Fa> দেখুন।\n\n### পুনরায় ব্যবহারযোগ্য স্টাইলঃ\nআমাদের প্রোজেক্ট এ অনেক সময় একই ডিজাইনের কম্পোনেন্ট একাধিক জায়গায় ব্যবহার করতে হয় তখন দেখা যায় ইউটিলিটি ক্লাসগুলোর ডুপ্লিকেশন চলে আসে। যেমনঃ নিম্নের ডিজাইনে রাউন্ডেড অবতার ডিজাইন বার বার রিপিট করা হয়েছে যার ফোলে একই ইউটিলিটি ক্লাস এর ডুপ্লিকেশন তৈরি হয়েছে।\n![usercard](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fqaycdhl3zm1eoud2iqlx)\n```html\n\u003Cdiv class=\"p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg\">\n        \u003Cdiv class=\"flex items-center space-x-2 text-base\">\n                \u003Ch4 class=\"font-semibold text-slate-900\">Users\u003C\u002Fh4>\n            \u003Cspan class=\"rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700\">100\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"mt-3 flex -space-x-2 overflow-hidden\">\n                \u003Cimg class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1491528323818-fdd1faba62cc\" alt=\"\"\u002F>\n                \u003Cimg class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1550525811-e5869dd03032\" alt=\"\"\u002F>\n                \u003Cimg class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1500648767791-00dcc994a43e\" alt=\"\"\u002F>\n                \u003Cimg class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1472099645785-5658abf4ff4e\" alt=\"\"\u002F>\n                \u003Cimg class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517365830460-955ce3ccd263\" alt=\"\"\u002F>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"mt-3 text-sm font-medium\">\n                \u003Ca href=\"#\" class=\"text-blue-500\">+ 95 others\u003C\u002Fa>\n        \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\nইউটিলিটি ক্লাস এর ডুপ্লিকেশন সমস্যা সমাধানের জন্য টেইলউইন্ড সিএসএস আমাদের সুন্দর একটা প্রসেস দিয়েছে। `input.css` ফাইলে @apply ডিরেক্টিভ এর মাধ্যমে আমরা আমাদের নিজেরদের পছন্দ মতো ক্লাস নাম দিয়ে নতুন একটা কম্পোনেন্ট তৈরি করতে পারি।\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .user-avatar {\n    @apply inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover;\n  }\n}\n```\nএখন আমরা শুধু `user-avatar` ক্লাস টা ব্যবহার করলেই রাউন্ডেড অবতার ডিজাইনটা পেয়ে যাব। আরেকটা বিষয় `@layer` ডিরেক্টিভের মাধ্যমে নির্ধারিত হয় আমাদের তৈরি করা স্টাইল base, components নাকি utilities এর আন্ডার এ যাবে সেইটা।\n\nএখানে আমি চেষ্টা করেছি নতুনদের জন্য টেইলউইন্ড সিএসএস এর বেসিক টা তুলে ধরতে এবং টেইলউইন্ড ভীতিটা দূর করতে। এই লেখাটি মনোযোগ দিয়ে পরে থাকলে আপনি টেইলউইন্ড সিএসএস ব্যবহার করে ডিজাইন করার জন্য প্রাথমিক ভাবে প্রস্তুত। টেইলউইন্ড সিএসএস এর আরও অ্যাডভান্স কিছু বিষয় আছে যেগুলো আপনারা অফিসিয়াল \u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Finstallation\" target=\"_blank\">ডকুমেন্টেশন\u003C\u002Fa> থেকে দেখে নিতে পারেন।",{"self":47,"collection":53,"about":56,"author":59,"replies":63,"version-history":66,"wp:featuredmedia":69,"wp:attachment":72,"wp:term":75,"curies":82},[48],{"href":49,"targetHints":50},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F49",{"allow":51},[52],"GET",[54],{"href":55},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[57],{"href":58},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[60],{"embeddable":61,"href":62},true,"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[64],{"embeddable":61,"href":65},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=49",[67],{"count":44,"href":68},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F49\u002Frevisions",[70],{"embeddable":61,"href":71},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F50",[73],{"href":74},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=49",[76,79],{"taxonomy":77,"embeddable":61,"href":78},"category","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=49",{"taxonomy":80,"embeddable":61,"href":81},"post_tag","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=49",[83],{"name":84,"href":85,"templated":61},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",[87,109],{"id":27,"count":88,"description":22,"link":89,"name":90,"slug":90,"taxonomy":80,"meta":91,"_links":92},2,"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fcss\u002F","css",[],{"self":93,"collection":98,"about":101,"wp:post_type":104,"curies":107},[94],{"href":95,"targetHints":96},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F29",{"allow":97},[52],[99],{"href":100},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[102],{"href":103},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[105],{"href":106},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=29",[108],{"name":84,"href":85,"templated":61},{"id":28,"count":19,"description":22,"link":110,"name":111,"slug":111,"taxonomy":80,"meta":112,"_links":113},"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Ftailwindcss\u002F","tailwindcss",[],{"self":114,"collection":119,"about":121,"wp:post_type":123,"curies":126},[115],{"href":116,"targetHints":117},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F30",{"allow":118},[52],[120],{"href":100},[122],{"href":103},[124],{"href":125},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=30",[127],{"name":84,"href":85,"templated":61},1781010863875]