Tailwind CSS কি?

Tailwind CSS একটি utility-first CSS framework যা আপনার HTML-এ সরাসরি ডিজাইন তৈরি করার জন্য low-level utility classes প্রদান করে। কাস্টম CSS লেখার পরিবর্তে, আপনি flex, pt-4, text-center এর মতো pre-built classes সরাসরি elements-এ প্রয়োগ করেন। এই পদ্ধতি development দ্রুত করে, ফাইল সাইজ কমায় এবং কাস্টম stylesheets এবং CSS naming conventions-এর প্রয়োজনীয়তা দূর করে আরও maintainable code তৈরি করে।

টুল বর্ণনা

এই টুল তাৎক্ষণিকভাবে traditional CSS code কে Tailwind CSS utility classes-এ রূপান্তরিত করে। শুধুমাত্র আপনার CSS styles পেস্ট করুন এবং এটি প্রতিটি selector-এর জন্য সমতুল্য Tailwind classes তৈরি করবে। converter সাধারণ CSS properties পরিচালনা করে এবং স্বয়ংক্রিয়ভাবে selector names এবং তাদের সংশ্লিষ্ট Tailwind classes সহ output ফরম্যাট করে, যা Tailwind CSS-এ মাইগ্রেশন সহজ করে তোলে।

উদাহরণ

Input (CSS):

.button {
  display: flex;
  padding: 16px;
  background-color: #3b82f6;
  color: white;
  border-radius: 8px;
}

Output (Tailwind):

.button
flex p-4 bg-blue-500 text-white rounded-lg

Input (CSS):

.container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

Output (Tailwind):

.container
max-w-7xl mx-auto text-center

বৈশিষ্ট্য

  • One-way CSS থেকে Tailwind conversion
  • স্বয়ংক্রিয় syntax validation
  • Output-এ selector names সংরক্ষণ করে
  • একযোগে একাধিক CSS rules পরিচালনা করে
  • সাধারণ CSS properties এবং values সমর্থন করে

ব্যবহারের ক্ষেত্র

  • Traditional CSS থেকে Tailwind CSS-এ বিদ্যমান projects মাইগ্রেট করা
  • পরিচিত CSS properties-এর Tailwind equivalents শেখা
  • Design system styles কে utility classes-এ রূপান্তরিত করা
  • কাস্টম CSS লেখার পরিবর্তে Tailwind দিয়ে দ্রুত prototyping করা
  • Legacy stylesheets কে modern utility-first approach-এ refactor করা