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

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

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

শেয়ার করুন

প্রিন্ট করুন

ইন্সটলেশন

প্যাকেজ জেসন
```
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
```