কিভাবে একটি Next.js অ্যাপে Tailwind CSS ইনস্টল এবং ব্যবহার করবেন

কিভাবে একটি Next.js অ্যাপে Tailwind CSS ইনস্টল এবং ব্যবহার করবেন
আপনার মত পাঠকরা MUO সমর্থন করতে সাহায্য করে। আপনি যখন আমাদের সাইটে লিঙ্ক ব্যবহার করে একটি ক্রয় করেন, আমরা একটি অনুমোদিত কমিশন উপার্জন করতে পারি। আরও পড়ুন

আপনি যদি আপনার অ্যাপগুলিকে দ্রুত, নমনীয় এবং নির্ভরযোগ্য ফ্রেমওয়ার্কের সাথে স্টাইল করতে চান, তাহলে Tailwind CSS একটি দুর্দান্ত বিকল্প। Tailwind হল একটি CSS ফ্রেমওয়ার্ক যা আপনাকে কাস্টম ওয়েব কম্পোনেন্ট ডিজাইন করতে সাহায্য করে। আপনি এইচটিএমএল এবং সিএসএস ফাইলগুলির মধ্যে পিছনে এবং পিছনে সুইচ না করেই উপাদানগুলি ডিজাইন করতে পারেন।





কিভাবে শ্রবণযোগ্য বিনামূল্যে ট্রায়াল বাতিল করতে হয়

বুটস্ট্র্যাপের বিপরীতে, টেলউইন্ডের পূর্বনির্ধারিত ক্লাস নেই। পরিবর্তে, আপনি আপনার নিজের কাস্টমাইজ করতে পাবেন। Tailwind-এর সাহায্যে, আপনি আদিম উপযোগিতা, ফাংশন এবং নির্দেশাবলী সহ জটিল উপাদান তৈরি করতে পারেন।



দিনের মেকইউজের ভিডিও

আপনার Next.js প্রোজেক্টে আশ্চর্যজনক ইউজার ইন্টারফেস তৈরি করতে Tailwind কিভাবে ইনস্টল এবং ব্যবহার করবেন তা শিখুন।





Next.js-এ Tailwind CSS ইনস্টল করুন

একটি Next.js অ্যাপ্লিকেশনে Tailwind ইনস্টল করে শুরু করুন। প্রক্রিয়া অনুরূপ একটি প্রতিক্রিয়া অ্যাপে Tailwind ইনস্টল করা হচ্ছে , কনফিগারেশন প্রক্রিয়া সামান্য পার্থক্য সঙ্গে.

যান Tailwind CSS ইনস্টলেশন পৃষ্ঠা তারপর যান ফ্রেমওয়ার্ক গাইড বিভাগ এবং নির্বাচন করুন পরবর্তী.js . এই বিভাগে আপনার Next.js প্রোজেক্টে Tailwind সেট আপ করার জন্য প্রয়োজনীয় সমস্ত নির্দেশাবলী রয়েছে।



এর মাধ্যমে Tailwind ইনস্টল করতে npm, জাভাস্ক্রিপ্ট প্যাকেজ ম্যানেজার , এই দুটি টার্মিনাল কমান্ড চালান:

D4CC874C158D9005DBCB6474723F8993EDC9E47

এই কমান্ডগুলি নামে দুটি কনফিগার ফাইল তৈরি করে tailwind.config.js এবং postcss.config.js রুট প্রকল্প ফোল্ডারে। এই ফাইলগুলি নির্দেশ করে যে TailwindCSS সফলভাবে ইনস্টল করা হয়েছে৷ আপনি টেইলউইন্ড সিএলআই এর মাধ্যমে বা পোস্টসিএসএস প্লাগইন হিসাবে টেইলউইন্ড সিএসএস ইনস্টল করতে পারেন।



টেমপ্লেট কনফিগার করুন

ইনস্টলেশনের পরে, আপনাকে অবশ্যই আপনার অ্যাপ কনফিগার ফাইলের ইনস্টলেশন গাইডে প্রদত্ত টেমপ্লেট পাথগুলি কনফিগার করতে হবে। নিম্নলিখিত কোড যোগ করুন tailwind.config.js ফাইল :

 /** @type {import('tailwindcss').Config} */  
module.exports = { 
    content: [  
        "./app/**/*.{js,ts,jsx,tsx}", 
        "./pages/**/*.{js,ts,jsx,tsx}", 
        "./components/**/*.{js,ts,jsx,tsx}", 
 
        // Or if using `src` directory:  
        "./src/**/*.{js,ts,jsx,tsx}", 
    ], 
    theme: {  
        extend: {}, 
    }, 
    plugins: [], 
}

