টেইলউইন্ড CSS চিটশিট

টেইলউইন্ড CSS একটি ইউটিলিটি-ফার্স্ট CSS ফ্রেমওয়ার্ক, যা দ্রুত এবং সহজে HTML-এর সাথে স্টাইলিং করতে ব্যবহৃত হয়। এই চিটশিটে টেইলউইন্ডের সবচেয়ে গুরুত্বপূর্ণ ক্লাস এবং বৈশিষ্ট্য ব্যাখ্যা করা হয়েছে। আমি এটি বিস্তারিত করছি যাতে আপনি সবকিছু এক জায়গায় পান এবং সহজে বুঝতে পারেন।

১. টেইলউইন্ড CSS কীভাবে ব্যবহার করবেন

টেইলউইন্ড ব্যবহার করতে আপনার প্রজেক্টে এটি যোগ করতে হবে।

ইনস্টলেশন (CDN দিয়ে)

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

উদাহরণ

<div class="bg-blue-500 text-white p-4 rounded">
    হ্যালো, টেইলউইন্ড!
</div>

bg-blue-500: নীল ব্যাকগ্রাউন্ড।
text-white: সাদা টেক্সট।
p-4: প্যাডিং।
rounded: গোলাকার কোণ।

২. টেইলউইন্ডের মৌলিক ক্লাস

২.১ রঙ (Colors)

টেইলউইন্ডে রঙের জন্য একটি স্কেল (৫০-৯০০) ব্যবহৃত হয়।

ক্লাস	বর্ণনা
`text-{color}-{shade}`	টেক্সটের রঙ।
`bg-{color}-{shade}`	ব্যাকগ্রাউন্ড রঙ।
`border-{color}-{shade}`	সীমানার রঙ।

উদাহরণ:

<p class="text-green-700">সবুজ টেক্সট</p>
<div class="bg-yellow-300">হলুদ ব্যাকগ্রাউন্ড</div>

২.২ ফন্ট এবং টেক্সট

ক্লাস	বর্ণনা	উদাহরণ
`font-{family}`	ফন্ট ফ্যামিলি।	`font-sans`
`text-{size}`	ফন্টের আকার।	`text-lg`
`font-{weight}`	ফন্টের গাঢ়তা।	`font-bold`
`text-{align}`	টেক্সট অ্যালাইনমেন্ট।	`text-center`
`underline`	আন্ডারলাইন।	`underline`
`italic`	ইটালিক।	`italic`
`tracking-{size}`	অক্ষরের ফাঁক।	`tracking-tight`

উদাহরণ:

<p class="text-xl font-bold text-center">বড় এবং গাঢ় টেক্সট</p>

২.৩ স্পেসিং (Margin & Padding)

ক্লাস	বর্ণনা	উদাহরণ
`m-{size}`	সব দিকে মার্জিন।	`m-4`
`mx-{size}`	অনুভূমিক মার্জিন।	`mx-2`
`my-{size}`	উল্লম্ব মার্জিন।	`my-6`
`mt-{size}`	উপরের মার্জিন।	`mt-3`
`p-{size}`	সব দিকে প্যাডিং।	`p-5`
`px-{size}`	অনুভূমিক প্যাডিং।	`px-4`
`py-{size}`	উল্লম্ব প্যাডিং।	`py-2`

স্কেল: ০, ১, ২, ৩, ৪, ৫, ৬, ৮, ১০, ১২, ১৬, ২০, ইত্যাদি (১ = ০.২৫ রেম)।

উদাহরণ:

<div class="m-4 p-6 bg-gray-100">মার্জিন এবং প্যাডিং</div>

২.৪ সাইজ (Width & Height)

ক্লাস	বর্ণনা	উদাহরণ
`w-{size}`	প্রস্থ।	`w-1/2` (৫০%)
`h-{size}`	উচ্চতা।	`h-64` (১৬ রেম)
`w-full`	পূর্ণ প্রস্থ।	`w-full`
`h-screen`	পূর্ণ স্ক্রিন উচ্চতা।	`h-screen`
`max-w-{size}`	সর্বোচ্চ প্রস্থ।	`max-w-lg`
`min-h-{size}`	সর্বনিম্ন উচ্চতা।	`min-h-0`

উদাহরণ:

<div class="w-3/4 h-32 bg-blue-200">৭৫% প্রস্থ</div>

২.৫ বর্ডার (Border)

