Tailwind CSS in Bengali für Anfänger

Für diejenigen von uns, die im Webdesign-Bereich tätig sind oder darüber nachdenken, in das CSS-Framework einzusteigen, könnte Bootstrap der Ausgangspunkt für CSS-Frameworks sein, da es für Anfänger sehr einfach zu starten ist und in unserem Land sehr gefragt ist Land. Aber ein CSS-Framework, von dem wir seit mehreren Jahren viel hören (man könnte sagen, es liegt im Trend), ist Tailwind CSS. Und wer mit diversen JavaScript-Bibliotheken, Frameworks wie React, Vue etc. arbeitet oder damit begonnen hat, dem ist der Name Tailwind CSS bestens ein Begriff. Auch heute noch ist Tailwind CSS das beliebteste CSS-Framework. Heute werde ich versuchen, auf sehr einfache Weise über Tailwind CSS zu schreiben, damit Anfänger ganz einfach mit Tailwind CSS beginnen können.

Tailwind CSS in Kürze:

Tailwind CSS wird als Utility-First-CSS-Framework bezeichnet. Hier können Sie alle Arten von Designs erstellen, indem Sie nützliche CSS-Klassen direkt in HTML-Dateien schreiben. Für die Verwendung von Tailwind CSS müssen Sie nicht viel außerhalb der HTML-Datei tun. Es ist sehr schnell, flexibel und zuverlässig. Tailwind CSS besteht im Wesentlichen aus vielen nützlichen CSS-Klassen. Auch wenn die CSS-Datei zum Zeitpunkt der Entwicklung groß ist, werden bei der Erstellung für die Produktion nur die Stile für die in der HTML-Datei verwendeten CSS-Klassen generiert, was uns eine sehr gute Übersicht gibt kleine CSS-Datei. wo es kein redundantes oder doppeltes CSS gibt.

So funktioniert Tailwind CSS:

Tailwind CSS scannt grundsätzlich die CSS-Klassennamen aus jeder HTML-Datei, JavaScript-Komponente oder jeder Art von Vorlagendatei, generiert dann die Stile für das gescannte CSS und gibt uns eine statische CSS-Datei, die den Kopfabschnitt der HTML-Datei darstellt. anrufen .

Tailwind CSS-Installationsschritte:

Wir können Tailwind CSS auf verschiedene Arten in einem Projekt installieren. Beispiel: Tailwind verwendet CLI, PostCSS und CDN. Sie denken vielleicht, dass CDN einfach zu verwenden ist, aber das größte Problem besteht darin, dass Sie keine Tailwind-Konfigurations- und Anpassungsfunktionen erhalten. Hier zeige ich Ihnen, wie Sie Tailwind CSS in einem Projekt mit Tailwind CLI installieren

Schritt-1:
Zuerst müssen wir den Knoten in unserem Projekt initialisieren (auf Ihrem Computer muss Node.js Version 12.13.0 oder höher installiert sein). Erstellen Sie einen Projektordner, öffnen Sie das Terminal im Projektordner, geben Sie den folgenden Befehl ein und drücken Sie die Eingabetaste.

npm init -y

Schritt-2:
Jetzt müssen wir Tailwind CSS als Entwicklerabhängigkeit installieren. Geben Sie dazu den folgenden Befehl in das Terminal ein und drücken Sie die Eingabetaste.

npm install -D tailwindcss

Schritt-3:
Erstellen Sie nun die Datei tailwind.config.js, die die gesamte Konfiguration von Tailwind CSS enthält. Geben Sie dazu den folgenden Befehl in das Terminal ein und drücken Sie die Eingabetaste.

npx tailwindcss init

Schritt 4:
Schreiben Sie in das Inhaltsarray der Datei tailwind.config.js alle Vorlagenerweiterungen, die das Tailwind-CSS-Dienstprogramm scannt. Das bedeutet, dass wir die Unterstützung von Tailwind-CSS in der Datei wünschen. Zum Beispiel: Wir werden hier nur Rückenwind-CSS in eine HTML-Datei schreiben, also schreiben wir hier .html in das Inhaltsarray.

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

Schritt-5:
Erstellen Sie nun 2 Ordner. Ich habe die Ordner src bzw. dist benannt. Erstellen Sie eine CSS-Datei mit dem Namen „input.css“ (kann ein beliebiger Name sein) im Ordner „src“ und eine CSS-Datei mit dem Namen „output.css“ (kann ein beliebiger Name sein) im Ordner „dist“. Die Datei input.css wird grundsätzlich von Tailwind selbst verwendet und enthält alle Anweisungen von Tailwind CSS. Durch diese Anweisungen werden das Basis-, Komponenten- und Dienstprogramm-CSS von Tailwind CSS aufgerufen. In die Datei input.css müssen wir den folgenden Code schreiben.

/* 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-Grundlagen:

Wie ich bereits erwähnt habe, ist Tailwind CSS ein CSS-Framework, das aus vielen nützlichen CSS-Klassen besteht. Die Verknüpfung mit den Utility-Funktionen unterscheidet Tailwind CSS im Wesentlichen von allen anderen CSS-Frameworks. Wie das Bootstrap-CSS-Framework erhalten wir eine vollständige Komponente, während das Tailwind-CSS-Framework uns keine so vollständige Komponente liefert. In einer Bootstrap-Komponente sind Rand, Abstand, Breite, Höhe, Schriftgröße und Farbe bereits angegeben. Wir fügen einfach das HTML-Markup dieser Komponente in unsere HTML-Datei ein und erhalten eine schöne Kartenkomponente. Andererseits stellt uns Tailwind CSS zahlreiche Utility-Klassen aus Low-Level-CSS wie Margin und Padding zur Verfügung, mit denen wir das Design nach unseren Wünschen gestalten können.

Wenn wir ein Design mit Vanilla-CSS erstellen möchten, müssen wir zwei Dinge tun: viele aussagekräftige Klassennamen schreiben und eine CSS-Datei Zeile für Zeile schreiben, indem wir diese Namen speichern. In diesem Fall wird Zeit damit verschwendet, den aussagekräftigen Namen unserer Klasse herauszufinden, außerdem müssen wir das CSS selbst schreiben und manchmal tritt auch das Problem der Codeduplizierung auf.

Wenn wir andererseits Utility-CSS verwenden, müssen wir nicht mehr über Klassennamen nachdenken, sondern es genügt, die Utility-Klassen von Tailwind aufzurufen. Sie denken vielleicht darüber nach, wie Sie sich so viele Dienstprogrammklassen merken können, Sie müssen sich nichts merken, fast alle Dienstprogrammklassen von Tailwind sind deklarativ und wenn Tailwinds eigene Intelligenzunterstützung in Ihrem Code-Editor vorhanden ist, müssen Sie sich darüber keine Sorgen machen. Wenn Sie ein paar Tage lang regelmäßig üben, haben Sie alles unter Kontrolle. Eine weitere wichtige Sache, die Sie wissen sollten, ist, dass Tailwind CSS vollständig in rem-Einheiten berechnet wird, d. h. p-6 bedeutet padding-1,5rem. Schauen wir uns ein Beispiel an:

<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 এর আন্ডার এ যাবে সেইটা।

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

Das obige ist der detaillierte Inhalt vonTailwind CSS in Bengali für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!