Tailwind CSS ইন্সটল করার আগে Node JS রান টাইম সফটওয়্যারটি অবশ্যই কম্পিউটারে ইন্সটল থাকতে হবে। এরপর নিচের ধাপগুলো অনুসরণ করতে হবেঃ
👉 প্রসেস ১: ইনস্টলেশন এন্ড ফাইল কনফিগারেশন
Tailwind CSS নিয়ে কাজ করার জন্য কম্পিউটারের একটি প্রোজেক্ট ফোল্ডার বানাতে হবে। এরপর VS Code ইডিটরে ফোল্ডারটি ওপেন করতে হবে।
VS Code এর টার্মিনাল ওপেন করে নিচের কমান্ড গুলো লিখতে হবেঃ
// ফোল্ডারে নোড প্রোজেক্ট ইনিশিয়ালাইজ।
npm init -y
// TailwindCSS কে প্রোজেক্টে ডিপেন্ডেন্সি হিসাবে ইনস্টল।
npm i -D tailwindcssএরপর প্রোজেক্টে Tailwind CSS এর কনফিগার ফাইল বানানোর জন্য টার্মিনালে লিখতে হবেঃ
npx tailwindcss initএই কমান্ডটি লিখার পর tailwind.config.js নামে একটি ফাইল তৈরি হবে। এই ফাইলের মাধ্যমে Tailwind CSS কে কনফিগার করতে পারবো।
এই ফাইলটি ওপেন করে নিচের কোডটি যথাযথ জায়গায় রিপ্লেস করে ফাইলটি পুণরায় সেভ করে দিতে হবেঃ
content: ["./src/**/*.{html,js}", "./**/*.{html,js}"],👉 প্রসেস ২: CSS বিল্ড ফাইল
এবার আমাদের প্রোজেক্ট ফোল্ডারে দু’টি ফোল্ডার বানাতে হবে।
❏ First Folder
.css ফাইল থাকবে যেখানে মূলত CSS কোড লিখা হবে। মনে করি, এই ফোল্ডারের নাম src হবে এবং এই ফোল্ডারে tailwind.css নামে একটি ফাইল বানাতে হবে। ( ফোল্ডার এবং ফাইলের নাম যেকোনো কিছু দেয়া যাবে। )@tailwind base;
@tailwind components;
@tailwind utilities;
/* ==== আমরা চাইলে, এভাবেও লিখতে পারি:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
*/*** এই ফাইলটির হেডার অংশে এসব লিখার মানে হলো যাতে এই ফাইলটি Tailwind CSS এর যাবতীয় প্রয়োজনীয় কম্পোনেন্ট এর অ্যাকসেস পায়।
মূলত এই ফাইলেই Tailwind CSS এর কাস্টম কোড লিখা হবে এবং সেই কোড সমূহ পরবর্তীতে CSS কোডে রূপান্তর হয়ে দ্বিতীয় ফোল্ডারে CSS আকারে সেভ হবে।
❏ Second Folder
প্রথম ফোল্ডার হতে কম্পাইল বা রূপান্তর হওয়া CSS কোড গুলো দ্বিতীয় ফোল্ডারে tailwind.css নামে নতুন ফাইল পাওয়া যাবে। মূলত এই নতুন ফাইলের সাথে HTML পেজ সংযুক্ত হবে।
❏ Build Configuration
প্রথম ফোল্ডার হতে Tailwind CSS এ লিখা কোড কম্পাইল হয়ে দ্বিতীয় ফোল্ডারে সেভ হবে, এর জন্যে একে কনফিগার করে দিতে হয়। মনে করি, প্রথম ফোল্ডার এর নাম src এবং দ্বিতীয় ফোল্ডার output এই নাম হবে। ( ফোল্ডার এবং ফাইলের নাম যেকোনো কিছু দেয়া যাবে। )
এরপর প্রোজেক্ট ফোল্ডারে package.json ফাইলে CSS বিল্ড লোকেশন ঠিক করে দিতে হবেঃ
"scripts": {
"build": "tailwindcss -i ./src/tailwind.css -o ./output/tailwind.css -w"
},ফাইলের "scripts": লাইনের জায়গা এই লাইনটি রিপ্লেস করে বসে দিতে হবে। এরপর ফাইটি সেভ করে দিতে হবে।
এই কনফিগারেশনটি করে দেয়ার পর যখন, src (সোর্স) ফোল্ডারে কোড লিখে সেভ দিবো, তখন তা অটোমেটিক কম্পাইল হয়ে, output (ডেস্টিনেশন) ফোল্ডারে অরিজিনাল CSS আকারে নতুন ফাইল তৈরি হবে। ( আর আগে থেকে ফাইল থাকলে, নতুন কোড তাতে ওভাররাইড হবে। )
Tailwind ফাইলকে বিল্ড বা কম্পাইল করার জন্য, নিচের এই কমান্ডটি টার্মিনালে লিখে দিতে হবেঃ
npm run build👉 প্রসেস ৩: VS Code এডিটর কনফিগারেশন
❏ Auto Suggestion and Autocomplete
এই ফিচার গুলো পাওয়ার জন্য, আমাদের “Tailwind CSS IntelliSense “Tailwind Labs”” নামে একটি প্লাগইন ইন্সটল করে নিতে হবে।
❏ Remove Error Warning:
TailwindCSS এ লিখা কোড VS Code ইডিটর বুঝতে পারে না। তাই কোড রান করলে, কোড লিখা সময় Spelling / Syntax Error হিসাবে প্রতি কোড লাইনে একটি দাগ বা ইরোর লাইন আসে।
এই দাগ বা ইরোর লাইন যাতে না আসে এজন্য, VS Code দু’ ভাবে এর সমাধান করা যায়।
Solution 1:
VS Code ইডিটরের মূল সেটিং হতে settings.json ফাইলটি ওপেন করে সেখানে নিচের এই কোডটি সংযুক্ত করে ফাইলটি সেভ করে দিলে সমস্যা সমাধান হয়ে যাবে।
"files.associations":{
"*.css": "tailwindcss"
}Solution 2:
আমাদের প্রোজেক্ট ফোল্ডারে .vscode নামে একটি ফোল্ডার তৈরি করতে হবে। সেখানে settings.json নামে ফাইল তৈরি করে এই কোডটি লিখতে হবেঃ
{
"css.validate": false,
}এরপর ফাইলটি সেভ করে দিতে হবে।
যদি কোডে অটোকমপ্লিট ফিচারটি অন করতে চাই, তবে নিচের আরেকটি কোড লিখে দিতে হবেঃ
{
"css.validate": false,
"tailwindCSS.emmetCompletions": true
}এরপর ফাইলটি সেভ করে দিতে হবে।
Note: তবে এজন্য আমাদের পূর্বে “Tailwind CSS IntelliSense “Tailwind Labs” প্লাগইনটি ইনস্টল থাকতে হবে।
