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

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

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

শেয়ার করুন

প্রিন্ট করুন

ইন্সটলেশন

প্যাকেজ জেসন
```
npm init -y
```
ইন্সটল টেলওয়াইন্ড using npm
```
npm install tailwindcss
```
ইন্সটল টেলওয়াইন্ড using yarn
```
yarn add tailwindcss
```

এসভিজি / SVG

ফিল
```
.fill-current
```
স্ট্রোক
```
.stroke-current
```

ফ্লেক্স অ্যালাইনমেন্ট

জাস্টিফাই কনটেন্ট (value = start/end/center/between/around/evenly)
```
justify-{value}
```
অ্যালাইন আইটেমস (value = baseline/start/end/center/stretch)
```
items-{value}
```
অ্যালাইন সেল্ফ (value = auto/start/end/center/stretch/baseline)
```
self-{value}
```

গ্রিড অ্যালাইনমেন্ট

গ্যাপ
```
gap-{size}
```
গ্যাপ-x
```
gap-x-{size}
```
গ্যাপ-y
```
gap-y-{size}
```
জাস্টিফাই আইটেমস (value = start/end/center/stretch)
```
justify-items-{value}
```
জাস্টিফাই সেল্ফ (value = auto/start/end/center/stretch)
```
justify-self-{value}
```
অ্যালাইন কনটেন্ট (value = start/end/center/between/around/evenly)
```
content-{value}
```
প্লেস কনটেন্ট (value = start/end/center/between/around/evenly/stretch)
```
place-content-{value}
```
প্লেস আইটেমস (value = start/end/center/stretch)
```
place-items-{value}
```
প্লেস সেল্ফ (value = auto/start/end/center/stretch)
```
place-self-{value}
```

সাইজিং

ফুল ওয়াইড: 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) { ... }
```
এস্পেক্ট রেশিও
```
aspect-video
```
ব্রেকপয়েন্টস: 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
```
static পজিশনিং
```
static
```
fixed পজিশনিং
```
fixed
```
absolute পজিশনিং
```
absolute
```
relative পজিশনিং
```
relative
```

ফ্লেক্সবক্স

ফ্লেক্স
```
flex
```
ইনলাইন ফ্লেক্স
```
inline-flex
```
ফ্লেক্স ডিরেকশন রো
```
flex-row
```
ফ্লেক্স ডিরেকশন রো রিভার্স
```
flex-row-reverse
```
ফ্লেক্স ডিরেকশন কলাম
```
flex-col
```
ফ্লেক্স ডিরেকশন কলাম রিভার্স
```
flex-col-reverse
```

গ্রিড

গ্রিড
```
grid
```
গ্রিড টেমপ্লেট কলাম (n = 1 - 12 বা 'none')
```
grid-cols-{n}
```
গ্রিড কলাম স্প্যান (n = 1 - 12 বা 'full')
```
col-span-{n}
```
গ্রিড কলাম স্টার্ট (n = 1 - 13 বা 'auto')
```
col-start-{n}
```
গ্রিড কলাম এন্ড (n = 1 - 13 বা 'auto')
```
col-end-{n}
```
গ্রিড টেমপ্লেট রো (n = 1 - 6 বা 'none')
```
grid-rows-{n}
```
গ্রিড রো স্প্যান (n = 1 - 6 বা 'full')
```
row-span-{n}
```
গ্রিড রো স্টার্ট (n = 1 - 7 বা 'auto')
```
row-start-{n}
```
গ্রিড রো এন্ড (n = 1 - 7 বা 'auto')
```
row-end-{n}
```
গ্রিড অটো ফ্লো (keyword = row/col/dense/row-dense/col-dense)
```
grid-flow-{keyword}
```
গ্রিড অটো কলামস (size = auto/min/max/fr)
```
auto-cols-{size}
```
গ্রিড অটো রোজ (size = auto/min/max/fr)
```
auto-rows-{size}
```

ব্যাকগ্রাউন্ডস

ব্যাকগ্রাউন্ড অ্যাটাচমেন্ট (attachment = fixed/local/scroll)
```
bg-{attachment}
```
ব্যাকগ্রাউন্ড ক্লিপ (keyword = border/padding/content/text)
```
bg-clip-{keyword}
```
ব্যাকগ্রাউন্ড কালার
```
bg-{color}
```
ব্যাকগ্রাউন্ড অরিজিন (keyword = border/padding/content)
```
bg-origin-{keyword}
```
ব্যাকগ্রাউন্ড পজিশন (position = bottom/center/left/left-bottom/left-top/right/right-bottom/right-top/top)
```
bg-{position}
```
ব্যাকগ্রাউন্ড রিপিট (keyword = repeat/no-repeat/repeat-x/repeat-y/repeat-round/repeat-space)
```
bg-{keyword}
```
ব্যাকগ্রাউন্ড সাইজ (size = auto/cover/contain/between/around/evenly/stretch)
```
bg-{size}
```
ব্যাকগ্রাউন্ড ইমেজ (image = none/gradient-to-t/gradient-to-tr/gradient-to-r/gradient-to-br/gradient-to-b/gradient-to-bl/gradient-to-l/gradient-to-tl)
```
bg-{image}
```
গ্রেডিয়েন্ট কালার স্টপস [optional = via-{color}, to-{color}]
```
bg-{image} from-{color} via-{color} to-{color}
```

টাইপোগ্রাফি

টেক্সট কালার: ট্রান্সপারেন্ট
```
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
```