টেলউইন্ড CSS ভেরিয়েন্ট আয়ত্ত করা: সিউডো-ক্লাস এবং স্টেট স্টাইলিং-এর গভীরে

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

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

এই বিস্তারিত গাইডটি বিশ্বজুড়ে ডেভেলপারদের জন্য ডিজাইন করা হয়েছে। আমরা টেলউইন্ড CSS ভেরিয়েন্টের সম্পূর্ণ পরিসর অন্বেষণ করব, hover এবং focus-এর মতো মৌলিক সিউডো-ক্লাস থেকে শুরু করে জটিল কম্পোনেন্ট ইন্টারঅ্যাকশনের জন্য group এবং peer ব্যবহার করে উন্নত কৌশল পর্যন্ত। এই গাইড শেষ করার পর, আপনার HTML-এর মধ্যেই সম্পূর্ণ স্টেট-সচেতন এবং অত্যাধুনিক ইন্টারফেস তৈরি করার জ্ঞান থাকবে।

মূল ধারণা বোঝা: ভেরিয়েন্ট কী?

মূলত, টেলউইন্ড CSS-এ একটি ভেরিয়েন্ট হলো একটি প্রিফিক্স যা আপনি একটি ইউটিলিটি ক্লাসের সাথে যোগ করেন এবং কোলন (:) দিয়ে আলাদা করেন। এই প্রিফিক্সটি একটি শর্ত হিসেবে কাজ করে। এর পরে থাকা ইউটিলিটি ক্লাসটি কেবল তখনই প্রয়োগ করা হবে যখন সেই শর্তটি পূরণ হবে।

এর বেসিক সিনট্যাক্স সহজ এবং স্বজ্ঞাত:

variant:utility-class

উদাহরণস্বরূপ, একটি সাধারণ বাটনের কথা ভাবুন। আপনি হয়তো চাইবেন এর ব্যাকগ্রাউন্ড ডিফল্টভাবে নীল হোক, কিন্তু ব্যবহারকারী যখন তার মাউস এর উপর হোভার করবে তখন এটি আরও গাঢ় নীল হয়ে যাবে। প্রচলিত CSS-এ আপনি লিখতেন:

            .my-button {
  background-color: #3b82f6; /* bg-blue-500 */
}

.my-button:hover {
  background-color: #2563eb; /* bg-blue-700 */
}
            

              
                Copy
              
            
          

টেলউইন্ডের ভেরিয়েন্ট ব্যবহার করে, আপনি একই ফলাফল সরাসরি আপনার HTML-এ অর্জন করতে পারেন, যা আপনার স্টাইলিংকে মার্কআপের সাথে একই জায়গায় রাখে:

            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>
            

              
                Copy
              
            
          

এখানে, hover: হলো ভেরিয়েন্ট। এটি টেলউইন্ডের জাস্ট-ইন-টাইম (JIT) ইঞ্জিনকে এমন একটি CSS রুল তৈরি করতে বলে যা bg-blue-700 শুধুমাত্র তখনই প্রয়োগ করবে যখন বাটনটি তার :hover স্টেটে থাকবে। এই সহজ কিন্তু শক্তিশালী ধারণাটিই টেলউইন্ড CSS-এ সমস্ত ইন্টারঅ্যাকটিভ স্টাইলিংয়ের ভিত্তি।

সবচেয়ে সাধারণ ভেরিয়েন্ট: ইন্টারঅ্যাকটিভ সিউডো-ক্লাস

সিউডো-ক্লাস হলো CSS সিলেক্টর যা একটি এলিমেন্টের বিশেষ স্টেট নির্ধারণ করে। টেলউইন্ড ব্যবহারকারীর কার্যকলাপের প্রতিক্রিয়া জানাতে প্রতিদিন ব্যবহৃত সমস্ত সাধারণ সিউডো-ক্লাসের জন্য ভেরিয়েন্ট সরবরাহ করে।

hover ভেরিয়েন্ট: মাউস কার্সরের প্রতি প্রতিক্রিয়া

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

উদাহরণ: একটি ইন্টারঅ্যাকটিভ কার্ড কম্পোনেন্ট

আসুন একটি কার্ড তৈরি করি যা হোভার করলে উপরে উঠে আসে এবং আরও স্পষ্ট শ্যাডো লাভ করে, যা আধুনিক UI ডিজাইনে একটি সাধারণ প্যাটার্ন।

            <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md 
             transition-all duration-300 
             hover:shadow-xl hover:-translate-y-1">
  <h3 class="text-xl font-medium text-black">Global Insights</h3>
  <p class="text-slate-500">Discover trends from around the world.</p>
