Tailwind CSS in Bengali for beginners

For those of us who are in the web design sector or are thinking of entering the CSS framework, Bootstrap may be the starting point for CSS frameworks, as it is very easy for beginners to start with and is in high demand in our country. But one CSS framework we have been hearing a lot (you can say trending) for several years is Tailwind CSS. And those who work with or have started with various JavaScript libraries, frameworks like React, Vue etc., the name Tailwind CSS is very familiar. Even today Tailwind CSS is the most popular CSS framework. Today I will try to write about Tailwind CSS very simply, so that newbies can start Tailwind CSS very easily.

Tailwind CSS in short:

Tailwind CSS is called a utility-first CSS framework. Here you can create all types of designs by writing utility CSS classes directly in HTML files. Using Tailwind CSS doesn't require you to do much outside of the HTML file. It is very fast, flexible and relaible. Tailwind CSS is basically composed of many utility CSS classes, so even though the CSS file size is large at development time, when it is built for production, it generates only those styles for the CSS classes used in the HTML file, giving us a very small CSS file. . where there is no redundant or duplicate CSS.

How Tailwind CSS works:

Tailwind CSS basically scans the CSS class names from any HTML file, JavaScript component or any type of template file and then generates the styles for the scanned CSS and gives us a static CSS file which is the head section of the HTML file. to call .

Tailwind CSS Installation Steps:

We can install Tailwind CSS in a project in several ways. For example: Tailwind uses CLI, PostCSS uses and CDN uses. You may think CDN is easy to use but the biggest problem here is that you don't get Tailwind configuration and customization features. Here I will show you how to install Tailwind CSS in a project using Tailwind CLI

Step-1:
First we need to initialize node (your machine must have Node.js version 12.13.0 or higher version installed) in our project. Create project folder and open terminal in project folder and type below command and press enter button.

npm init -y

Step-2:
Now we need to install Tailwind CSS as a dev dependency. For this type the following command in the terminal and press the enter button.

npm install -D tailwindcss

Step-3:
Now create tailwind.config.js file which contains all configuration of tailwind css. For this type the following command in the terminal and press the enter button.

npx tailwindcss init

Step-4:
In the content array of the tailwind.config.js file, write all the template extensions from which the Tailwind CSS utility will scan. It means that we want the support of tailwind css in the file. For example: we will only write tailwind css in html file here so here we have written .html in content array.

//tailwind.config.js file
module.exports = {
content: ["*.{html}"],
theme: {
extend: {},
},
plugins: [],
}

Step-5:
Now create 2 folders. I named the folders src and dist respectively. Create a css file named input.css (can be any name) in the src folder and create a css file named output.css (can be any name) in the dist folder. The input.css file will basically be used by Tailwind itself, which will contain all the directives of Tailwind CSS. Through these directives the base, components and utilities CSS of Tailwind CSS will be called. In the input.css file we have to write the following code.

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

ধাপ-৬ঃ
এখন টেইলউইন্ড ডেভেলপার মোডে কিভাবে বিল্ড হবে সেটা বলে দেয়ার জন্য package.json ফাইলে আমাদেরকে একটি বিল্ড স্ক্রিপ্ট লিখে দিতে হবে। এই স্ক্রিপ্টের মাধ্যমে Tailwind CLI টেম্পলেট ফাইল স্ক্যান করে স্ট্যাটিক সিএসএস বিল্ড করবে।

"scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css -w"
}

এখানে -i এর পরে ইনপুট সিএসএস ফাইলের এর পাথ, -o এর পরে অউটপুট সিএসএস ফাইলের পাথ নির্দেশ করে দিতে হবে এবং -w এর মাধ্যমে আমরা ওয়াচ ফ্ল্যাগ চালু করে দিয়েছি যাতে tailwind.config.js বা input.css ফাইলে কোন পরিবর্তন হলে অটোমেটিক টেইলউইন্ড বিল্ড হয়।

ধাপ-৭ঃ
এখন output.css ফাইলটি এইচটিএমএল ফাইলের হেডট্যাগ এর মধ্যে কল করতে হবে।

<link rel="stylesheet" href="dist/output.css">

ধাপ-৮ঃ
আমাদের প্রোজেক্ট এখন ১০০% প্রস্তুত টেইলউইন্ড সিএসএস লেখার জন্য। যেকোনো এইচটিএমএল ট্যাগের ক্লাস হিসাবে টেইলউইন্ড সিএসএস ইউটিলিটি ক্লাস গুলো লিখলেই প্রত্যাশিত অউটপুট পেয়ে যাবেন। কিন্তু এর আগে টার্মিনাল এ আপনাকে আর একটা কমান্ড চালু রাখতে হবে সেইটা নিম্নরূপঃ

npm run build

ধাপ-৯ঃ
এই ধাপটা একেবারে অপশনাল আপনি যদি কোড এডিটরে টেইলউইন্ড সিএসএস এর ইন্টেলিজেন্স সাপোর্ট পেতে চান তাহলে টেইলউইন্ড সিএসএস এর নিজস্ব এক্সটেনশন আপনার কোড এডিটরে ইন্সটল করে নিতে পারেন। যেমনঃ Visual Studio Code এর জন্য Tailwind CSS IntelliSense এক্সটেনশন।

