Tailwind CSS ব্যবহার করে টেক্সট স্টাইল করার জন্য গাইড

এই নিবন্ধটি নিম্নলিখিত রূপরেখাটি ব্যবহার করে টেলউইন্ডে পাঠ্য স্টাইল করার জন্য একটি নির্দেশিকা প্রদান করবে:

• টেক্সট অ্যালাইন ক্লাস ব্যবহার করুন
• টেক্সট কন্টেন্টে রং প্রদান করুন
• বিভিন্ন ফন্ট পরিবার ব্যবহার করুন
• পাঠ্যটিতে আন্ডারলাইন সজ্জা প্রদান করুন
• টেক্সটে ইন্ডেন্টেশন প্রদান করুন

টেলউইন্ডে টেক্সট অ্যালাইন ক্লাস কীভাবে ব্যবহার করবেন?

পাঠ্য বিষয়বস্তু স্টাইল করার সময়, পাঠ্যের অবস্থান অলঙ্করণের মতোই গুরুত্বপূর্ণ। টেক্সট সঠিকভাবে সারিবদ্ধ না হলে, ওয়েবপেজের পুরো ডিজাইনটি অদ্ভুত দেখাবে। Tailwind এ পাঠ্য সারিবদ্ধ করতে, নিম্নলিখিত শ্রেণীটি ব্যবহার করা হয়:

সারিবদ্ধকরণ বিকল্পগুলির মধ্যে রয়েছে ' কেন্দ্র ', ' বাম ', ' অধিকার ', এবং ' ন্যায্যতা ” আসুন নীচের প্রদর্শনটি ব্যবহার করে এই সমস্ত প্রান্তিককরণগুলি বুঝতে পারি:

উপরের কোডের ব্যাখ্যা নিম্নরূপ:

• চার পি ” উপাদানগুলি একটি লাইন বিরতি দ্বারা তৈরি এবং পৃথক করা হয়।
• চারটি পি উপাদানের পাঠ্য একটি নির্দিষ্ট অবস্থানে সারিবদ্ধ করা হয় “ লিখার বিন্যাস} 'শ্রেণী।
• দ্য ' bg-{color}-{number} 'শ্রেণী প্রতিটি জন্য পটভূমির রঙ প্রদান করে' পি ' উপাদান।

আউটপুট

নিচের আউটপুটে দেখা যাবে কিভাবে প্রতিটি অ্যালাইনমেন্ট ক্লাস টেক্সট পজিশনকে প্রভাবিত করে। আপনি দেখতে পাচ্ছেন যে প্রথম উপাদানটির পাঠ্যটি কেন্দ্র হিসাবে, দ্বিতীয়টি ডানে, তৃতীয়টি বাম হিসাবে এবং চতুর্থ উপাদানটি ন্যায়সঙ্গত পাঠ্য দেখাচ্ছে:

কিভাবে Tailwind এ টেক্সট কন্টেন্টে রঙ প্রদান করবেন?

একটি উপাদানের পাঠ্য বিষয়বস্তু স্টাইল করার ক্ষেত্রে রঙ একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। একটি উপযুক্ত রঙ নির্বাচন করা না হলে, পাঠ্য পড়া কঠিন হতে পারে। এটি লেআউটের নকশাকে নেতিবাচকভাবে প্রভাবিত করবে। টেইলউইন্ডে একটি পাঠ্যের রঙ সেট করতে, নীচে দেওয়া ক্লাসটি ব্যবহার করুন:

উপরোক্ত-সংজ্ঞায়িত সিনট্যাক্সে, ব্যবহারকারীকে একটি সংখ্যা দ্বারা অনুসরণ করা রঙের নাম প্রদান করতে হবে যা নির্দিষ্ট রঙের ছায়ার জন্য দায়ী হবে।

নীচের প্রদত্ত প্রদর্শনের তিনটি ' পি বিভিন্ন টেক্সট কালার ক্লাস ব্যবহার করে স্টাইল করা উপাদানগুলি:

উপরের কোডে ব্যবহৃত ক্লাসগুলি নিম্নরূপ:

• প্রথম ' পি ' উপাদান ব্যবহার করে একটি বেগুনি রঙ প্রদান করা হয় ' টেক্সট-{color}-{number} 'শ্রেণী।
• দ্বিতীয় এবং তৃতীয় ' পি ” উপাদানগুলি একই পদ্ধতি ব্যবহার করে লাল এবং সবুজ রঙের সাথে সরবরাহ করা হয়।
• দ্য ' পাঠ্য কেন্দ্র ” ক্লাস পাঠ্য বিষয়বস্তুকে উপাদানের কেন্দ্রে রাখে।

আউটপুট

নীচের আউটপুট থেকে এটা স্পষ্ট যে পাঠ্য-{color}-{number} ক্লাস ব্যবহার করে পাঠ্যের ডিফল্ট কালো রঙ নির্দিষ্ট রঙে পরিবর্তিত হয়েছে:

Tailwind এ বিভিন্ন ফন্ট পরিবার কিভাবে ব্যবহার করবেন?

একটি পাঠ্য উপাদানের ফন্ট একটি নির্দিষ্ট পাঠ্যের উপর জোর দিতে ব্যবহার করা যেতে পারে। প্রতিটি ফন্টের নিজস্ব বৈশিষ্ট্য রয়েছে। Tailwind এ একটি উপাদানের ফন্ট পরিবর্তন করতে, নিম্নলিখিত ক্লাসটি ব্যবহার করুন:

