初心者向けのベンガル語の Tailwind CSS

Web デザイン分野に携わっている人、または CSS フレームワークへの参入を考えている人にとって、Bootstrap は CSS フレームワークの出発点になる可能性があります。これは、初心者にとって非常に簡単に始めることができ、私たちの分野で需要が高いためです。国。しかし、ここ数年よく耳にする (トレンドと言ってもいい) CSS フレームワークの 1 つは、Tailwind CSS です。さまざまな JavaScript ライブラリ、React、Vue などのフレームワークを使用している、または使用を開始している人にとって、Tailwind CSS という名前はよく知られています。現在でも Tailwind CSS は最も人気のある CSS フレームワークです。今日は、初心者でも簡単に Tailwind CSS を始められるように、Tailwind CSS について非常に簡単に書いてみます。

Tailwind CSS を要約すると、次のようになります。

Tailwind CSS は、ユーティリティファースト CSS フレームワークと呼ばれます。ここでは、ユーティリティ CSS クラスを HTML ファイルに直接記述することで、あらゆるタイプのデザインを作成できます。 Tailwind CSS を使用するには、HTML ファイルの外部で多くのことを行う必要はありません。非常に高速で、柔軟性があり、信頼性が高いです。 Tailwind CSS は基本的に多くのユーティリティ CSS クラスで構成されているため、開発時には CSS ファイルのサイズが大きくても、実稼働用にビルドされるときは、HTML ファイルで使用される CSS クラスのスタイルのみが生成されるため、非常に便利な機能が得られます。小さなCSSファイル。冗長または重複する CSS はありません。

Tailwind CSS の仕組み:

Tailwind CSS は基本的に、HTML ファイル、JavaScript コンポーネント、またはあらゆるタイプのテンプレート ファイルから CSS クラス名をスキャンし、スキャンした CSS のスタイルを生成し、HTML ファイルの先頭セクションである静的 CSS ファイルを提供します。電話をかける。

Tailwind CSS のインストール手順:

Tailwind CSS はいくつかの方法でプロジェクトにインストールできます。例: Tailwind は CLI、PostCSS および CDN を使用します。 CDN は使いやすいと思うかもしれませんが、ここでの最大の問題は、Tailwind の構成およびカスタマイズ機能が利用できないことです。ここでは、Tailwind CLI

を使用してプロジェクトに Tailwind CSS をインストールする方法を説明します。

ステップ-1:
まず、プロジェクトでノードを初期化する必要があります (マシンには Node.js バージョン 12.13.0 以降のバージョンがインストールされている必要があります)。プロジェクトフォルダーを作成し、プロジェクトフォルダー内でターミナルを開き、以下のコマンドを入力してEnterボタンを押します。

npm init -y

ステップ-2:
次に、Tailwind CSS を開発依存関係としてインストールする必要があります。このためには、ターミナルに次のコマンドを入力し、Enter ボタンを押します。

npm install -D tailwindcss

ステップ-3:
次に、tailwind CSS のすべての設定を含む tailwind.config.js ファイルを作成します。このためには、ターミナルに次のコマンドを入力し、Enter ボタンを押します。

npx tailwindcss init

ステップ-4:
tailwind.config.js ファイルのコンテンツ配列に、Tailwind CSS ユーティリティがスキャンするすべてのテンプレート拡張子を書き込みます。これは、ファイル内で tailwind CSS のサポートが必要であることを意味します。例: ここでは HTML ファイルに tailwind CSS のみを記述します。そのため、ここではコンテンツ配列に .html を記述しています。

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

ステップ-5:
ここで 2 つのフォルダーを作成します。フォルダーにそれぞれ src と dist という名前を付けました。 input.css という名前の CSS ファイル (任意の名前) を src フォルダーに作成し、output.css (任意の名前) という名前の CSS ファイルを dist フォルダーに作成します。 input.css ファイルは基本的に Tailwind 自体によって使用され、Tailwind CSS のすべてのディレクティブが含まれます。これらのディレクティブを通じて、Tailwind CSS のベース、コンポーネント、およびユーティリティ CSS が呼び出されます。 input.css ファイルに次のコードを記述する必要があります。

/* 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 এক্সটেনশন।

実用性第一の基本:

前に述べたように、Tailwind CSS は、多くのユーティリティ CSS クラスで構成される CSS フレームワークです。ユーティリティ機能の結びつきは、基本的に Tailwind CSS を他のすべての CSS フレームワークとは区別します。 Bootstrap と同様に、CSS フレームワークは完全なコンポーネントを提供しますが、Tailwind CSS フレームワークはそのような完全なコンポーネントを提供しません。 Bootstrap コンポーネントでは、マージン、パディング、幅、高さ、フォント サイズ、色がすでに指定されており、そのコンポーネントの HTML マークアップを HTML ファイルに入れるだけで、美しいカード コンポーネントが得られます。一方、Tailwind CSS は、マージンやパディングなどの低レベル CSS で作成された多数のユーティリティ クラスを提供しており、これらを使用して自由にデザインできます。

バニラ CSS を使用してデザインを作成したい場合は、意味のあるクラス名をたくさん記述することと、それらの名前を保持して CSS ファイルを 1 行ずつ記述することの 2 つのことを行う必要があります。この場合、クラスの意味のある名前を見つけるのに時間が無駄になるだけでなく、CSS も自分で書かなければならず、場合によってはコードの重複の問題も発生します。

一方、ユーティリティ CSS を使用する場合は、クラス名について考える必要はなくなり、Tailwind のユーティリティ クラスを呼び出すだけで済みます。これほど多くのユーティリティ クラスをどうやって覚えるのかと思うかもしれませんが、何も覚える必要はありません。Tailwind のほとんどすべてのユーティリティ クラスは宣言型であり、Tailwind 独自のインテリジェンス サポートがコード エディターにある場合は、これについて心配する必要はありません。数日間定期的に練習すれば、すべてをコントロールできるようになります。知っておくべきもう 1 つの重要な点は、Tailwind CSS はすべて rem 単位で計算されることです。つまり、p-6 はパディング 1.5rem を意味します。例を見てみましょう:

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

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

以上が初心者向けのベンガル語の Tailwind CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。