Utility-first fundamentals:

As I mentioned before, Tailwind CSS is a CSS framework made up of many utility CSS classes. The utility feature tie essentially sets Tailwind CSS apart from all other CSS frameworks. Like Bootstrap CSS framework gives us a complete component whereas Tailwind CSS framework doesn't give us such a complete component. In a Bootstrap component, margin, padding, width, height, font-size, color are already specified. We just put the HTML markup of that component in our HTML file and get a beautiful card component. On the other hand, Tailwind CSS provides us with numerous utility classes made with low level CSS like margin, padding, which we can use to design as we wish.

If we want to make a design using vanilla CSS, then we must do 2 things, that is to write many meaningful class names and write CSS line by line CSS file by holding those names. In this case, time is wasted in finding out the meaningful name of our class, as well as we have to write the CSS by ourselves and sometimes the code duplication problem also comes.

On the other hand, if we use utility CSS, we don't need to think about class names anymore, just calling Tailwind's utility classes will do the job. You may think how to remember so many utility classes, you don't need to remember anything, almost all utility classes of Tailwind are declarative and if Tailwind's own intelligence support is in your code editor, you don't have to worry about this. If you practice regularly for a few days, everything will come under your control. Another important thing to know is that Tailwind CSS is all calculated in rem units, ie p-6 means padding-1.5rem. Let's look at an example:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
        <div class="shrink-0">
                <img class="h-12 w-12" src="https://aiarnob.com/frontend/assets/images/favicons/apple-touch-icon.png" alt="ChitChat Logo">
        </div>
        <div>
                <div class="text-xl font-medium text-black">AI Arnob</div>
                <p class="text-slate-500">You have a new message!</p>
    </div>
</div>

উপড়ের সুন্দর কার্ড টা ডিজাইন করার জন্য কিন্তু আমাদের কোন সিএসএস লিখতে হয় নাই জাস্ট কিছু টেইলউইন্ড ইউটিলিটি ক্লাস ব্যবহার করা হয়েছে। লক্ষ করলে দেখবেন যে, এখানে ইউটিলিটি ক্লাসগুলো কতটা ডিক্লারেটিভ, যেমনঃ

• p-6 এর মাধ্যমে চারপাশে padding দিয়েছি 1.5rem।
• max-w-sm এর মাধ্যমে ম্যাক্সিমাম উইড্থ দিয়েছি sm মানে 24rem।
• mx-auto এর মাধ্যমে মার্জিন বামে এবং ডানে অটো করেছি।
• bg-white এর মাধ্যমে ব্যাকগ্রাউন্ড কালার সাদা দিয়েছি।
• rounded-xl এর মাধ্যমে বর্ডার রউন্ড করেছি।
• shadow-lg এর মাধ্যমে বক্স শ্যাডো অ্যাপ্লাই করেছি।
• flex এর মাধ্যমে ডিভ টাকে ডিসপ্লে ফ্লেক্স করেছি।

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

বিভিন্ন ধরনের স্টেট হ্যান্ডল করাঃ (Hover, Focus, and Other States)

এতক্ষণে হয়ত আপনার মনে প্রশ্ন জেগেছে যে, টেইলউইন্ড সিএসএস এর মাধ্যমে আমরা কিভাবে বিভিন্ন ধরনের স্টেট ম্যানেজ করতে পারি। এটার ও একটা খুব ভালো সমাধান আছে। যেকোনো ইউটিলিটি ক্লাসের সামনে আমাদেরকে জাস্ট মডিফায়ার লিখতে হবে। নিম্নের উদাহরণ তা দেখলেই বুঝতে পারবেন।

<button class="bg-sky-600 hover:bg-sky-700 text-white px-7 py-2 rounded-full">
        Click me
</button>

এখানে স্বাভাবিক ভাবে বাটন ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে bg-sky-600 এবং হুভার স্টেট এ ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে hover:bg-sky-700। এখানে hover: টা হল মডিফায়ার। এভাবে :focus, :active, :first-child, :required, ::before, ::after, ::placeholder, ::selection এরকম আরও অনেক মডিফায়ার ব্যবহার করে ইউটিলিটি ক্লাস লেখা যায়। বিভিন্ন স্টেট সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

রেস্পন্সিভ ডিজাইনঃ

টেইলউইন্ড সিএসএস এর বিভিন্ন রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট আছে যেগুলো ব্যবহার করে জটিল জটিল রেস্পন্সিভ ইন্টারফেস ডিজাইন করা যায়। টেইলউইন্ড সিএসএস মোবাইল ফার্স্ট এপ্রোচ এ কাজ করে তাই রেস্পন্সিভ এর জন্য ডিফল্ট যে ৫ ধরনের ব্রেকপয়েন্ট(চাইলে আপনি ইচ্ছামত কাস্টোমাইজ করতে পারবেন) আছে সেগুলোতে min-width উল্লেখ করা। ব্রেকপয়েন্টগুলো নিম্নরূপঃ
|ব্রেকপয়েন্ট প্রিফিক্স|মিনিমাম উইড্থ|সিএসএস মিডিয়া কুয়েরি|
|-|-|-|
|sm|640px|@media (min-width: 640px) { ... }|
|md| 768px |@media (min-width: 768px) { ... }|
|lg| 1024px |@media (min-width: 1024px) { ... }|
|xl| 1280px |@media (min-width: 1280px) { ... }|
|2xl| 1536px |@media (min-width: 1536px) { ... }|

