সিএসএস হল এমন একটি ফ্রন্টএন্ড প্রযুক্তি যা একই সাথে আপনার সবচেয়ে ভালো অথবা খারাপ বন্ধু হতে পারে। সিএসএস সাধারণত ওয়েবপেজের সৌন্দর্যবর্ধনের জন্যে ব্যবহার করা হয়। সিএসএস অত্যান্ত শক্তিশালী ও সহজবোধ্য হওয়ায় এর মাধ্যমে খুব সহজেই সুন্দর সুন্দর ইউসার ইন্টারফেস তৈরি করা সম্ভব হয়। কিন্তু এই কোড সঠিক ভাবে না লেখা হলে তা আপনার জন্যে জটিল সমস্যার সৃষ্টি করতে পারে।
সূচিপত্র
টেলওয়াইন্ড সিএসএস কি?
টেলওয়াইন্ড সিএসএস হল একটি “ইউটিলিটি-ফার্স্ট” সিএসএস ফ্রেমওয়ার্ক। যা সিএসএস ক্লাস এবং টুলগুলির একটি বিস্তারিত ক্যাটালগ প্রদান করে, যার সাহায্যে আপনি সহজেই আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন স্টাইল করা শুরু করতে পারেন।
এর লক্ষ্য হল যে আপনি যখন আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন তৈরি করছেন, তখন একটুও ভ্যানিলা সিএসএস না লিখে যেন আপনি শুধু সিএসএস এর কিছু ইউটিলিটি ক্লাসের সাহায্যে খুব সহজেই সুন্দর সুন্দর ইউসার ইন্টারফেস তৈরি করে ফেলতে পারেন।
টেলওয়াইন্ডের বৈশিষ্ট হলো এটি বিভিন্ন ধরনের সিএসএস ইউটিলিটি ক্লাস প্রদান করা যার প্রত্যেকটির নিজস্ব সতন্ত্র বৈশিষ্ট ও ব্যবহার রয়েছে। .btn নামক ক্লাসে সরাসরি একগুচ্ছ সিএসএস অ্যাট্রিবিউট ব্যবহার না করে আপনি টেলওয়াইন্ডের সাহায্যে bg-blue-500 py-2 px-4 এর মতো ছোট ছোট ইউটিলিটি ক্লাস প্রয়োগ করে একটি চমৎকার বাটন তৈরী করে ফেলতে পারেন। অথবা এই ইউটিলিটি ক্লাস গুলো প্রয়োগ করে আলাদা একটি .btn নামক ক্লাস কম্পোনেন্ট তৈরী করতে পারেন অতি সহজেই।
টেলওয়াইন্ড আপডেটের মাধ্যমে অনেক নতুন নতুন ফীচার প্রতিনিয়তই যুক্ত করছে। যদিও টেলওয়াইন্ডের আরও অনেক কিছু উন্নত করার আছে এই বিষয় গুলো তে।
কিভাবে টেলওয়াইন্ড সিএসএস ব্যাবহার করবো?
টেলওয়াইন্ড সিএসএস আমরা দুই ভাবে ব্যবহার করতে পারি। প্রথমটি হল CDN এর মাধ্যমে ওয়েবপেজে ব্যবহার করে। টেলওয়াইন্ড এই CDN কে “Play CDN” নামকরণ করেছে। আর অপরটি হল নিজের লোকাল মেশিনে বিল্ড স্ক্রিপ্ট সেটআপ করে। আমরা দুটি পদ্ধতিই এই খানে শিখবো।
পদ্ধতি ১ : CDN এর ব্যবহার
কোনো বিল্ড স্টেপ ছাড়াই ব্রাউজারে টেইলউইন্ড ব্যবহার করতে চাইলে Play CDN এর মাধ্যমে টেইলউইন্ড ব্যবহার করে দেখতে পারেন। Play CDN শুধুমাত্র ডেভেলপমেন্ট ও অনুশীলন করার উদ্দেশ্যে ডিজাইন করা হয়েছে, এটি কখনো লাইভ প্রজেক্টে ব্যবহার করবেন না।
আপনার HTML ফাইলেরট্যাগ এর মধ্যে Play CDN এর স্ক্রিপ্ট ট্যাগটি যোগ করুন। স্ক্রিপ্ট ট্যাগটি নিচে দাওয়া আছে।
<script src="https://cdn.tailwindcss.com" defer></script>
স্ক্রিপ্ট ট্যাগটি যোগ করার পরই আপনি টেলওয়াইন্ডের সব ইউটিলিটি ক্লাস ব্যবহার করতে পারবেন। আরও বিস্তারিত জানতে Play CDN সম্পর্কে টেলওয়াইন্ডের অফিসিয়াল ডকুমেন্টেশন দেখে আস্তে পারেন।
পদ্ধতি ২ : CLI এর মাধ্যমে বিল্ড স্ক্রিপ্ট সেটআপ
টেলওয়াইন্ড সিএসএস ব্যবহারের সবচাইতে সহজ, দ্রুততম ও সর্বোৎকৃষ্ট উপায় হল Tailwind CLI টুল। টেলওয়াইন্ড CLI এর মাধ্যমে ইনস্টল করার জন্যে আপনার কম্পিউটারে Node.js ভার্সন ১২.৩ বা তার উপরের ভার্সন ইনস্টল থাকতে হবে। ইনস্টল করা না থাকলে এখনই node.js এর অফিসিয়াল ওয়েবসাইট থেকে ডাউনলোড করে ইনস্টল করে নিন।
এরপর আপনি যে প্রজেক্ট ফাইলে টেলওয়াইন্ড ইনস্টল করতেচান সেই লোকেশনে আপনার কম্পিউটারের টার্মিনাল চালু করুন। আপনি চাইলে VS Code এর টার্মিনালও ব্যবহার করতে পারেন। এবার নিচের কোড গুলো টার্মিনালে লিখে Enter বাটন প্রেস করুন।
npm init -y
npm i -D tailwindcss
npx tailwindcss init
নোট: প্রতি লাইন কোড লেখার পর Enter প্রেস করতে হবে। একটা কোডের এক্সিকিউট শেষ হলে আর এক লাইন কোড লিখতে হবে, একসাথে সব কোড লেখা যাবে না।
এবার আমরা আমাদের প্রজেক্ট ফোল্ডারে src এবং output নামের দুইটি ফোল্ডার তৈরী করবো। src ফোল্ডার এর ভিতরে tailwind.css নামের একটি ফাইল তৈরী করতে হবে। আপনি চাইলে অন্য নামেও এই ফাইল তৈরী করতে পারেন। কিন্তু অবশ্যই ফাইল এক্সটেনশন .css হতে হবে। ফাইলটি তৈরী করার পর ওই ফাইল এর মধ্যে আমরা নিচের কোড গুলো লিখে সেভ করবো।
@tailwind base;
@tailwind components;
@tailwind utilities;
এরপর আমাদের বিল্ড স্ক্রিপ্ট লিখতে হবে। এর জন্যে আমাদের প্রজেক্টে package.json ফাইলটি কোড ইডিটরে ওপেন করবো। এই json ফাইলে script প্রপার্টির ভিতরে আমরা build নামের একটি প্রপার্টি লিখবো। এই বিল্ড এর কোডটি নিচে দাওয়া আছে।
"build": "tailwindcss -i ./src/tailwind.css -o ./output/tailwind.css -w"
তারপর প্রজেক্টের tailwind.config.js ফাইলটি কোড ইডিটরে ওপেন করবো। এই js ফাইলে content প্রোপার্টিতে আমরা নিচের কোডটি লিখবো। আপনি চাইলে কোডটি আপনার সুবিধা মতো পরিবর্তন করে নিতে পারেন।
content: ['*.{html,php,js,jsx,ts,tsx,vue}'],
এবার আমরা আমাদের টার্মিনালে নিচের কম্যান্ডটি দিয়া ইন্টার প্রেস করবো।
npm rub build
ইন্টার প্রেস করার পর টেলওয়াইন্ড নিজে নিজে প্রজেক্টের output ফোল্ডার এ tailwind.css নামের একটি ফাইল তৈরী করে ফেলবে। এখন এই ফাইলটি আপনার html ফাইলে css হিসাবে লিংক আপ করতে হবে। লিংক আপ করা হলে আপনি এখন আপনার প্রজেক্টে টেলওয়াইন্ডের সব ইউটিলিটি ক্লাস ব্যবহার করতে পারবেন।
টেলওয়াইন্ড সিএসএস এর বিস্তারিত ব্যবহার জানতে চাইলে টেলওয়াইন্ডের অফিসিয়াল ডকুমেন্টেশন দেখে আস্তে পারেন। সেখানে টেলওয়াইন্ডের সকল ইউটিলিটি ক্লাস এবং অন্যান্য বিষয় সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।
এই সবগুলো স্টেপ আপনার কাছে ঝামেলার মনে হলে আপনি চাইলে আমার তৈরী করা Tailwind CSS Boilerplate টেম্পলেট টি Github থেকে ডাউনলোড করে নিতে পারেন। টেমপ্লেটটি কিভাবে ব্যবহার করবেন সেটা Github রিপোজিটোরির readme সেক্শনেই দাওয়া আছে।
তো আজ এই পর্যন্তই। আশাকরি এই আর্টিকেলটি আপনাদের কাজে আসবে। কোনো ধরণের সমস্যার সম্মুখীন হলে নিচে কমেন্ট করুন। আমরা দ্রুত সমাধান দেওয়ার চেষ্টা করবো। ধন্যবাদ।
3 Comments
Sifat Akon
at 2 years agoThanks.
Shahriar Hossain
at 7 months agoTailwind.css কি CSS শিখার পরে শিখবো নাকি Javascript/jquray শিখার পরে Tailwind.css শিখবো? আশাকরি, খুব তারাতাড়ি Answer দিবেন!
rony
at 7 days agocss শিখে তারপর Tailwind শিখেন। তাহলে css এর সব এট্রিবিউট ভালো করে বুঝতে পারবেন।