</div>
            

              
                Copy
              
            
          

এই উদাহরণে:

• hover:shadow-xl হোভার করলে বক্স-শ্যাডোকে একটি বড় শ্যাডো-তে পরিবর্তন করে।
• hover:-translate-y-1 কার্ডটিকে সামান্য উপরে সরিয়ে একটি "লিফটিং" এফেক্ট তৈরি করে।
• আমরা স্টেট পরিবর্তনকে মসৃণ এবং অ্যানিমেটেড করার জন্য transition-all এবং duration-300 যোগ করেছি।

focus ভেরিয়েন্ট: অ্যাক্সেসিবিলিটি এবং ইনপুটের জন্য স্টাইলিং

focus ভেরিয়েন্ট অ্যাক্সেসিবিলিটির জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি তখন স্টাইল প্রয়োগ করে যখন একটি এলিমেন্ট সিলেক্ট করা হয়, হয় মাউস দিয়ে ক্লিক করে অথবা কীবোর্ড ব্যবহার করে নেভিগেট করে (যেমন, 'Tab' কী দিয়ে)। এটি সাধারণত ফর্ম এলিমেন্ট যেমন ইনপুট, টেক্সটএরিয়া এবং বাটনে ব্যবহৃত হয়।

উদাহরণ: একটি সুন্দর স্টাইল করা ফর্ম ইনপুট

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

            <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input type="email" id="email"
       class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md 
              text-sm shadow-sm placeholder-slate-400
              focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
            

              
                Copy
              
            
          

এখানে focus: ভেরিয়েন্টগুলো যা করে:

• focus:outline-none: ব্রাউজারের ডিফল্ট ফোকাস আউটলাইন সরিয়ে দেয়। আমরা এটি করি আমাদের নিজস্ব, আরও আকর্ষণীয় স্টাইল দিয়ে এটি প্রতিস্থাপন করার জন্য।
• focus:border-sky-500: বর্ডারের রঙকে একটি উজ্জ্বল আকাশী নীল রঙে পরিবর্তন করে।
• focus:ring-1 focus:ring-sky-500: একই রঙের একটি সূক্ষ্ম বাইরের আভা (একটি বক্স-শ্যাডো রিং) যোগ করে, যা ফোকাস স্টেটকে আরও স্পষ্ট করে তোলে।

active ভেরিয়েন্ট: ক্লিক এবং ট্যাপ ক্যাপচার করা

active ভেরিয়েন্ট তখন প্রয়োগ করা হয় যখন একটি এলিমেন্ট ব্যবহারকারী দ্বারা সক্রিয় করা হচ্ছে—উদাহরণস্বরূপ, যখন একটি বাটন চেপে ধরা হয়। এটি তাৎক্ষণিক ফিডব্যাক দেয় যে ক্লিক বা ট্যাপটি রেজিস্টার করা হয়েছে।

উদাহরণ: একটি "প্রেসড" এফেক্টসহ বাটন

            <button class="bg-indigo-500 text-white font-semibold py-2 px-4 rounded-lg 
             shadow-md hover:bg-indigo-600 focus:outline-none 
             focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75 
             active:bg-indigo-700 active:translate-y-0.5">
  Submit
</button>
            

              
                Copy
              
            
          

এই উন্নত বাটনে:

• active:bg-indigo-700 বাটনটি চেপে ধরার সময় এটিকে আরও গাঢ় করে তোলে।
• active:translate-y-0.5 বাটনটিকে সামান্য নিচে ঠেলে দেয়, একটি শারীরিক প্রেস-ডাউন এফেক্ট তৈরি করে।

অন্যান্য ইন্টারঅ্যাকটিভ ভেরিয়েন্ট: focus-within এবং focus-visible

focus-within: এই দরকারী ভেরিয়েন্টটি একটি *প্যারেন্ট* এলিমেন্টে স্টাইল প্রয়োগ করে যখনই তার কোনো *চাইল্ড* এলিমেন্ট ফোকাস পায়। এটি একটি সম্পূর্ণ ফর্ম গ্রুপকে স্টাইল করার জন্য উপযুক্ত যখন ব্যবহারকারী এর ইনপুটের সাথে ইন্টারঅ্যাক্ট করছে।

            <div class="flex items-center space-x-2 p-4 border rounded-lg focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
  <!-- SVG Icon -->
  <svg class="h-6 w-6 text-gray-400">...</svg>
  <input type="text" placeholder="Search..." class="outline-none">