সরাসরি কোন ইউটিলিটি ক্লাস লিখলে সেটি সবগুলো ডিভাইসে কাজ করে কিন্তু যখন কোন ইউটিলিটি ক্লাসের এর আগে রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট যেমনঃ sm: লেখা হবে তখন সেটি ডিভাইস উইড্থ 768px এর সমান বা এর চেয়ে বড় হলে কাজ করবে।

<img class="w-16 md:w-32 lg:w-48" src="...">

এখানে ইমেজ এর ডিফল্ট উইড্থ ১৬, মিডিয়াম স্ক্রীন এর জন্য হবে ৩২ এবং লার্জ স্ক্রীন এর জন্য হবে ৪৮। রেস্পন্সিভ ডিজাইন সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

ডার্ক এবং লাইট মোডঃ

টেইলউইন্ড সিএসএস ব্যবহার করে খুব সহজে আপনি আপনার ওয়েবসাইটে ডার্ক মোড এনাবল করতে পারবেন। সাইটকে ডার্ক করার জন্য টেইলউইন্ড সিএসএস dark নামে একটি ভারিয়ান্ট দেয়, যেটি যেকোনো ইউটিলিটি ক্লাস এর সামনে দিলে তখন তা শুধুমাত্র ডার্ক মোডে কাজ করবে।

<button class="bg-sky-600 hover:bg-sky-700 dark:bg-sky-200">
  Save changes
</button>

উপরের কোডে dark:bg-sky-200 লেখা হয়েছে যার ফলে ডার্ক মোডে বাটনটির ব্যাকগ্রাউন্ড কালার হবে bg-sky-200।

ডার্ক মোড স্ট্রাটেজি
ডার্ক মোড স্ট্রাটেজি ২ ধরনের হয় class স্ট্রাটেজি এবং media স্ট্রাটেজি। tailwind.config.js ফাইলে ডার্ক মোড স্ট্রাটেজি বলে দিতে হবে।

//tailwind.config.js file
module.exports = {
  darkMode: 'class',
  // ...
}

আপনি যদি কাস্টম বাটন ব্যবহার করে ডার্ক এবং লাইট মোড toggle করতে চান তাহলে class স্ট্রাটেজি ব্যবহার করতে পারেন আর যদি চান যে অপারেটিং সিস্টেমের প্রেফারেন্স এর উপর নির্ভর করে সাইট ডার্ক অথবা লাইট হবে তাহলে media স্ট্রাটেজি ব্যবহার করতে হবে। ডার্ক মোড সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

পুনরায় ব্যবহারযোগ্য স্টাইলঃ

আমাদের প্রোজেক্ট এ অনেক সময় একই ডিজাইনের কম্পোনেন্ট একাধিক জায়গায় ব্যবহার করতে হয় তখন দেখা যায় ইউটিলিটি ক্লাসগুলোর ডুপ্লিকেশন চলে আসে। যেমনঃ নিম্নের ডিজাইনে রাউন্ডেড অবতার ডিজাইন বার বার রিপিট করা হয়েছে যার ফোলে একই ইউটিলিটি ক্লাস এর ডুপ্লিকেশন তৈরি হয়েছে।

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg">
        <div class="flex items-center space-x-2 text-base">
                <h4 class="font-semibold text-slate-900">Users</h4>
            <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">100</span>
        </div>
        <div class="mt-3 flex -space-x-2 overflow-hidden">
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1550525811-e5869dd03032" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263" alt=""/>
        </div>
        <div class="mt-3 text-sm font-medium">
                <a href="#" class="text-blue-500">+ 95 others</a>
        </div>
</div>

ইউটিলিটি ক্লাস এর ডুপ্লিকেশন সমস্যা সমাধানের জন্য টেইলউইন্ড সিএসএস আমাদের সুন্দর একটা প্রসেস দিয়েছে। input.css ফাইলে @apply ডিরেক্টিভ এর মাধ্যমে আমরা আমাদের নিজেরদের পছন্দ মতো ক্লাস নাম দিয়ে নতুন একটা কম্পোনেন্ট তৈরি করতে পারি।

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .user-avatar {
    @apply inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover;
  }
}

এখন আমরা শুধু user-avatar ক্লাস টা ব্যবহার করলেই রাউন্ডেড অবতার ডিজাইনটা পেয়ে যাব। আরেকটা বিষয় @layer ডিরেক্টিভের মাধ্যমে নির্ধারিত হয় আমাদের তৈরি করা স্টাইল base, components নাকি utilities এর আন্ডার এ যাবে সেইটা।

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

The above is the detailed content of Tailwind CSS in Bengali for beginners. For more information, please follow other related articles on the PHP Chinese website!