ক্লাস	বর্ণনা	উদাহরণ
`border`	১ পিক্সেল সীমানা।	`border`
`border-{size}`	সীমানার পুরুত্ব।	`border-2`
`border-{color}`	সীমানার রঙ।	`border-red-500`
`rounded`	গোলাকার কোণ।	`rounded`
`rounded-{size}`	কোণের বক্রতা।	`rounded-lg`

উদাহরণ:

<div class="border-4 border-green-600 rounded-md">সবুজ সীমানা</div>

২.৬ ফ্লেক্সবক্স

ক্লাস	বর্ণনা	উদাহরণ
`flex`	ফ্লেক্স কনটেইনার।	`flex`
`flex-row`	সারি দিক।	`flex-row`
`flex-col`	কলাম দিক।	`flex-col`
`justify-{type}`	অনুভূমিক অ্যালাইনমেন্ট।	`justify-center`
`items-{type}`	উল্লম্ব অ্যালাইনমেন্ট।	`items-center`
`gap-{size}`	আইটেমের মধ্যে ফাঁক।	`gap-4`
`flex-wrap`	আইটেম মোড়ানো।	`flex-wrap`

উদাহরণ:

<div class="flex justify-between items-center gap-2">
    <div class="bg-red-500 p-2">১</div>
    <div class="bg-blue-500 p-2">২</div>
</div>

২.৭ গ্রিড

ক্লাস	বর্ণনা	উদাহরণ
`grid`	গ্রিড কনটেইনার।	`grid`
`grid-cols-{n}`	কলামের সংখ্যা।	`grid-cols-3`
`grid-rows-{n}`	সারির সংখ্যা।	`grid-rows-2`
`gap-{size}`	গ্রিডের ফাঁক।	`gap-6`
`col-span-{n}`	কলাম স্প্যান।	`col-span-2`
`row-span-{n}`	সারি স্প্যান।	`row-span-3`

উদাহরণ:

<div class="grid grid-cols-3 gap-4">
    <div class="bg-purple-300 p-4">১</div>
    <div class="bg-purple-300 p-4">২</div>
    <div class="bg-purple-300 p-4">৩</div>
</div>

২.৮ ট্রানজিশন এবং অ্যানিমেশন

ক্লাস	বর্ণনা	উদাহরণ
`transition`	ট্রানজিশন সক্রিয়।	`transition`
`duration-{ms}`	সময়।	`duration-300`
`ease-{type}`	ট্রানজিশনের ধরন।	`ease-in-out`
`transform`	রূপান্তর সক্রিয়।	`transform`
`hover:{class}`	হোভারে স্টাইল।	`hover:bg-red-500`
`animate-{type}`	প্রি-ডিফাইন্ড অ্যানিমেশন।	`animate-spin`

উদাহরণ:

<div class="bg-blue-500 p-4 transition duration-500 hover:bg-green-500">
    হোভার করুন
</div>

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

টেইলউইন্ডে ব্রেকপয়েন্ট: sm, md, lg, xl, 2xl।

প্রিফিক্স	মিন-প্রস্থ	উদাহরণ
`sm:`	৬৪০px	`sm:text-lg`
`md:`	৭৬৮px	`md:flex`
`lg:`	১০২৪px	`lg:grid-cols-4`

উদাহরণ:

<div class="text-sm md:text-lg lg:text-2xl">
    রেসপন্সিভ টেক্সট
</div>

৪. অন্যান্য ইউটিলিটি

ক্লাস	বর্ণনা	উদাহরণ
`shadow-{size}`	ছায়া।	`shadow-lg`
`opacity-{n}`	স্বচ্ছতা।	`opacity-50`
`cursor-{type}`	কার্সর।	`cursor-pointer`
`hidden`	লুকানো।	`hidden`
`block`	ব্লক ডিসপ্লে।	`block`
`z-{n}`	স্তরের ক্রম।	`z-10`

৫. কাস্টমাইজেশন

tailwind.config.js ফাইলে কাস্টম স্টাইল যোগ করা যায়।

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1a73e8',
      },
      spacing: {
        '72': '18rem',
      },
    },
  },
};

ব্যবহার:

<div class="bg-custom-blue w-72">কাস্টম স্টাইল</div>

৬. উদাহরণ: একটি সম্পূর্ণ লেআউট

<div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="bg-white p-6 rounded-lg shadow-lg max-w-md">
        <h1 class="text-2xl font-bold text-center mb-4">স্বাগতম</h1>
        <p class="text-gray-700 mb-6">এটি একটি টেইলউইন্ড উদাহরণ।</p>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
            ক্লিক করুন
        </button>
    </div>
</div>

টেইলউইন্ড CSS চিটশিট

On this page