[{"data":1,"prerenderedAt":171},["ShallowReactive",2],{"blog-tag-css":3,"blog-tag-posts-css":32},{"id":4,"count":5,"description":6,"link":7,"name":8,"slug":8,"taxonomy":9,"meta":10,"_links":11},29,2,"","https:\u002F\u002Fportal.pluginizelab.com\u002Ftag\u002Fcss\u002F","css","post_tag",[],{"self":12,"collection":18,"about":21,"wp:post_type":24,"curies":27},[13],{"href":14,"targetHints":15},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F29",{"allow":16},[17],"GET",[19],{"href":20},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[22],{"href":23},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[25],{"href":26},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=29",[28],{"name":29,"href":30,"templated":31},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",true,[33,111],{"id":34,"date":35,"date_gmt":35,"guid":36,"modified":38,"modified_gmt":38,"slug":39,"status":40,"type":41,"link":37,"title":42,"content":44,"excerpt":47,"author":49,"featured_media":50,"comment_status":51,"ping_status":51,"sticky":46,"template":6,"format":52,"meta":53,"categories":54,"tags":55,"class_list":56,"post_image_original":65,"devto_meta":66,"_links":72},45,"2024-08-10T18:24:54",{"rendered":37},"https:\u002F\u002Fportal.pluginizelab.com\u002F%e0%a6%ae%e0%a6%be%e0%a6%a4%e0%a7%83%e0%a6%ad%e0%a6%be%e0%a6%b7%e0%a6%be-%e0%a6%ac%e0%a6%be%e0%a6%82%e0%a6%b2%e0%a6%be%e0%a6%af%e0%a6%bc-%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8\u002F","2026-08-17T12:17:40","%e0%a6%ae%e0%a6%be%e0%a6%a4%e0%a7%83%e0%a6%ad%e0%a6%be%e0%a6%b7%e0%a6%be-%e0%a6%ac%e0%a6%be%e0%a6%82%e0%a6%b2%e0%a6%be%e0%a6%af%e0%a6%bc-%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8","publish","post",{"rendered":43},"মাতৃভাষা বাংলায় সিএসএস ফ্লেক্সবক্স",{"rendered":45,"protected":46},"\u003Cp>আপনি যদি সিএসএস এ নতুন হন এবং যদি পিওর সিএসএস ব্যবহার করে সুন্দর সুন্দর ফ্লেক্সিবল লেআউট তৈরি করতে চান তাহলে সিএসএস ফ্লেক্সবক্স সম্পর্কে পরিষ্কার ধারনা রাখাটা আপনার জন্য খুবই জরুরী। এমনকি জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক গুলো যেমনঃ Bootstrap লেআউট গ্রিড সিস্টেম ফ্লেক্সবক্স এর মাধ্যমে হ্যান্ডেল করে এছাড়াও আপনি যদি Tailwind সিএসএস নিয়েও কাজ করতে চান তাহলেও ফ্লেক্সবক্স জানা থাকাটা জরুরী। আমি এই আর্টিকেলটিতে চেষ্টা করব সিএসএস ৩.০ এর এই গুরুত্বপূর্ণ ডিসপ্লে প্রপার্টি ফ্লেক্সবক্স সম্পর্কে খুব সহজে পূর্ণাঙ্গ ধারনা দেয়ার। তাহলে চলুন শুরু করা যাক।\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%AB%E0%A7%8D%E0%A6%B2%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%AC%E0%A6%95%E0%A7%8D%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%AB%E0%A7%8D%E0%A6%B2%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%AC%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%83\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  সংক্ষেপে ফ্লেক্সবক্সঃ\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>সিএসএস ফ্লেক্সবক্স হল একটি ফ্লেক্সিবল ডিসপ্লে প্রপার্টি। ফ্লেক্সবক্স এর সাহায্যে আমরা খুব সহজে একটি কন্টেইনার এর মধ্যে থাকা আইটেম গুলোকে x-axis অথবা y-axis বরাবর layout, space এবং alignment ঠিক করতে পারি।\u003C\u002Fp>\n\u003Cp>যে এলেমেন্ট এর ওপর display:flex প্রপার্টি অ্যাপ্লাই করা হয় সেটাকে ফ্লেক্স কন্টেইনার বলে এবং ফ্লেক্স কন্টেইনার এর মধ্যে যে আইটেম গুলো থাকে সেগুলোকে ফ্লেক্স আইটেম বলে।\u003C\u002Fp>\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%2Ftlz658oftrjunvywtmx0\" 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%2Ftlz658oftrjunvywtmx0\" alt=\"FlexlayoutAI.png\" loading=\"lazy\" width=\"1125\" height=\"390\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"%E0%A6%AB%E0%A7%8D%E0%A6%B2%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%AC%E0%A6%95%E0%A7%8D%E0%A6%B8-%E0%A6%95%E0%A6%A8%E0%A7%8D%E0%A6%9F%E0%A7%87%E0%A6%87%E0%A6%A8%E0%A6%BE%E0%A6%B0-%E0%A6%AC%E0%A6%BF%E0%A6%B8%E0%A7%8D%E0%A6%A4%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%A4%E0%A6%83\" href=\"#%E0%A6%AB%E0%A7%8D%E0%A6%B2%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%AC%E0%A6%95%E0%A7%8D%E0%A6%B8-%E0%A6%95%E0%A6%A8%E0%A7%8D%E0%A6%9F%E0%A7%87%E0%A6%87%E0%A6%A8%E0%A6%BE%E0%A6%B0-%E0%A6%AC%E0%A6%BF%E0%A6%B8%E0%A7%8D%E0%A6%A4%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%A4%E0%A6%83\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  ফ্লেক্সবক্স কন্টেইনার বিস্তারিতঃ\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>কোন একটি এইচটিএমএল এলেমেন্ট কে display:flex প্রপার্টি বলে দিলেই এটি ফ্লেক্স কন্টেইনার হয়ে যায় এবং ফ্লেক্স কন্টেইনার এর সরাসরি চাইল্ড এলেমেন্ট গুলো ফ্লেক্স আইটেম হয়ে যায়। সাথে সাথে ফ্লেক্স আইটেম গুলো বাম দিক থেকে ডান দিক বরাবর অবস্থান করে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.container\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">display\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex\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>ফ্লেক্স কন্টেইনার বোঝার জন্য নিচের চিত্র টি দেখুন।\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%2Fhcxltlaomeyxhzcg3zgo\" 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%2Fhcxltlaomeyxhzcg3zgo\" alt=\"FlexContainer.png\" loading=\"lazy\" width=\"1274\" height=\"238\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>flex-direction:\u003C\u002Fstrong>\u003Cbr \u002F>\nফ্লেক্স আইটেম গুলোকে x-axis অথবা y-axis বরাবর অগ্রসর করানোর জন্য flex-direction প্রপার্টি ব্যবহার করা হয়। flex-direction প্রপার্টির ৪ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.container\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">display\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">flex-direction\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">row\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">row-reverse\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">column\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">column-reverse\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>\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%2Fpcghdbw4myzqpobkjpc4\" 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%2Fpcghdbw4myzqpobkjpc4\" alt=\"flexdirectionfigure.png\" loading=\"lazy\" width=\"\" height=\"\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>flex-direction: row; ফ্লেক্স আইটেম গুলো বাম থেকে ডানে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>flex-direction: row-reverse; ফ্লেক্স আইটেম গুলো ডান থেকে বামে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>flex-direction: column; ফ্লেক্স আইটেম গুলো উপর থেকে নিচে y-axis বরাবর অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>flex-direction: column-reverse; ফ্লেক্স আইটেম গুলো নিচে থেকে উপরে y-axis বরাবর অবস্থান করবে।\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>flex-wrap:\u003C\u002Fstrong>\u003Cbr \u002F>\nবাই ডিফল্ট ফ্লেক্স আইটেম গুলো nowrap করা থাকে যে কারণে আইটেম গুলো একটি লাইনে দেখায়। এটির একটা সমস্যা হল ডিভাইস উইড্থ ছোট হলে যে কয়েকটা আইটেম ডিভাইস এ দেখানো সম্ভব সেগুলো দেখাবে এবং অন্য আইটেম গুলোকে শেষের দিক থেকে দেখা যাবে না কারণ সেগুলো overflow হয়ে যাবে। flex-wrap ব্যবহার করে খুব সহজেই এই বেহেভিওর পরিবর্তন করা যায়। flex-wrap প্রপার্টির ৩ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.container\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">display\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">flex-wrap\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nb\">nowrap\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">wrap\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">wrap-reverse\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>\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%2Fljcwcbg3nsfy2umcihj8\" 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%2Fljcwcbg3nsfy2umcihj8\" alt=\"flexwrap.png\" loading=\"lazy\" width=\"1408\" height=\"496\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>flex-wrap: nowrap; সকল ফ্লেক্স আইটেম গুলো একটি লাইন এ অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>flex-wrap: wrap; প্রয়োজন অনুসারে ফ্লেক্স আইটেম গুলো উপর থেকে নিচে wrap হবে (এটি ডিভাইস উইড্থ এর সাথে রেস্পন্সিভলি পরিবর্তন হয়)।\u003C\u002Fli>\n\u003Cli>flex-wrap: wrap-reverse; প্রয়োজন অনুসারে ফ্লেক্স আইটেম গুলো বিপরীত ভাবে wrap হবে (এটি ডিভাইস উইড্থ এর সাথে রেস্পন্সিভলি পরিবর্তন হয়)।\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>flex-flow:\u003C\u002Fstrong>\u003Cbr \u002F>\nflex-direction এবং flex-wrap এর শর্টহ্যান্ড হল flex-flow। প্রথমে লিখতে হবে flex-direction এবং পরে লিখতে হবে flex-wrap প্রপার্টি। flex-flow এর ডিফল্ট মান হলঃ flex-flow: row nowrap;\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.container\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">display\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">flex-flow\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">row\u003C\u002Fspan> \u003Cspan class=\"n\">wrap\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>justify-content:\u003C\u002Fstrong>\u003Cbr \u002F>\njustify-content ব্যবহার করে ফ্লেক্স আইটেম গুলোকে প্রধান অক্ষ বরাবর সাজানো যায়। justify-content প্রপার্টির ৬ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.container\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">display\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">justify-content\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex-start\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">flex-end\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"nb\">center\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">space-between\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">space-around\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">space-evenly\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>\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%2Fmfdxohuss71dr0g4rzhv\" 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%2Fmfdxohuss71dr0g4rzhv\" alt=\"justifycontent.png\" loading=\"lazy\" width=\"1409\" height=\"720\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>justify-content: flex-start; ফ্লেক্স আইটেম গুলো কন্টেইনার এর শুরু থেকে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>justify-content: flex-end; ফ্লেক্স আইটেম গুলো কন্টেইনার এর শেষে থেকে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>justify-content: center; ফ্লেক্স আইটেম গুলো কন্টেইনার এর কেন্দ্রে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>justify-content: space-between; প্রথম ফ্লেক্স আইটেম একদম কন্টেইনার এর শুরুতে থাকবে এবং শেষ ফ্লেক্স আইটেম একদম কন্টেইনার এর শেষে থাকবে, মাঝের আইটেম গুলো নিজেদের আগে ও পরে সমান জায়গা নিয়ে অবস্থান করবে বা ছড়িয়ে যাবে।\u003C\u002Fli>\n\u003Cli>justify-content: space-around; ফ্লেক্স আইটেম নিজেদের আগে ও পরে সমান জায়গা নিয়ে ছড়িয়ে যাবে। এক্ষেত্রে প্রথম আইটেম এর শুরুতে এবং শেষ আইটেম এর পরের ফাঁকা জায়গা এবং আইটেম গুলোর মাঝে ফাঁকা জায়গা সমান হয় না।\u003C\u002Fli>\n\u003Cli>justify-content: space-evenly; সবগুলো ফ্লেক্স আইটেম এর আগে ও পরে সমান জায়গা থাকে। কন্টেইনার এর মোট ফাঁকা জায়গা আইটেম এর আগে ও পরে সমান ভাবে থাকে।\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>align-items:\u003C\u002Fstrong>\u003Cbr \u002F>\nফ্লেক্স কন্টেইনার এর প্রত্যেকটা লাইন এর আইটেম গুলোকে উপর থেকে নিচে বরাবর align করার জন্য align-items প্রপার্টি ব্যবহার করা হয়। align-items প্রপার্টির ৫ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.container\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">display\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">align-items\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex-start\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">stretch\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">flex-end\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"nb\">center\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"nb\">baseline\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>\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%2Fiatbca1ayiowrrhehxpq\" 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%2Fiatbca1ayiowrrhehxpq\" alt=\"alignitems.png\" loading=\"lazy\" width=\"1408\" height=\"476\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>align-items: flex-start; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের উপড়ে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>align-items: stretch; একটি ফ্লেক্স কন্টেইনার এর মধ্যে যদি একটি লাইনেয় আইটেম থাকে তাহলে আইটেম গুলো পুরো কন্টেইনার এর উচ্চতা টাই নিবে আর দুই লাইন এ আইটেম থাকলে পুরো কন্টেইনার এর উচ্চতা এর অর্ধেক জায়গা নিবে।\u003C\u002Fli>\n\u003Cli>align-items: flex-end; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের নিচে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>align-items: center; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের উপর থেকে নিচ বরাবর কেন্দ্রে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>align-items: baseline; ফ্লেক্স আইটেম গুলো তাদের baseline অনুসারে align হবে।\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>align-content:\u003C\u002Fstrong>\u003Cbr \u002F>\nফ্লেক্স কন্টেইনার এর প্রত্যেকটা লাইনকে আলাদা আলাদা ভাবে চিন্তা না করে একটি কন্টেন্ট হিসাবে চিন্তা করে ক্রস আক্সিস বরাবর align করার জন্য align-content ব্যবহার করা হয়। এটি অনেকটা justify-content এর মত বলতে পারেন। justify-content মেইন আক্সিস বরাবর কাজ করে অপরদিকে align-content ক্রস আক্সিস বরাবর কাজ করে। align-content প্রপার্টির ৭ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.container\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">display\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">align-content\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex-start\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">flex-end\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"nb\">center\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">stretch\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">space-between\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">space-around\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">space-evenly\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>\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%2Fe2juqgbbkfonujwcuzrv\" 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%2Fe2juqgbbkfonujwcuzrv\" alt=\"aligncontent.png\" loading=\"lazy\" width=\"1896\" height=\"758\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>align-content: flex-start; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো কন্টেইনার এর শুরু থেকে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>align-content: flex-end; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো কন্টেইনার এর শেষে থেকে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>align-content: center; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো কন্টেইনার এর কেন্দ্রে অবস্থান করবে।\u003C\u002Fli>\n\u003Cli>align-content: stretch; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো stretch হয়ে যায়।\u003C\u002Fli>\n\u003Cli>align-content: space-between; ক্রস আক্সিস বরাবর প্রথম ফ্লেক্স আইটেম একদম কন্টেইনার এর শুরুতে থাকবে এবং শেষ ফ্লেক্স আইটেম একদম কন্টেইনার এর শেষে থাকবে, মাঝের আইটেম গুলো নিজেদের আগে ও পরে সমান জায়গা নিয়ে অবস্থান করবে বা ছড়িয়ে যাবে।\u003C\u002Fli>\n\u003Cli>align-content: space-around; ক্রস আক্সিস বরাবর ফ্লেক্স আইটেম নিজেদের আগে ও পরে সমান জায়গা নিয়ে ছড়িয়ে যাবে। এক্ষেত্রে প্রথম আইটেম এর শুরুতে এবং শেষ আইটেম এর পরের ফাঁকা জায়গা এবং আইটেম গুলোর মাঝে ফাঁকা জায়গা সমান হয় না।\u003C\u002Fli>\n\u003Cli>align-content: space-evenly; ক্রস আক্সিস বরাবর সবগুলো ফ্লেক্স আইটেম এর আগে ও পরে সমান জায়গা থাকে। কন্টেইনার এর মোট ফাঁকা জায়গা আইটেম এর আগে ও পরে সমান ভাবে থাকে।\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>gap, row-gap, column-gap:\u003C\u002Fstrong>\u003Cbr \u002F>\nফ্লেক্স আইটেম গুলোর মধ্যে ফাঁকা জায়গা রাখার জন্য gap প্রপার্টি ব্যবহার করা হয়।\u003Cbr \u002F>\nফ্লেক্স আইটেম গুলোর মধ্যে মেইন আক্সিস বরাবর ফাঁকা জায়গা রাখার জন্য row-gap প্রপার্টি ব্যবহার করা হয়।\u003Cbr \u002F>\nফ্লেক্স আইটেম গুলোর মধ্যে ক্রস আক্সিস বরাবর ফাঁকা জায়গা রাখার জন্য column-gap প্রপার্টি ব্যবহার করা হয়।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.container\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">display\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n        \u003Cspan class=\"py\">gap\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"m\">24px\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n          \u003Cspan class=\"c\">\u002F* gap: 24px 30px; *\u002F\u003C\u002Fspan> \u003Cspan class=\"c\">\u002F* row-gap column-gap *\u002F\u003C\u002Fspan>\n          \u003Cspan class=\"c\">\u002F* row-gap: 24px; *\u002F\u003C\u002Fspan>\n          \u003Cspan class=\"c\">\u002F* column-gap: 24px; *\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\u003Ch3>\n  \u003Ca name=\"%E0%A6%AB%E0%A7%8D%E0%A6%B2%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%AC%E0%A6%95%E0%A7%8D%E0%A6%B8-%E0%A6%86%E0%A6%87%E0%A6%9F%E0%A7%87%E0%A6%AE-%E0%A6%AC%E0%A6%BF%E0%A6%B8%E0%A7%8D%E0%A6%A4%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%A4%E0%A6%83\" href=\"#%E0%A6%AB%E0%A7%8D%E0%A6%B2%E0%A7%87%E0%A6%95%E0%A7%8D%E0%A6%B8%E0%A6%AC%E0%A6%95%E0%A7%8D%E0%A6%B8-%E0%A6%86%E0%A6%87%E0%A6%9F%E0%A7%87%E0%A6%AE-%E0%A6%AC%E0%A6%BF%E0%A6%B8%E0%A7%8D%E0%A6%A4%E0%A6%BE%E0%A6%B0%E0%A6%BF%E0%A6%A4%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%2Fstdlnqmmkfw5yavzijop\" 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%2Fstdlnqmmkfw5yavzijop\" alt=\"flexitems.png\" loading=\"lazy\" width=\"1274\" height=\"100\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>order:\u003C\u002Fstrong>\u003Cbr \u002F>\nফ্লেক্স আইটেম গুলোর ডিফল্ট অর্ডার হিসাবে ০ থাকে। এইচটিএমএল কোড অনুযায়ী আইটেম গুলোর অর্ডার থাকে কিন্তু আলাদা করে কোন একটি আইটেম এর অর্ডার এর মান নির্ধারণ করে দিলে সেই অর্ডার অনুযায়ী আইটেম গুলো অবস্থান করবে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.container\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">display\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"c\">\u002F* অর্ডার পরিবর্তন করার কোড *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"nc\">.item\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">order\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"m\">2\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"nc\">.item-1\u003C\u002Fspan>\u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">order\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"m\">1\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>\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%2Fknlvidgdqk4fprrgvtfo\" 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%2Fknlvidgdqk4fprrgvtfo\" alt=\"Order.png\" loading=\"lazy\" width=\"1409\" height=\"302\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>flex-grow:\u003C\u002Fstrong>\u003Cbr \u002F>\nমেইন আক্সিস বরাবর একটি লাইনে যতগুলো আইটেম থাকে সেই আইটেম গুলো ছাড়া যদি কোন ফাঁকা জায়গা থাকে তাহলে সেই ফাঁকা জায়গা সবগুলো আইটেম এর মধ্যে সমান ভাবে ছড়িয়ে দেওয়া অথবা কোন একটি নির্দিষ্ট আইটেম এর মধ্যে ছড়িয়ে দেওয়ার জন্য flex-grow ব্যবহার হয়। সবগুলো আইটেম এর মধ্যে ফাঁকা জায়গা সমানভাবে ছড়িয়ে দেওয়ার জন্য সবগুলো আইটেম কে flex-grow: 1; দিতে হয়। এক্ষেত্রে আইটেম গুলোর উইড্থ নির্ধারণ করা থাকলেও যখন ফাঁকা জায়গা পাবে সেই ফাঁকা যায়গা নিজেদের মধ্যে নিয়ে নিবে এবং সমান ভাবে আকৃতি পরিবর্তন করবে। অথবা কোন একটি নির্দিষ্ট আইটেম কে টার্গেট করেও flex-grow অ্যাপ্লাই করা যায়। ডিফল্ট flex-grow এর মান থাকে ০।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>        display: flex;\n}\n.item-3{\n        flex-grow: 1;\n}\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\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%2Ffajijhxoudx1sd0ff64o\" 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%2Ffajijhxoudx1sd0ff64o\" alt=\"flexGrow.png\" loading=\"lazy\" width=\"1408\" height=\"302\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>flex-shrink:\u003C\u002Fstrong>\u003Cbr \u002F>\nflex-shrink ঠিক flex-grow এর উল্টো। ব্রাউজার উইন্ডো ছোট করার সাথে সাথে আইটেম গুলো shrink করবে কিনা সেটা নির্ভর করে flex-shrink এর উপর। ডিফল্ট মান থাকে ১ যার কারণে আইটেম গুলো shrink করে কিন্তু shrink এর মান ০ করে দিলে রেস্পন্সিভনেস থাকবে না এবং আইটেম গুলো ব্রাউজার উইন্ডো এর বাহিরে চলে যাবে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.item-1\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"nl\">flex-shrink\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"m\">0\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c\">\u002F* ডিফল্ট 1 *\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>\u003Cstrong>flex-basis:\u003C\u002Fstrong>\u003Cbr \u002F>\nflex-basis হল কোন একটি আইটেম এর মিনিমাম কত উইড্থ হবে সেইটা নির্ধারণ করে দেওয়া। এটা অনেকটা min-width প্রপার্টি এর মত কিন্তু flex-basis এর সবচেয়ে বড় সুবিধা হল ব্রাউজার উইন্ডো উইড্থ যদি আইটেম গুলোর flex-basis এর মোট মানের তুলনায় ছোট হয় তাহলে আইটেম overflow না হয়ে রেস্পন্সিভলি উইড্থ টা কমিয়ে নিবে।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.item\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"nl\">flex-basis\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"m\">500px\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c\">\u002F* ডিফল্ট auto *\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>\u003Cstrong>flex:\u003C\u002Fstrong>\u003Cbr \u002F>\nflex-grow, flex-shrink এবং flex-basis একসাথে লেখার জন্য আমরা flex শর্টহ্যান্ড টা ব্যবহার করতে পারি।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.item\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"nl\">flex\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"n\">flex-grow\u003C\u002Fspan> \u003Cspan class=\"n\">flex-shrink\u003C\u002Fspan> \u003Cspan class=\"n\">flex-basis\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>align-self:\u003C\u002Fstrong>\u003Cbr \u002F>\nalign-self প্রপার্টি ব্যবহার করে কোন একটা নির্দিষ্ট ফ্লেক্স আইটেম এর ডিফল্ট এলাইনমেন্ট ওভাররাইড করা যায়। align-items এর মতো align-self এ একয় রকম মান (stretch, center, flex-start, flex-end, baseline) ব্যবহার করা যায় এবং একই লজিক এ কাজ করে। তবে align-self এর ডিফল্ট মান হল auto।\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight css\">\u003Ccode>\u003Cspan class=\"nc\">.item-2\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"nl\">align-self\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nb\">auto\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">flex-start\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">flex-end\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"nb\">center\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"nb\">baseline\u003C\u002Fspan> \u003Cspan class=\"err\">||\u003C\u002Fspan> \u003Cspan class=\"n\">stretch\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>\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%2Frctgk0qrixptvniwq78z\" 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%2Frctgk0qrixptvniwq78z\" alt=\"alignself.png\" loading=\"lazy\" width=\"1408\" height=\"294\">\u003C\u002Fa>\u003C\u002Fp>\n",false,{"rendered":48,"protected":46},"\u003Cp>আপনি যদি সিএসএস এ নতুন হন এবং যদি পিওর সিএসএস ব্যবহার করে সুন্দর সুন্দর ফ্লেক্সিবল লেআউট তৈরি করতে…\u003C\u002Fp>\n",1,46,"open","standard",{"footnotes":6},[49],[4],[57,41,58,59,60,61,62,63,64],"post-45","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-content\u002Fuploads\u002F2024\u002F08\u002Fdevto-1954787-cover.webp",{"edited_at":67,"published_at":68,"reactions":69,"comments":69,"reading_time":70,"body_markdown":71},null,"2024-08-10T18:24:54Z",0,3,"আপনি যদি সিএসএস এ নতুন হন এবং যদি পিওর সিএসএস ব্যবহার করে সুন্দর সুন্দর ফ্লেক্সিবল লেআউট তৈরি করতে চান তাহলে সিএসএস ফ্লেক্সবক্স সম্পর্কে পরিষ্কার ধারনা রাখাটা আপনার জন্য খুবই জরুরী। এমনকি জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক গুলো যেমনঃ Bootstrap লেআউট গ্রিড সিস্টেম ফ্লেক্সবক্স এর মাধ্যমে হ্যান্ডেল করে এছাড়াও আপনি যদি Tailwind সিএসএস নিয়েও কাজ করতে চান তাহলেও ফ্লেক্সবক্স জানা থাকাটা জরুরী। আমি এই আর্টিকেলটিতে চেষ্টা করব সিএসএস ৩.০ এর এই গুরুত্বপূর্ণ ডিসপ্লে প্রপার্টি ফ্লেক্সবক্স সম্পর্কে খুব সহজে পূর্ণাঙ্গ ধারনা দেয়ার। তাহলে চলুন শুরু করা যাক।\n\n### সংক্ষেপে ফ্লেক্সবক্সঃ\nসিএসএস ফ্লেক্সবক্স হল একটি ফ্লেক্সিবল ডিসপ্লে প্রপার্টি। ফ্লেক্সবক্স এর সাহায্যে আমরা খুব সহজে একটি কন্টেইনার এর মধ্যে থাকা আইটেম গুলোকে x-axis অথবা y-axis বরাবর layout, space এবং alignment ঠিক করতে পারি।\n\nযে এলেমেন্ট এর ওপর display:flex প্রপার্টি অ্যাপ্লাই করা হয় সেটাকে ফ্লেক্স কন্টেইনার বলে এবং ফ্লেক্স কন্টেইনার এর মধ্যে যে আইটেম গুলো থাকে সেগুলোকে ফ্লেক্স আইটেম বলে।\n\nএকটি ফ্লেক্স কন্টেইনার এর দুইটি অক্ষ থাকে একটি হচ্ছে মেইন বা প্রধান অক্ষ এবং আরেকটি হচ্ছে ক্রস অক্ষ। এক নজরে একটি চিত্রের সাহায্যে ফ্লেক্স লেআউট দেখে নেয়া যাক।\n![FlexlayoutAI.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Ftlz658oftrjunvywtmx0)\n\n### ফ্লেক্সবক্স কন্টেইনার বিস্তারিতঃ\nকোন একটি এইচটিএমএল এলেমেন্ট কে display:flex প্রপার্টি বলে দিলেই এটি ফ্লেক্স কন্টেইনার হয়ে যায় এবং ফ্লেক্স কন্টেইনার এর সরাসরি চাইল্ড এলেমেন্ট গুলো ফ্লেক্স আইটেম হয়ে যায়। সাথে সাথে ফ্লেক্স আইটেম গুলো বাম দিক থেকে ডান দিক বরাবর অবস্থান করে। \n```css\n.container{\n        display: flex;\n}\n```\n\nফ্লেক্স কন্টেইনার বোঝার জন্য নিচের চিত্র টি দেখুন।\n![FlexContainer.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fhcxltlaomeyxhzcg3zgo)\n\n**flex-direction:**\nফ্লেক্স আইটেম গুলোকে x-axis অথবা y-axis বরাবর অগ্রসর করানোর জন্য flex-direction প্রপার্টি ব্যবহার করা হয়। flex-direction প্রপার্টির ৪ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n```css\n.container{\n        display: flex;\n        flex-direction: row || row-reverse || column || column-reverse;\n}\n```\n![flexdirectionfigure.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fpcghdbw4myzqpobkjpc4)\n\n- flex-direction: row; ফ্লেক্স আইটেম গুলো বাম থেকে ডানে অবস্থান করবে।\n- flex-direction: row-reverse; ফ্লেক্স আইটেম গুলো ডান থেকে বামে অবস্থান করবে।\n- flex-direction: column; ফ্লেক্স আইটেম গুলো উপর থেকে নিচে y-axis বরাবর অবস্থান করবে।\n- flex-direction: column-reverse; ফ্লেক্স আইটেম গুলো নিচে থেকে উপরে y-axis বরাবর অবস্থান করবে।\n\n**flex-wrap:**\nবাই ডিফল্ট ফ্লেক্স আইটেম গুলো nowrap করা থাকে যে কারণে আইটেম গুলো একটি লাইনে দেখায়। এটির একটা সমস্যা হল ডিভাইস উইড্থ ছোট হলে যে কয়েকটা আইটেম ডিভাইস এ দেখানো সম্ভব সেগুলো দেখাবে এবং অন্য আইটেম গুলোকে শেষের দিক থেকে দেখা যাবে না কারণ সেগুলো overflow হয়ে যাবে। flex-wrap ব্যবহার করে খুব সহজেই এই বেহেভিওর পরিবর্তন করা যায়। flex-wrap প্রপার্টির ৩ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n```css\n.container{\n        display: flex;\n        flex-wrap: nowrap || wrap || wrap-reverse;\n}\n```\n![flexwrap.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fljcwcbg3nsfy2umcihj8)\n\n- flex-wrap: nowrap; সকল ফ্লেক্স আইটেম গুলো একটি লাইন এ অবস্থান করবে।\n- flex-wrap: wrap; প্রয়োজন অনুসারে ফ্লেক্স আইটেম গুলো উপর থেকে নিচে wrap হবে (এটি ডিভাইস উইড্থ এর সাথে রেস্পন্সিভলি পরিবর্তন হয়)।\n- flex-wrap: wrap-reverse; প্রয়োজন অনুসারে ফ্লেক্স আইটেম গুলো বিপরীত ভাবে wrap হবে (এটি ডিভাইস উইড্থ এর সাথে রেস্পন্সিভলি পরিবর্তন হয়)।\n\n**flex-flow:**\nflex-direction এবং flex-wrap এর শর্টহ্যান্ড হল flex-flow। প্রথমে লিখতে হবে flex-direction এবং পরে লিখতে হবে flex-wrap প্রপার্টি। flex-flow এর ডিফল্ট মান হলঃ flex-flow: row nowrap;\n```css\n.container{\n        display: flex;\n        flex-flow: row wrap;\n}\n```\n\n**justify-content:**\njustify-content ব্যবহার করে ফ্লেক্স আইটেম গুলোকে প্রধান অক্ষ বরাবর সাজানো যায়। justify-content প্রপার্টির ৬ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n\n```css\n.container{\n        display: flex;\n        justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly;\n}\n```\n\n![justifycontent.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fmfdxohuss71dr0g4rzhv)\n\n- justify-content: flex-start; ফ্লেক্স আইটেম গুলো কন্টেইনার এর শুরু থেকে অবস্থান করবে।\n- justify-content: flex-end; ফ্লেক্স আইটেম গুলো কন্টেইনার এর শেষে থেকে অবস্থান করবে।\n- justify-content: center; ফ্লেক্স আইটেম গুলো কন্টেইনার এর কেন্দ্রে অবস্থান করবে।\n- justify-content: space-between; প্রথম ফ্লেক্স আইটেম একদম কন্টেইনার এর শুরুতে থাকবে এবং শেষ ফ্লেক্স আইটেম একদম কন্টেইনার এর শেষে থাকবে, মাঝের আইটেম গুলো নিজেদের আগে ও পরে সমান জায়গা নিয়ে অবস্থান করবে বা ছড়িয়ে যাবে।\n- justify-content: space-around; ফ্লেক্স আইটেম নিজেদের আগে ও পরে সমান জায়গা নিয়ে ছড়িয়ে যাবে। এক্ষেত্রে প্রথম আইটেম এর শুরুতে এবং শেষ আইটেম এর পরের ফাঁকা জায়গা এবং আইটেম গুলোর মাঝে ফাঁকা জায়গা সমান হয় না।\n- justify-content: space-evenly; সবগুলো ফ্লেক্স আইটেম এর আগে ও পরে সমান জায়গা থাকে। কন্টেইনার এর মোট ফাঁকা জায়গা আইটেম এর আগে ও পরে সমান ভাবে থাকে।\n\n**align-items:**\nফ্লেক্স কন্টেইনার এর প্রত্যেকটা লাইন এর আইটেম গুলোকে উপর থেকে নিচে বরাবর align করার জন্য align-items প্রপার্টি ব্যবহার করা হয়। align-items প্রপার্টির ৫ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n```css\n.container{\n        display: flex;\n        align-items: flex-start || stretch || flex-end || center || baseline;\n}\n```\n![alignitems.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fiatbca1ayiowrrhehxpq)\n\n- align-items: flex-start; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের উপড়ে অবস্থান করবে।\n- align-items: stretch; একটি ফ্লেক্স কন্টেইনার এর মধ্যে যদি একটি লাইনেয় আইটেম থাকে তাহলে আইটেম গুলো পুরো কন্টেইনার এর উচ্চতা টাই নিবে আর দুই লাইন এ আইটেম থাকলে পুরো কন্টেইনার এর উচ্চতা এর অর্ধেক জায়গা নিবে।\n- align-items: flex-end; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের নিচে অবস্থান করবে।\n- align-items: center; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের উপর থেকে নিচ বরাবর কেন্দ্রে অবস্থান করবে।\n- align-items: baseline; ফ্লেক্স আইটেম গুলো তাদের baseline অনুসারে align হবে।\n\n**align-content:**\nফ্লেক্স কন্টেইনার এর প্রত্যেকটা লাইনকে আলাদা আলাদা ভাবে চিন্তা না করে একটি কন্টেন্ট হিসাবে চিন্তা করে ক্রস আক্সিস বরাবর align করার জন্য align-content ব্যবহার করা হয়। এটি অনেকটা justify-content এর মত বলতে পারেন। justify-content মেইন আক্সিস বরাবর কাজ করে অপরদিকে align-content ক্রস আক্সিস বরাবর কাজ করে। align-content প্রপার্টির ৭ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।\n```css\n.container{\n        display: flex;\n        align-content: flex-start || flex-end || center || stretch || space-between || space-around || space-evenly;\n}\n```\n![aligncontent.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fe2juqgbbkfonujwcuzrv)\n\n- align-content: flex-start; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো কন্টেইনার এর শুরু থেকে অবস্থান করবে।\n- align-content: flex-end; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো কন্টেইনার এর শেষে থেকে অবস্থান করবে।\n- align-content: center; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো কন্টেইনার এর কেন্দ্রে অবস্থান করবে।\n- align-content: stretch; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো stretch হয়ে যায়।\n- align-content: space-between; ক্রস আক্সিস বরাবর প্রথম ফ্লেক্স আইটেম একদম কন্টেইনার এর শুরুতে থাকবে এবং শেষ ফ্লেক্স আইটেম একদম কন্টেইনার এর শেষে থাকবে, মাঝের আইটেম গুলো নিজেদের আগে ও পরে সমান জায়গা নিয়ে অবস্থান করবে বা ছড়িয়ে যাবে।\n- align-content: space-around; ক্রস আক্সিস বরাবর ফ্লেক্স আইটেম নিজেদের আগে ও পরে সমান জায়গা নিয়ে ছড়িয়ে যাবে। এক্ষেত্রে প্রথম আইটেম এর শুরুতে এবং শেষ আইটেম এর পরের ফাঁকা জায়গা এবং আইটেম গুলোর মাঝে ফাঁকা জায়গা সমান হয় না।\n- align-content: space-evenly; ক্রস আক্সিস বরাবর সবগুলো ফ্লেক্স আইটেম এর আগে ও পরে সমান জায়গা থাকে। কন্টেইনার এর মোট ফাঁকা জায়গা আইটেম এর আগে ও পরে সমান ভাবে থাকে।\n\n**gap, row-gap, column-gap:**\nফ্লেক্স আইটেম গুলোর মধ্যে ফাঁকা জায়গা রাখার জন্য gap প্রপার্টি ব্যবহার করা হয়।\nফ্লেক্স আইটেম গুলোর মধ্যে মেইন আক্সিস বরাবর ফাঁকা জায়গা রাখার জন্য row-gap প্রপার্টি ব্যবহার করা হয়।\nফ্লেক্স আইটেম গুলোর মধ্যে ক্রস আক্সিস বরাবর ফাঁকা জায়গা রাখার জন্য column-gap প্রপার্টি ব্যবহার করা হয়।\n```css\n.container{\n        display: flex;\n        gap: 24px;\n          \u002F* gap: 24px 30px; *\u002F \u002F* row-gap column-gap *\u002F\n          \u002F* row-gap: 24px; *\u002F\n          \u002F* column-gap: 24px; *\u002F\n}\n```\n\n### ফ্লেক্সবক্স আইটেম বিস্তারিতঃ\nফ্লেক্স কন্টেইনার এর সরাসরি চাইল্ড এলেমেন্ট গুলোই ফ্লেক্স আইটেম।\n![flexitems.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fstdlnqmmkfw5yavzijop)\n\n**order:**\nফ্লেক্স আইটেম গুলোর ডিফল্ট অর্ডার হিসাবে ০ থাকে। এইচটিএমএল কোড অনুযায়ী আইটেম গুলোর অর্ডার থাকে কিন্তু আলাদা করে কোন একটি আইটেম এর অর্ডার এর মান নির্ধারণ করে দিলে সেই অর্ডার অনুযায়ী আইটেম গুলো অবস্থান করবে।\n```css\n.container{\n        display: flex;\n}\n\u002F* অর্ডার পরিবর্তন করার কোড *\u002F\n.item{\n        order: 2;\n}\n.item-1{\n        order: 1;\n}\n```\n![Order.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Fknlvidgdqk4fprrgvtfo)\n\n**flex-grow:**\nমেইন আক্সিস বরাবর একটি লাইনে যতগুলো আইটেম থাকে সেই আইটেম গুলো ছাড়া যদি কোন ফাঁকা জায়গা থাকে তাহলে সেই ফাঁকা জায়গা সবগুলো আইটেম এর মধ্যে সমান ভাবে ছড়িয়ে দেওয়া অথবা কোন একটি নির্দিষ্ট আইটেম এর মধ্যে ছড়িয়ে দেওয়ার জন্য flex-grow ব্যবহার হয়। সবগুলো আইটেম এর মধ্যে ফাঁকা জায়গা সমানভাবে ছড়িয়ে দেওয়ার জন্য সবগুলো আইটেম কে flex-grow: 1; দিতে হয়। এক্ষেত্রে আইটেম গুলোর উইড্থ নির্ধারণ করা থাকলেও যখন ফাঁকা জায়গা পাবে সেই ফাঁকা যায়গা নিজেদের মধ্যে নিয়ে নিবে এবং সমান ভাবে আকৃতি পরিবর্তন করবে। অথবা কোন একটি নির্দিষ্ট আইটেম কে টার্গেট করেও flex-grow অ্যাপ্লাই করা যায়। ডিফল্ট flex-grow এর মান থাকে ০।\n```cssn.container{\n        display: flex;\n}\n.item-3{\n        flex-grow: 1;\n}\n```\n![flexGrow.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Ffajijhxoudx1sd0ff64o)\n\n**flex-shrink:**\nflex-shrink ঠিক flex-grow এর উল্টো। ব্রাউজার উইন্ডো ছোট করার সাথে সাথে আইটেম গুলো shrink করবে কিনা সেটা নির্ভর করে flex-shrink এর উপর। ডিফল্ট মান থাকে ১ যার কারণে আইটেম গুলো shrink করে কিন্তু shrink এর মান ০ করে দিলে রেস্পন্সিভনেস থাকবে না এবং আইটেম গুলো ব্রাউজার উইন্ডো এর বাহিরে চলে যাবে।\n```css\n.item-1 {\n  flex-shrink: 0; \u002F* ডিফল্ট 1 *\u002F\n}\n```\n\n**flex-basis:**\nflex-basis হল কোন একটি আইটেম এর মিনিমাম কত উইড্থ হবে সেইটা নির্ধারণ করে দেওয়া। এটা অনেকটা min-width প্রপার্টি এর মত কিন্তু flex-basis এর সবচেয়ে বড় সুবিধা হল ব্রাউজার উইন্ডো উইড্থ যদি আইটেম গুলোর flex-basis এর মোট মানের তুলনায় ছোট হয় তাহলে আইটেম overflow না হয়ে রেস্পন্সিভলি উইড্থ টা কমিয়ে নিবে।\n```css\n.item {\n  flex-basis: 500px; \u002F* ডিফল্ট auto *\u002F\n}\n```\n\n**flex:**\nflex-grow, flex-shrink এবং flex-basis একসাথে লেখার জন্য আমরা flex শর্টহ্যান্ড টা ব্যবহার করতে পারি।\n```css\n.item {\n  flex: flex-grow flex-shrink flex-basis;\n}\n```\n\n**align-self:**\nalign-self প্রপার্টি ব্যবহার করে কোন একটা নির্দিষ্ট ফ্লেক্স আইটেম এর ডিফল্ট এলাইনমেন্ট ওভাররাইড করা যায়। align-items এর মতো align-self এ একয় রকম মান (stretch, center, flex-start, flex-end, baseline) ব্যবহার করা যায় এবং একই লজিক এ কাজ করে। তবে align-self এর ডিফল্ট মান হল auto।\n```css\n.item-2 {\n  align-self: auto || flex-start || flex-end || center || baseline || stretch;\n}\n```\n![alignself.png](https:\u002F\u002Fres.cloudinary.com\u002Ftechdiary-dev\u002Fimage\u002Fupload\u002Ff_auto\u002Fq_auto\u002Fv1\u002Ftechdiary-article-covers\u002Frctgk0qrixptvniwq78z)\n",{"self":73,"collection":78,"about":81,"author":84,"replies":87,"version-history":90,"predecessor-version":93,"wp:featuredmedia":97,"wp:attachment":100,"wp:term":103,"curies":109},[74],{"href":75,"targetHints":76},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F45",{"allow":77},[17],[79],{"href":80},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[82],{"href":83},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[85],{"embeddable":31,"href":86},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[88],{"embeddable":31,"href":89},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=45",[91],{"count":49,"href":92},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F45\u002Frevisions",[94],{"id":95,"href":96},107,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F45\u002Frevisions\u002F107",[98],{"embeddable":31,"href":99},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F46",[101],{"href":102},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=45",[104,107],{"taxonomy":105,"embeddable":31,"href":106},"category","https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=45",{"taxonomy":9,"embeddable":31,"href":108},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=45",[110],{"name":29,"href":30,"templated":31},{"id":112,"date":113,"date_gmt":113,"guid":114,"modified":116,"modified_gmt":116,"slug":117,"status":40,"type":41,"link":115,"title":118,"content":120,"excerpt":122,"author":49,"featured_media":124,"comment_status":51,"ping_status":51,"sticky":46,"template":6,"format":52,"meta":125,"categories":126,"tags":127,"class_list":129,"post_image_original":132,"devto_meta":133,"_links":136},49,"2024-08-10T17:48:23",{"rendered":115},"https:\u002F\u002Fportal.pluginizelab.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","2026-08-17T12:17:41","%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",{"rendered":119},"একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস",{"rendered":121,"protected":46},"\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",{"rendered":123,"protected":46},"\u003Cp>আমরা যারা ওয়েব ডিজাইন সেক্টরে আছি বা আসব বলে ভাবছি তাদের সিএসএস ফ্রেমওয়ার্ক এর শুরুটা হয়ত…\u003C\u002Fp>\n",50,{"footnotes":6},[49],[4,128],30,[130,41,58,59,60,61,62,63,64,131],"post-49","tag-tailwindcss","https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-content\u002Fuploads\u002F2024\u002F08\u002Fdevto-1954751-cover.webp",{"edited_at":67,"published_at":134,"reactions":70,"comments":69,"reading_time":70,"body_markdown":135},"2024-08-10T17:48:23Z","আমরা যারা ওয়েব ডিজাইন সেক্টরে আছি বা আসব বলে ভাবছি তাদের সিএসএস ফ্রেমওয়ার্ক এর শুরুটা হয়ত বুটস্ট্র্যাপ দিয়েই হয়েছে বা হবে, কারণ এটি নতুনদের জন্য শুরু করাটা খুব সহজ এবং আমাদের দেশে এর চাহিদাও অনেক। কিন্তু বেশ কয়েক বছর যাবৎ একটি সিএসএস ফ্রেমওয়ার্ক এর নাম আমরা খুবই শুনে আসছি (বলতে পারেন ট্রেন্ড) সেটি হল টেইলউইন্ড সিএসএস। আর যারা বিভিন্ন জাভাস্ক্রিপ্ট লাইব্রেরি, ফ্রেমওয়ার্ক নিয়ে কাজ করেন বা শুরু করেছেন যেমনঃ 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":137,"collection":142,"about":144,"author":146,"replies":148,"version-history":151,"predecessor-version":154,"wp:featuredmedia":158,"wp:attachment":161,"wp:term":164,"curies":169},[138],{"href":139,"targetHints":140},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F49",{"allow":141},[17],[143],{"href":80},[145],{"href":83},[147],{"embeddable":31,"href":86},[149],{"embeddable":31,"href":150},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=49",[152],{"count":49,"href":153},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F49\u002Frevisions",[155],{"id":156,"href":157},109,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F49\u002Frevisions\u002F109",[159],{"embeddable":31,"href":160},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F50",[162],{"href":163},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=49",[165,167],{"taxonomy":105,"embeddable":31,"href":166},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=49",{"taxonomy":9,"embeddable":31,"href":168},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=49",[170],{"name":29,"href":30,"templated":31},1791053391583]