ডেভসংকেত

টেলওয়াইন্ড সিএসএস

টেলওয়াইন্ড সিএসএস একটি অত্যন্ত কাস্টমাইজযোগ্য, নিম্ন-স্তরের সিএসএস ফ্রেমওয়ার্ক যা আপনাকে ওভাররাইড করার জন্য ডিজাইন তৈরি করতে সমস্ত বিল্ডিং ব্লক দেয়।

কন্ট্রিবিউটর

  • zonayedpca
  • sabbirshawon
  • asifadib

শেয়ার করুন

ইন্সটলেশন

  • প্যাকেজ জেসন

    npm init -y
  • ইন্সটল টেলওয়াইন্ড using npm

    npm install tailwindcss
  • ইন্সটল টেলওয়াইন্ড using yarn

    yarn add tailwindcss

এসভিজি / SVG

  • ফিল

    .fill-current
  • স্ট্রোক

    .stroke-current

সাইজিং

  • ফুল ওয়াইড: 100%

    w-full
  • স্ক্রিন ওয়াইড: 100vw

    w-screen
  • width: auto

    w-auto
  • width: 1px

    w-px
  • width: 0

    w-0
  • width: 0.25rem/ 4px

    w-1
  • width: 0.5rem/ 8px

    w-2
  • width: 0.75rem/ 12px

    w-3
  • width: 1rem/ 16px

    w-4
  • width: 50%

    w-1/2, w-2/4, w-3/6, w-6/12
  • width: 25%

    w-1/4, w-3/12, w-3/6, w-6/12
  • মিনিমাম ওয়াইড: 0

    min-w-0
  • মিনিমাম ওয়াইড: 100%

    min-w-full
  • ম্যাক্সিমাম ওয়াইড: নান

    max-w-none
  • ম্যাক্সিমাম ওয়াইড: 100%

    max-w-full
  • ম্যাক্সিমাম ওয়াইড: 640px

    max-w-screen-sm
  • ম্যাক্সিমাম ওয়াইড: 768px

    max-w-screen-md
  • ম্যাক্সিমাম ওয়াইড: 1024px

    max-w-screen-lg
  • ম্যাক্সিমাম ওয়াইড: 1280px

    max-w-screen-xl

লেআউট

  • ব্রেকপয়েন্টস: sm

    @media (min-width: 640px) { ... }
  • ব্রেকপয়েন্টস: md

    @media (min-width: 768px) { ... }
  • ব্রেকপয়েন্টস: lg

    @media (min-width: 1024px) { ... }
  • ব্রেকপয়েন্টস: xl

    @media (min-width: 1280px) { ... }
  • কন্টেইনার ক্লাস

    container
  • ডিভাইস min-width: 640px

    sm: 
  • ডিভাইস min-width: 768px

    md: 
  • ডিভাইস min-width: 1024px

    lg: 
  • ডিভাইস min-width: 1280px

    xl: 
  • বক্স সাইজিং বর্ডার

    box-border
  • বক্স সাইজিং কনটেন্ট

    box-content
  • ডিসপ্লে নান

    hidden
  • ডিসপ্লে ব্লক

    block
  • ডিসপ্লে ইনলাইন ব্লক

    inline-block
  • ডিসপ্লে ইনলাইন

    inline
  • ডিসপ্লে ফ্লেক্স

    flex
  • ডিসপ্লে ইনলাইন ফ্লেক্স

    inline-flex
  • ডিসপ্লে গ্রিড

    grid
  • ডিসপ্লে ইনলাইন গ্রিড

    inline-grid

ফ্লেক্সবক্স

  • ফ্লেক্স

    flex
  • ইনলাইন ফ্লেক্স

    inline-flex
  • ফ্লেক্স ডিরেকশন রো

    flex-row
  • ফ্লেক্স ডিরেকশন রো রিভার্স

    flex-row-reverse
  • ফ্লেক্স ডিরেকশন কলাম

    flex-col
  • ফ্লেক্স ডিরেকশন কলাম রিভার্স

    flex-col-reverse

টাইপোগ্রাফি

  • টেক্সট কালার: ট্রান্সপারেন্ট

    text-transparent
  • টেক্সট কালার: ব্ল্যাক

    text-black
  • টেক্সট কালার: হুয়াইট

    text-white
  • টেক্সট কালার: গ্রে (ফন্ট ওয়েট সাইজের নাম্বার এইভাবে- 100,200,300....,900)

    text-gray-100
  • টেক্সট কালার: রেড (ফন্ট ওয়েট সাইজের নাম্বার এইভাবে- 100,200,300....,900)

    text-red-100
  • টেক্সট কালার: অরেঞ্জ (ফন্ট ওয়েট সাইজের নাম্বার এইভাবে- 100,200,300....,900)

    text-orange-100
  • টেক্সট কালার: ইয়েলো (ফন্ট ওয়েট সাইজের নাম্বার এইভাবে- 100,200,300....,900)

    text-yellow-100
  • টেক্সট কালার: গ্রিন (ফন্ট ওয়েট সাইজের নাম্বার এইভাবে- 100,200,300....,900)

    text-green-100
  • টেক্সট অপাচিটি: 0

    text-opacity-0
  • টেক্সট অপাচিটি: 0.25

    text-opacity-25
  • টেক্সট অপাচিটি: 0.5

    text-opacity-50
  • টেক্সট অপাচিটি: 0.75

    text-opacity-75
  • টেক্সট অপাচিটি: 1

    text-opacity-100
  • ফন্ট ফ্যামিলি sans: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

    font-sans
  • ফন্ট ফ্যামিলি serif: Georgia, Cambria, Times New Roman, Times, serif

    font-serif
  • ফন্ট ফ্যামিলি mono: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

    font-mono