</div>
            

              
                Copy
              
            
          

এখন, যখন ব্যবহারকারী <input>-এ ফোকাস করবে, তখন পুরো প্যারেন্ট <div> একটি নীল বর্ডার এবং রিং পাবে।

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

স্টেটের উপর ভিত্তি করে স্টাইলিং: ফর্ম এবং UI এলিমেন্ট ভেরিয়েন্ট

সরাসরি ব্যবহারকারীর ইন্টারঅ্যাকশনের বাইরেও, এলিমেন্টগুলোর প্রায়শই তাদের অ্যাট্রিবিউটের উপর ভিত্তি করে স্টেট থাকে। টেলউইন্ড এই স্টেটগুলোকে ডিক্লারেটিভভাবে স্টাইল করার জন্য ভেরিয়েন্ট সরবরাহ করে।

disabled ভেরিয়েন্ট: अनुपलब्धতা বোঝানো

যখন একটি বাটন বা ফর্ম ইনপুটে disabled অ্যাট্রিবিউট থাকে, তখন এর সাথে ইন্টারঅ্যাক্ট করা যায় না। disabled ভেরিয়েন্ট আপনাকে এই স্টেটটিকে স্টাইল করতে দেয় যাতে এটি ব্যবহারকারীর কাছে দৃশ্যত পরিষ্কার হয়।

            <button disabled class="bg-slate-300 text-slate-500 font-bold py-2 px-4 rounded cursor-not-allowed 
                     disabled:opacity-50">
  Processing...
</button>
            

              
                Copy
              
            
          

এখানে, disabled:opacity-50 বাটনটির অপাসিটি কমিয়ে দেয় যখন disabled অ্যাট্রিবিউট উপস্থিত থাকে, যা একটি নিষ্ক্রিয় অবস্থা নির্দেশ করার একটি সাধারণ রীতি। cursor-not-allowed ইউটিলিটি এটিকে আরও শক্তিশালী করে।

checked ভেরিয়েন্ট: চেকবক্স এবং রেডিও বাটনের জন্য

কাস্টম চেকবক্স এবং রেডিও বাটন তৈরি করার জন্য checked ভেরিয়েন্ট অপরিহার্য। এটি তখন স্টাইল প্রয়োগ করে যখন ইনপুটের checked অ্যাট্রিবিউটটি true হয়।

উদাহরণ: একটি কাস্টম স্টাইলযুক্ত চেকবক্স

            <label class="flex items-center space-x-3">
  <input type="checkbox" class="appearance-none h-5 w-5 border border-gray-300 rounded-md 
                                checked:bg-blue-600 checked:border-transparent">
  <span class="text-gray-900 font-medium">Accept terms and conditions</span>
</label>
            

              
                Copy
              
            
          

আমরা ব্রাউজারের ডিফল্ট স্টাইলিং অপসারণ করতে appearance-none ব্যবহার করি, এবং তারপর বক্সটি চেক করা হলে ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করতে checked: ভেরিয়েন্ট ব্যবহার করি। আপনি এমনকি এই ভেরিয়েন্টের সাথে ::before বা ::after সিউডো-এলিমেন্ট ব্যবহার করে একটি চেকমার্ক আইকন যোগ করতে পারেন।

ফর্ম ভ্যালিডেশন ভেরিয়েন্ট: required, optional, valid, invalid

আধুনিক ফর্মগুলো রিয়েল-টাইম ভ্যালিডেশন ফিডব্যাক প্রদান করে। টেলউইন্ডের ভ্যালিডেশন ভেরিয়েন্টগুলো ব্রাউজারের কনস্ট্রেইন্ট ভ্যালিডেশন API ব্যবহার করে। এই ভেরিয়েন্টগুলো required-এর মতো অ্যাট্রিবিউট এবং ইনপুটের মানের বর্তমান ভ্যালিডিটি স্টেটের উপর ভিত্তি করে প্রয়োগ করা হয় (যেমন, type="email"-এর জন্য)।

            <input type="email" required 
       class="border rounded-md px-3 py-2 
              invalid:border-pink-500 invalid:text-pink-600
              focus:invalid:border-pink-500 focus:invalid:ring-pink-500
              valid:border-green-500">
            

              
                Copy
              
            
          

