Featured image of post কিভাবে অতি সহজে টেইলওয়াইন্ড ভার্শন 4 ইন্সটল করবেন
Tutorial

কিভাবে অতি সহজে টেইলওয়াইন্ড ভার্শন 4 ইন্সটল করবেন

অতি সহজে কোনো ঝামেলা ছাড়াই আপনার রিয়েক্ট অথবা নেক্সট জেএস প্রজেক্টে টেইলওয়াইন্ড ভার্শন 4 ইন্সটল করুন।

ভুমিকা

যারা ওয়েব ডিজাইন জগতে প্রবেশ করছেন বা করার কথা ভাবছেন, তাদের কাছে বুটস্ট্র্যাপ নামটি বেশ পরিচিত। নতুনদের জন্য এর সহজবোধ্যতা এবং দেশের বাজারে এর ব্যাপক চাহিদা, বুটস্ট্র্যাপকে সিএসএস ফ্রেমওয়ার্ক শেখার প্রবেশদ্বার হিসেবে প্রতিষ্ঠিত করেছে। তবে গত কয়েক বছর ধরে আরেকটি সিএসএস ফ্রেমওয়ার্ক আলোচনার কেন্দ্রবিন্দুতে চলে এসেছে, আর তা হলো টেইলউইন্ড সিএসএস। বিশেষ করে যারা React, Vue-এর মতো জাভাস্ক্রিপ্ট লাইব্রেরি বা ফ্রেমওয়ার্ক নিয়ে কাজ করেন, তাদের কাছে টেইলউইন্ড সিএসএস নামটি আরও বেশি পরিচিত। বর্তমানে এটি অন্যতম জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক। আজকের আলোচনায় আমরা সহজভাবে টেইলউইন্ড সিএসএস ভার্শন 4 ইন্সটলেশন সম্পর্কে জানব, যাতে নতুনরাও সহজে এর ব্যবহার শুরু করতে পারেন।

টেইলউইন্ড সিএসএস সংক্ষেপে

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

টেইলউইন্ড সিএসএস কিভাবে কাজ করে?

টেইলউইন্ড সিএসএস যেকোনো এইচটিএমএল ফাইল, জাভাস্ক্রিপ্ট কম্পোনেন্ট বা টেমপ্লেট ফাইল থেকে সিএসএস ক্লাস নামগুলো স্ক্যান করে। এরপর, স্ক্যান করা ক্লাসগুলোর জন্য প্রয়োজনীয় স্টাইলগুলো জেনারেট করে একটি স্ট্যাটিক সিএসএস ফাইল তৈরি করে। এই ফাইলটি পরবর্তীতে এইচটিএমএল ফাইলের <head> সেকশনে লিঙ্ক করতে হয়। এভাবেই টেইলউইন্ড সিএসএস আপনার কোডবেসকে পরিচ্ছন্ন ও কর্মক্ষম রাখে।

টেইলওয়াইন্ড ভার্শন ৪ এর নতুনত্ব :

টেইলউইন্ড সিএসএস ভার্সন ৪ এসেছে সম্পূর্ণ নতুন একটি হাই-পারফরম্যান্স ইঞ্জিন নিয়ে, যা বিল্ড টাইমকে অবিশ্বাস্যভাবে দ্রুত করেছে। এটি আধুনিক ওয়েবের জন্য ডিজাইন করা হয়েছে, যেখানে ক্যাসকেড লেয়ার, @property, এবং color-mix()-এর মতো অত্যাধুনিক CSS ফিচারগুলো ব্যবহার করা হয়েছে। ইনস্টলেশন প্রক্রিয়া আরও সহজ হয়েছে, কারণ এতে কম নির্ভরতা, জিরো কনফিগারেশন এবং আপনার CSS ফাইলে শুধুমাত্র এক লাইনের কোড প্রয়োজন।

ভার্সন ৪ স্বয়ংক্রিয়ভাবে কন্টেন্ট সনাক্ত করতে পারে এবং CSS-কে প্রথম অগ্রাধিকার দিয়ে কনফিগারেশন করা যায়, যা সরাসরি CSS ফাইলে কাস্টমাইজেশনের সুযোগ দেয়। একটি আধুনিক P3 কালার প্যালেট অন্তর্ভুক্ত করা হয়েছে, যা ডিসপ্লে প্রযুক্তির পূর্ণ সুবিধা নিয়ে আরও উজ্জ্বল রঙ সরবরাহ করে। এছাড়াও, কন্টেইনার ক্যোয়ারি এখন বিল্ট-ইন, কোনো প্লাগইন ছাড়াই ব্যবহার করা যাবে। নতুন 3D ট্রান্সফর্ম ইউটিলিটি, উন্নত গ্রেডিয়েন্ট API, এবং @starting-style, not-* এর মতো নতুন ভেরিয়েন্ট যোগ হয়েছে।

কিভাবে টেইলওয়াইন্ড ভার্শন 4 ইন্সটল করবেন?

টেইলওয়াইন্ড ভার্শন ৩ ইন্সটলেশন এর তুলনায় টেইলওয়াইন্ড ভার্শন ৪ এর ইন্সটলেশনে অনেক পরিবর্তন আনা হয়েছে। ফলে অনেকের নিকট নতুন ইন্সটলেশন প্রক্রিয়া কিছুটা জটিল মনে হতে পারে। তাই আপনাদের সুবিধার্থে অতি সহজ ও বিস্তারিতভাবে আমি ইন্সটলেশন প্রক্রিয়া তুলে ধরছি।

Vite দ্বারা React প্রজেক্টে ইন্সটলেশন প্রক্রিয়া:

1

npm install tailwindcss @tailwindcss/vite

index.css কনফিগার করবেন যেভাবে:

1

@import "tailwindcss";

Vite.config.js ফাইলটি কনফিগার করবেন যেভাবে:

1
2
3
4
5
6
7

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

ভার্শন 4 এ imports এবং vendor prefixing স্বয়ত্রিয় ভাবে হ্যান্ডেলিং করা হয়। সুতরাং আমাদেরকে আর পূর্বের ভার্শনের মতো postcss-import এবং autoprefixer ইন্সটল করতে হবে না।

tailwind.config.js কনফিগার করবেন যেভাবে:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/** @type {import('tailwindcss').Config} */
export default {
    content: [
      "./index.html",
      "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},`
    },
    plugins: [],
  }

উপসংহার:

এখন আপনার প্রজেক্ট সম্পূর্নরূপে Tailwind css v4 ব্যবহারের জন্য প্রস্তুত। সময় নিয়ে পড়ার জন্য আপনাকে শুভকামনা!