অ্যাপে Tailwind নির্দেশিকা যোগ করুন

এরপর, আপনার অ্যাপ CSS ফাইলে নিম্নলিখিত Tailwind নির্দেশাবলী যোগ করুন। এই নাম ফাইল global.css. আপনি global.css ফাইলের বিষয়বস্তু মুছে ফেলুন এবং Tailwind নির্দেশাবলী যোগ করুন।



 @tailwind base; 
 
@tailwind components; 
 
@tailwind utilities;

বিল্ড প্রক্রিয়া চালান

এখন, টার্মিনালে, নিম্নলিখিত কমান্ড দিয়ে CLI টুলটি চালান:

 npm run dev

এই কমান্ডটি ক্লাসের জন্য আপনার টেমপ্লেট ফাইল স্ক্যান করে এবং আপনার CSS তৈরি করে। এটি আপনার ব্রাউজারটি দেখার জন্য একটি পোর্ট খুলবে।

টেলউইন্ড ব্রাউজার দেখার জন্য পোর্ট খুলেছে

এখন, যদি আপনি সার্ভারে নেভিগেট করেন http://localhost:3000 আপনি আপনার অ্যাপ দেখতে পাবেন। আপনি বিষয়বস্তু একটি সামান্য পরিবর্তন লক্ষ্য করা উচিত. এটি ইঙ্গিত দেয় যে ইনস্টলেশন প্রক্রিয়া সফল হয়েছে এবং Tailwind CSS লাইভ।

প্রকল্পে Tailwind ব্যবহার করুন

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

একটা তৈরি কর Home.tsx ফাইল তারপর নিম্নলিখিত কোড যোগ করুন:

 export default function Home() { 
    return ( 
        <body className="bg-blue-300"> 
            <h1 className='text-red-900'>Hello Tailwind CSS</h1> 
        </body> 
    ); 
}

এখন, আপনি যখন ব্রাউজারে নেভিগেট করবেন, আপনি দেখতে পাবেন লেখাটি লাল হয়ে গেছে এবং ব্যাকগ্রাউন্ডটি নীল।

পাঠ্যের উপর TailwindCSS প্রভাব

আপনার অ্যাপের অন্যান্য উপাদান স্টাইল করার জন্য আপনি অন্যান্য Tailwind CSS বৈশিষ্ট্যগুলি অন্বেষণ করতে পারেন। কন্ডিশনাল মডিফায়ারগুলি আপনাকে হভার এবং ফোকাসের মতো প্রতিক্রিয়াশীল অবস্থা তৈরি করতে দেয়। আপনি ব্যবহারকারীর পছন্দ অনুসারে আপনার পৃষ্ঠাগুলিকে অন্ধকার এবং হালকা মোডে কাস্টমাইজ করতে পারেন।

Tailwind CSS ব্যবহার করার সুবিধা

2017 সালে অ্যাডাম ওয়াথান দ্বারা তৈরি, Tailwind CSS অন্যান্য CSS লাইব্রেরি থেকে বিভিন্ন উপায়ে আলাদা। এটি শূন্য রান-টাইম আছে, এটি বাজ দ্রুত করে তোলে. এবং ইনস্টল করা সহজ। Tailwind আপনার অ্যাপে ক্লাসের নামের জন্য সমস্ত HTML ফাইল এবং জাভাস্ক্রিপ্ট উপাদান স্ক্যান করে। এটি তখন সংশ্লিষ্ট শৈলী তৈরি করে যা উপাদানগুলি ডিজাইন করে।

টেলউইন্ড সিএসএস আপনাকে আদিম ইউটিলিটি থেকে জটিল উপাদান ডিজাইন করতে দেয়। আপনি উপাদানগুলি জুড়ে শৈলীগুলি পুনরায় ব্যবহার করতে পারেন এবং প্রতিক্রিয়াশীল UI গুলিকে শৈলীতে সংশোধক ব্যবহার করতে পারেন৷ আপনার ব্র্যান্ডের সাথে মেলে এমন অ্যাপগুলি কাস্টমাইজ করতে Tailwind CSS কীভাবে ইনস্টল এবং ব্যবহার করবেন তা শিখতে এখানে পদক্ষেপগুলি ব্যবহার করুন৷