এই ইনপুট ফিল্ডটিতে থাকবে:

• যদি কনটেন্টটি একটি বৈধ ইমেল ঠিকানা না হয় তবে একটি গোলাপী বর্ডার এবং টেক্সট (invalid:)।
• একবার একটি বৈধ ইমেল ঠিকানা প্রবেশ করানো হলে একটি সবুজ বর্ডার (valid:)।
• যদি ফিল্ডটি অবৈধ থাকা অবস্থায় ফোকাস করা হয় তবে ফোকাস রিংটিও গোলাপী হয়ে যাবে (focus:invalid:)।

অ্যাডভান্সড ইন্টারঅ্যাক্টিভিটি: `group` এবং `peer` ভেরিয়েন্ট

কখনও কখনও, আপনাকে একটি *ভিন্ন* এলিমেন্টের স্টেটের উপর ভিত্তি করে একটি এলিমেন্টকে স্টাইল করতে হয়। এখানেই শক্তিশালী group এবং peer ধারণাগুলো কাজে আসে। তারা এমন এক শ্রেণীর UI চ্যালেঞ্জ সমাধান করে যা আগে শুধুমাত্র ইউটিলিটি ক্লাস দিয়ে পরিচালনা করা কঠিন ছিল।

`group`-এর শক্তি: প্যারেন্ট স্টেটের উপর ভিত্তি করে চাইল্ড স্টাইলিং

group ভেরিয়েন্ট আপনাকে একটি প্যারেন্ট এলিমেন্টের স্টেটের উপর ভিত্তি করে চাইল্ড এলিমেন্টগুলোকে স্টাইল করতে দেয়। এটি ব্যবহার করার জন্য, আপনি যে প্যারেন্ট এলিমেন্টটি ট্র্যাক করতে চান তাতে group ক্লাস যোগ করুন। তারপর, যেকোনো চাইল্ড এলিমেন্টে, আপনি group-hover, group-focus ইত্যাদির মতো ভেরিয়েন্ট ব্যবহার করতে পারেন।

উদাহরণ: একটি কার্ড যার টাইটেল এবং আইকন হোভারে একসাথে রঙ পরিবর্তন করে

            <a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 
                   hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <!-- SVG Icon -->
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white">...</svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New Project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of templates.</p>
</a>
            

              
                Copy
              
            
          

এটি যেভাবে কাজ করে:

1. আমরা প্যারেন্ট <a> ট্যাগে group ক্লাস যোগ করি।
2. যখন ব্যবহারকারী পুরো লিঙ্কের উপর হোভার করে, তখন hover:bg-sky-500-এর জন্য এর ব্যাকগ্রাউন্ডের রঙ পরিবর্তন হয়।
3. একই সাথে, SVG-তে group-hover:stroke-white ক্লাস এবং টেক্সট এলিমেন্টগুলোতে group-hover:text-white সক্রিয় হয়, যা তাদের রঙ সাদা করে দেয়।

এটি একটি সুসংহত, সামগ্রিক হোভার এফেক্ট তৈরি করে যার জন্য অন্যথায় কাস্টম CSS বা জাভাস্ক্রিপ্টের প্রয়োজন হতো।

`peer`-এর সাথে সিবলিং স্টাইলিং: ফর্মের জন্য একটি গেম-চেঞ্জার

peer ভেরিয়েন্টটি group-এর মতোই, তবে এটি সিবলিং (পার্শ্ববর্তী) এলিমেন্ট স্টাইল করার জন্য কাজ করে। আপনি একটি এলিমেন্টে peer ক্লাস যোগ করেন, এবং তারপর আপনি "পিয়ার"-এর স্টেটের উপর ভিত্তি করে *পরবর্তী* সিবলিং এলিমেন্টগুলোতে peer-checked বা peer-invalid-এর মতো ভেরিয়েন্ট ব্যবহার করতে পারেন। এটি কাস্টম ফর্ম কন্ট্রোলগুলোর জন্য অবিশ্বাস্যভাবে দরকারী।

উদাহরণ: একটি লেবেল যা তার সংশ্লিষ্ট চেকবক্স চেক করা হলে পরিবর্তিত হয়

            <label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-200 rounded-full 
            peer-focus:ring-4 peer-focus:ring-blue-300 
            peer-checked:after:translate-x-full peer-checked:after:border-white 
            after:content-[''] after:absolute after:top-0.5 after:left-[2px] 
            after:bg-white after:border-gray-300 after:border after:rounded-full 
            after:h-5 after:w-5 after:transition-all 
            peer-checked:bg-blue-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 peer-checked:text-blue-600">
    Enable Notifications
  </span>
