টেইলউইন্ড CSS একটি শক্তিশালী ইউটিলিটি-ফার্স্ট CSS ফ্রেমওয়ার্ক যা ডেভেলপারদের দ্রুত এবং সহজে মডার্ন ওয়েবসাইট বানাতে সাহায্য করে। তবে, অনেক সময় ফ্রেমওয়ার্কের বাইরে কাস্টম স্টাইল যোগ করার প্রয়োজন হয়। এই গাইডে, আমরা টেইলউইন্ডে কাস্টম স্টাইল যোগ করার সেরা পদ্ধতিগুলো নিয়ে আলোচনা করব।
১. থিম কাস্টমাইজেশন
টেইলউইন্ডে আপনার ডিজাইন টোকেন (রং, ফন্ট, স্পেসিং ইত্যাদি) কাস্টমাইজ করতে @theme ডাইরেক্টিভ ব্যবহার করুন:
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 120rem;
--color-avocado-100: oklch(0.99 0 0);
--color-avocado-200: oklch(0.98 0.04 113.22);
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}
এটি আপনার প্রজেক্টে কনসিস্টেন্ট ডিজাইন সিস্টেম বজায় রাখতে সাহায্য করবে।
২. আরবিট্রারি ভ্যালু ব্যবহার
যদি টেইলউইন্ডের প্রি-ডিফাইনড ভ্যালু আপনার প্রয়োজন মেটাতে না পারে, আপনি স্কয়ার ব্র্যাকেট ([]) ব্যবহার করে যেকোনো মান যোগ করতে পারেন:
<div class="top-[117px] lg:top-[344px] bg-[#bada55] text-[22px]">
<!-- কাস্টম ভ্যালু ব্যবহার করুন -->
</div>
৩. কাস্টম CSS যোগ করা
টেইলউইন্ডে সরাসরি CSS লিখতে চাইলে, আপনি নিয়মিত CSS ফাইল ব্যবহার করতে পারেন:
/* custom.css */
.my-custom-style {
background: linear-gradient(to right, #ff8a00, #da1b60);
}
বেস স্টাইল যোগ
প্রজেক্টের ডিফল্ট স্টাইল (যেমন ফন্ট, ব্যাকগ্রাউন্ড) html বা body ট্যাগে যোগ করুন:
<html class="bg-gray-100 font-sans text-gray-900">
<!-- ... -->
</html>
অথবা @layer base ব্যবহার করে:
@layer base {
h1 {
font-size: var(--text-2xl);
}
h2 {
font-size: var(--text-xl);
}
}
কম্পোনেন্ট স্টাইল যোগ
@layer components ব্যবহার করে রিইউজেবল কম্পোনেন্ট স্টাইল যোগ করুন:
@layer components {
.card {
background: white;
border-radius: var(--rounded-lg);
box-shadow: var(--shadow-xl);
}
}
এরপর HTML-এ ইউটিলিটি ক্লাসের সাথে একসাথে ব্যবহার করুন:
<div class="card rounded-none">
<!-- ... -->
</div>
৪. কাস্টম ইউটিলিটি তৈরি
টেইলউইন্ডে নতুন ইউটিলিটি যোগ করতে @utility ডাইরেক্টিভ ব্যবহার করুন:
@utility content-auto {
content-visibility: auto;
}
এটি HTML-এ content-auto ক্লাস হিসেবে ব্যবহার করা যাবে।
৫. কাস্টম ভ্যারিয়েন্ট তৈরি
নতুন ভ্যারিয়েন্ট (যেমন theme-dark) যোগ করতে @custom-variant ব্যবহার করুন:
@custom-variant theme-dark {
&:where([data-theme="dark"] *) {
@slot;
}
}
HTML-এ ব্যবহার:
<div data-theme="dark" class="theme-dark:bg-black">
<!-- ... -->
</div>
সেরা অনুশীলন
/* input.css */
@import "tailwindcss";
/* কাস্টম বেস স্টাইল */
@layer base {
body {
@apply bg-gray-50 text-gray-900 font-sans;
}
h1 {
@apply text-3xl font-bold;
}
h2 {
@apply text-2xl font-semibold;
}
}
/* কাস্টম কম্পোনেন্ট স্টাইল */
@layer components {
.btn {
@apply px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors;
}
.card {
@apply bg-white p-6 rounded-lg shadow-md;
}
}
/* কাস্টম ইউটিলিটি */
@layer utilities {
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
}
থিম ভ্যারিয়েবল ব্যবহার – ডিজাইন কনসিস্টেন্সির জন্য থিম ভ্যারিয়েবল ব্যবহার করুন।
আরবিট্রারি ভ্যালু সীমিত রাখুন – শুধুমাত্র প্রয়োজন হলে স্কয়ার ব্র্যাকেট ব্যবহার করুন।
কম্পোনেন্ট স্টাইল মডুলার রাখুন – বারবার ব্যবহারের জন্য কম্পোনেন্ট ক্লাস তৈরি করুন।
ভ্যারিয়েন্টস ব্যবহার – রেসপন্সিভ ও ইন্টারঅ্যাক্টিভ ডিজাইনের জন্য ভ্যারিয়েন্টস ব্যবহার করুন।