টেলউইন্ড তিনটি ডিফল্ট ফন্ট পরিবার প্রদান করে যেমন “ ছাড়া ', ' সেরিফ ', এবং ' মনো ” এই ফন্ট পরিবারের প্রত্যেকের একটি আলাদা ফন্ট শৈলী আছে।

একইভাবে, ' হরফ-{ওজন} টেক্সট বোল্ড, হালকা বা স্বাভাবিক করতে ক্লাস ব্যবহার করা যেতে পারে। টেলউইন্ডের বিভিন্ন ফন্ট পরিবারকে ফন্ট-ওয়েট প্রদানের জন্য একটি প্রদর্শনী ব্যবহার করা যাক:

কোডের ব্যাখ্যা:

• তিন ' পি ' উপাদানগুলি 'মনো', 'সার্ফ', এবং 'সানস' ফন্ট ফ্যামিলি দ্বারা সরবরাহ করা হয় ' হরফ-{পরিবার} 'শ্রেণী।
• একইভাবে, তিনটি ' পি ' উপাদান হিসাবে প্রদান করা হয় ' অতিরিক্ত সাহসী ', ' সেমিবোল্ড ', এবং ' অতিরিক্ত আলো 'ফন্টের ওজন' ব্যবহার করে হরফ-{ওজন} 'শ্রেণী।
• এই সমস্ত উপাদান ব্যবহার করে ' পাঠ্য কেন্দ্র ” ক্লাস যা পাঠ্যটিকে উপাদানের কেন্দ্রে রাখে।

আউটপুট

প্রদত্ত আউটপুট দেখায় যে প্রতি ' পি ” উপাদানটির একটি আলাদা ফন্ট পরিবার এবং ফন্ট ওজন রয়েছে:

Tailwind এ পাঠ্যের আন্ডারলাইন সজ্জা কিভাবে প্রদান করবেন?

বিভিন্ন ধরনের আন্ডারলাইন যোগ করেও টেক্সট এলিমেন্ট স্টাইল করা যায়। এটি একটি পাঠ্যের একটি অংশকে জোর দিতে ব্যবহার করা যেতে পারে। একটি পাঠ্য উপাদানের আন্ডারলাইন প্রদান করতে, নিম্নলিখিত শ্রেণী ব্যবহার করা হয়:

শব্দ ' আন্ডারলাইন ' উপাদানটির একটি মৌলিক আন্ডারলাইন প্রদান করে এবং ' সজ্জা-{স্টাইল} ” ক্লাস আন্ডারলাইনে বিভিন্ন শৈলী প্রদান করতে ব্যবহৃত হয়। আসুন নীচের প্রদত্ত প্রদর্শন ব্যবহার করে এটি বুঝতে পারি:

উপরের কোডে, চারটি ' পি ' উপাদান যা ' দ্বারা সরবরাহ করা হয় কঠিন ', ' দ্বিগুণ ', ' তরঙ্গায়িত ', এবং ' বিন্দুযুক্ত ” স্টাইল করা আন্ডারলাইন।

আউটপুট:

নিম্নলিখিত আউটপুট থেকে এটি স্পষ্ট যে উপাদানগুলিকে বিভিন্ন আন্ডারলাইনড ডেকোরেশন ক্লাস ব্যবহার করে স্টাইল করা হয়েছে:

টেলউইন্ডে টেক্সটে ইন্ডেন্টেশন কিভাবে প্রদান করবেন?

যেকোনো পাঠ্য নথিতে, পাঠ্য বিষয়বস্তু বিন্যাস করতে ইন্ডেন্টেশন ব্যবহার করা হয়। Tailwind নিম্নলিখিত ক্লাস ব্যবহার করে পাঠ্য সামগ্রীতে ইন্ডেন্টেশন প্রদান করার জন্য একটি ডিফল্ট ক্লাস প্রদান করে:

উপরের সংজ্ঞায়িত সিনট্যাক্সের প্রস্থটি পাঠ্য সামগ্রীতে প্রদত্ত ইন্ডেন্টেশন মার্জিনের আকারের জন্য দায়ী।

আসুন দুটি পাঠ্য উপাদানকে বিভিন্ন ইন্ডেন্টেশন মান দিয়ে বরাদ্দ করে স্টাইল করি এবং ফলাফলটি দেখুন:

উপরের কোডে, দুটি “ পি 'প্রস্থের ইন্ডেন্টেশন দিয়ে দেওয়া হয়' 4 ' & ' 28 'যথাক্রমে। প্রথম উপাদানটি '' ব্যবহার করে উপরের-নীচের প্যাডিংয়ের সাথেও সরবরাহ করা হয় p-12 'শ্রেণী।

আউটপুট:

এটি নীচের আউটপুটে দেখা যায় যে দ্বিতীয় পাঠ্য উপাদানটির বৃহত্তর ইন্ডেন্টেশন প্রস্থের কারণে পাঠ্যের শুরুতে একটি বড় মার্জিন রয়েছে:

যে সব Tailwind ব্যবহার করে টেক্সট স্টাইল সম্পর্কে.

উপসংহার

Tailwind টেক্সট উপাদান স্টাইলিং জন্য বিভিন্ন ক্লাস প্রদান করে. Tailwind-এ টেক্সট স্টাইল করতে, ব্যবহারকারী ব্যবহার করতে পারেন “ টেক্সট-{color}-{number} ', ' লিখার বিন্যাস} ', ' আন্ডারলাইন সজ্জা-{স্টাইল} ', এবং ' ইন্ডেন্ট-{প্রস্থ} 'শ্রেণী। এই নিবন্ধটি Tailwind-এ বিভিন্ন ক্লাস ব্যবহার করে পাঠ্য স্টাইল করার জন্য একটি নির্দেশিকা প্রদান করেছে।