</label>
            

              
                Copy
              
            
          

এটি শূন্য জাভাস্ক্রিপ্ট দিয়ে তৈরি একটি সম্পূর্ণ, অ্যাক্সেসিবল টগল সুইচ!

1. আসল চেকবক্স <input> দৃশ্যত sr-only দিয়ে লুকানো আছে (এটি এখনও স্ক্রিন রিডারদের জন্য অ্যাক্সেসিবল) এবং একটি peer হিসাবে চিহ্নিত করা হয়েছে।
2. ভিজ্যুয়াল টগল সুইচটি একটি <div> যা একটি হ্যান্ডেলসহ ট্র্যাকের মতো দেখতে স্টাইল করা হয়েছে (::after সিউডো-এলিমেন্ট ব্যবহার করে)।
3. peer-checked:bg-blue-600 লুকানো চেকবক্সটি চেক করা হলে ট্র্যাকের ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করে।
4. peer-checked:after:translate-x-full চেকবক্সটি চেক করা হলে হ্যান্ডেলটিকে ডানদিকে স্লাইড করে।
5. peer-checked:text-blue-600 সিবলিং <span> লেবেল টেক্সটের রঙ পরিবর্তন করে।

গ্রানুলার নিয়ন্ত্রণের জন্য ভেরিয়েন্ট একত্রিত করা

টেলউইন্ডের অন্যতম শক্তিশালী বৈশিষ্ট্য হলো ভেরিয়েন্টগুলোকে একসাথে চেইন করার ক্ষমতা। এটি অত্যন্ত নির্দিষ্ট শর্তসাপেক্ষ স্টাইল তৈরি করতে দেয়।

রেসপন্সিভ এবং স্টেট ভেরিয়েন্ট: ডাইনামিক জুটি

আপনি রেসপন্সিভ প্রিফিক্স (যেমন md:, lg:) স্টেট ভেরিয়েন্টের সাথে একত্রিত করে শুধুমাত্র নির্দিষ্ট স্ক্রিন সাইজে *এবং* নির্দিষ্ট স্টেটে স্টাইল প্রয়োগ করতে পারেন। রেসপন্সিভ ভেরিয়েন্ট সবসময় প্রথমে আসে।

সিনট্যাক্স: breakpoint:state:utility-class

            <button class="bg-blue-500 text-white p-2 rounded 
             hover:bg-blue-600 
             md:bg-green-500 md:hover:bg-green-600">
  Responsive Button
</button>
            

              
                Copy
              
            
          

এই বাটনটি:

• ছোট স্ক্রিনে নীল হবে, হোভারে গাঢ় নীল হবে।
• মাঝারি স্ক্রিন এবং তার উপরে সবুজ হবে (md:bg-green-500), হোভারে গাঢ় সবুজ হবে (md:hover:bg-green-600)।

একাধিক স্টেট ভেরিয়েন্ট স্ট্যাকিং

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

উদাহরণ: একটি ডার্ক মোড বাটন যা হোভার এবং ফোকাসে ভিন্নভাবে প্রতিক্রিয়া জানায়

            <button class="p-2 rounded-full text-gray-400 
             dark:text-gray-500 
             hover:text-gray-600 dark:hover:text-gray-300 
             focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 
             dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400
             dark:hover:focus:ring-gray-200">
  <!-- Icon here -->
</button>
            

              
                Copy
              
            
          

এখানে, dark:hover:focus:ring-gray-200 একটি নির্দিষ্ট রিং রঙ শুধুমাত্র তখনই প্রয়োগ করে যখন ডার্ক মোড সক্রিয় থাকে, বাটনটি হোভার করা হচ্ছে, *এবং* এটিতে ফোকাস রয়েছে। স্টেট ভেরিয়েন্টগুলোর ক্রম সাধারণত গুরুত্বপূর্ণ নয়, কারণ টেলউইন্ড সংমিশ্রণের জন্য সঠিক CSS সিলেক্টর তৈরি করে।

কাস্টমাইজেশন এবং ওয়ান-অফস

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

আর্বিট্রারি ভেরিয়েন্ট ব্যবহার করা

একক পরিস্থিতির জন্য যেখানে আপনার একটি CSS সিলেক্টরের প্রয়োজন যা একটি বিল্ট-ইন ভেরিয়েন্ট দ্বারা কভার করা হয়নি, আপনি আর্বিট্রারি ভেরিয়েন্ট ব্যবহার করতে পারেন। এটি একটি অবিশ্বাস্যভাবে শক্তিশালী এস্কেপ হ্যাচ যা আপনাকে আপনার ক্লাস অ্যাট্রিবিউটে সরাসরি কাস্টম সিলেক্টর লিখতে দেয়, যা বর্গাকার বন্ধনীতে আবদ্ধ থাকে।

উদাহরণ: লিস্ট আইটেমগুলোকে ভিন্নভাবে স্টাইল করা

            <ul>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">First item</li>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">Second item</li>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">Third item</li>
</ul>
            

              
                Copy
              
            
          

[&:nth-child(odd)]:bg-gray-100 ক্লাসটি li:nth-child(odd)-এর জন্য CSS তৈরি করে, যা প্রতিটি আইটেমে অতিরিক্ত ক্লাস যোগ না করেই একটি স্ট্রাইপড লিস্ট তৈরি করে।

আরেকটি সাধারণ ব্যবহার হলো সরাসরি ডিসেন্ড্যান্ট স্টাইলিংয়ের জন্য:

            <div class="[&_>_p]:mt-4">
  <p>First paragraph.</p>
  <p>Second paragraph. This will have a top margin.</p>
  <div><p>Nested paragraph. This will NOT have a top margin.</p></div>
</div>
            

              
                Copy
              
            
          

[&_>_p]:mt-4 ক্লাসটি শুধুমাত্র div-এর সরাসরি `p` চাইল্ডগুলোকে স্টাইল করে।

`tailwind.config.js`-এ ভেরিয়েন্ট কনফিগার করা

ডিফল্টরূপে, টেলউইন্ডের JIT ইঞ্জিন সমস্ত কোর প্লাগইনের জন্য সমস্ত ভেরিয়েন্ট সক্রিয় করে। তবে, যদি আপনার থার্ড-পার্টি প্লাগইনের জন্য ভেরিয়েন্ট সক্রিয় করতে হয় বা একটি কাস্টম ভেরিয়েন্ট রেজিস্টার করতে চান, তবে আপনাকে আপনার `tailwind.config.js` ফাইলটি ব্যবহার করতে হবে।

            // tailwind.config.js
module.exports = {
  // ...
  plugins: [
    function({ addVariant }) {
      addVariant('child', '& > *');
      addVariant('child-hover', '& > *:hover');
    }
  ],
}

            

              
                Copy
              
            
          

এই কাস্টম প্লাগইনটি নতুন `child` এবং `child-hover` ভেরিয়েন্ট যোগ করে, যা আপনি তখন একটি এলিমেন্টের সমস্ত সরাসরি চাইল্ডকে স্টাইল করার জন্য child:text-red-500-এর মতো ব্যবহার করতে পারেন।

উপসংহার: স্টেট-ড্রিভেন UI-এর শক্তি

টেলউইন্ড CSS ভেরিয়েন্টগুলো কেবল একটি সুবিধার চেয়েও বেশি কিছু; এগুলো ইউটিলিটি-ফার্স্ট দর্শনের একটি মৌলিক অংশ। আপনাকে একটি এলিমেন্টের সমস্ত সম্ভাব্য স্টেট জুড়ে তার চেহারা সরাসরি HTML-এ বর্ণনা করার অনুমতি দিয়ে, ভেরিয়েন্টগুলো আপনাকে জটিল, শক্তিশালী এবং অত্যন্ত রক্ষণাবেক্ষণযোগ্য ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে।

সাধারণ hover এফেক্ট থেকে শুরু করে peer-checked দিয়ে তৈরি জটিল ফর্ম কন্ট্রোল এবং রেসপন্সিভ, মাল্টি-স্টেট সংমিশ্রণ পর্যন্ত, আপনার ডিজাইনগুলোকে जीवন্ত করার জন্য এখন আপনার কাছে একটি বিস্তৃত টুলকিট রয়েছে। তারা একটি কম্পোনেন্ট-ভিত্তিক মানসিকতাকে উৎসাহিত করে যেখানে সমস্ত যুক্তি—গঠন, স্টাইল এবং স্টেট—এক জায়গায় আবদ্ধ থাকে।

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