對於我們這些從事網頁設計行業或正在考慮進入CSS框架的人來說，Bootstrap可能是CSS框架的起點，因為它對於初學者來說非常容易上手，並且在我們的需求量很大國家。但多年來我們經常聽到（可以說是趨勢）的一個 CSS 框架是 Tailwind CSS。對於使用或開始使用各種 JavaScript 函式庫、React、Vue 等框架的人來說，Tailwind CSS 這個名字非常熟悉。即使在今天，Tailwind CSS 仍然是最受歡迎的 CSS 框架。今天我會嘗試把Tailwind CSS寫的很簡單，讓新手也能很輕鬆的上手Tailwind CSS。
Tailwind CSS 稱為實用優先的 CSS 框架。在這裡，您可以透過直接在 HTML 檔案中編寫實用 CSS 類別來建立所有類型的設計。使用 Tailwind CSS 不需要您在 HTML 檔案之外做太多事情。它非常快速、靈活且可靠。 Tailwind CSS 基本上是由許多實用CSS 類別組成的，因此即使CSS 檔案在開發時很大，但當它為生產而建構時，它只會為HTML 檔案中使用的CSS 類別產生那些樣式，這給了我們一個非常好的解決方案。小 CSS 文件。沒有多餘或重複的 CSS。
Tailwind CSS 基本上會掃描任何HTML 檔案、JavaScript 元件或任何類型的範本檔案中的CSS 類別名稱，然後為掃描的CSS 產生樣式，並為我們提供一個靜態CSS 文件，它是HTML 檔案的頭部部分。打電話。
我們可以透過多種方式在專案中安裝 Tailwind CSS。例如，Tailwind 使用 CLI、使用 PostCSS 並使用 CDN。您可能認為 CDN 很容易使用，但這裡最大的問題是您沒有獲得 Tailwind 配置和自訂功能。這裡我將向您展示如何使用 Tailwind CLI 在專案中安裝 Tailwind CSS
第 1 步：
首先我們需要在專案中初始化node（您的機器必須安裝Node.js 12.13.0版本或更高版本）。建立專案資料夾並在專案資料夾中開啟終端，然後輸入以下命令並按 Enter 按鈕。
npm init -y
第 2 步：
現在我們需要安裝 Tailwind CSS 作為開發依賴項。為此，在終端機中輸入以下命令，然後按 Enter 按鈕。
npm install -D tailwindcss
第三步：
現在建立 tailwind.config.js 文件，其中包含 tailwind css 的所有配置。為此，在終端機中輸入以下命令，然後按 Enter 按鈕。
npx tailwindcss init
第四步：
在 tailwind.config.js 檔案的內容陣列中，寫入 Tailwind CSS 實用程式將掃描的所有範本擴充。這意味著我們希望文件中支援tailwind css。例如：我們只會在 html 檔案中寫入 tailwind css，因此這裡我們在 content 陣列中寫入 .html。
//tailwind.config.js file
module.exports = {
content: ["*.{html}"],
theme: {
extend: {},
},
plugins: [],
}
第 5 步：
現在建立 2 個資料夾。我分別將資料夾命名為 src 和 dist。在src資料夾中建立一個名為input.css（可以是任意名稱）的css文件，並在dist資料夾中建立一個名為output.css（可以是任意名稱）的css文件。 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 製成的實用類，例如 margin、padding，我們可以用它們來按照我們的意願進行設計。
如果我們想使用vanilla CSS進行設計，那麼我們必須做兩件事，那就是編寫許多有意義的類名，並透過保存這些名稱逐行編寫CSS CSS檔案。在這種情況下，我們浪費時間去尋找有意義的類別名稱，我們也必須自己寫 CSS，有時還會出現程式碼重複問題。
另一方面，如果我們使用實用 CSS，我們就不需要再考慮類別名，只需呼叫 Tailwind 的實用類別即可完成工作。你可能會想如何記住這麼多實用程式類，你不必記住任何東西，Tailwind 的幾乎所有實用程式類都是聲明性的，如果你的程式碼編輯器中有Tailwind 自己的智慧支持，你就不必擔心這一點。如果你經常練習幾天，一切都會在你的掌控之中。另外要知道的是，Tailwind CSS 都是以 rem 為單位計算的，即 p-6 表示 padding-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>
উপড়ের সুন্দর কার্ড টা ডিজাইন করার জন্য কিন্তু আমাদের কোন সিএসএস লিখতে হয় নাই জাস্ট কিছু টেইলউইন্ড ইউটিলিটি ক্লাস ব্যবহার করা হয়েছে। লক্ষ করলে দেখবেন যে, এখানে ইউটিলিটি ক্লাসগুলো কতটা ডিক্লারেটিভ, যেমনঃ
এতক্ষণে হয়ত বুঝে গিয়েছেন কিভাবে টেইলউইন্ড ইউটিলিটি ক্লাসগুলো কাজ করে। টেইলউইন্ড সিএসএস এর খুবই সুন্দর একটা ডকুমেন্টেশন আছে এবং সার্চ ফিচার টাও অনেক দুর্দান্ত কাজ করে, আপনার যা প্রয়োজন জাস্ট সার্চ বক্স এ লিখুন রেজাল্ট চলে আসবে চোখের পলকে।
এতক্ষণে হয়ত আপনার মনে প্রশ্ন জেগেছে যে, টেইলউইন্ড সিএসএস এর মাধ্যমে আমরা কিভাবে বিভিন্ন ধরনের স্টেট ম্যানেজ করতে পারি। এটার ও একটা খুব ভালো সমাধান আছে। যেকোনো ইউটিলিটি ক্লাসের সামনে আমাদেরকে জাস্ট মডিফায়ার লিখতে হবে। নিম্নের উদাহরণ তা দেখলেই বুঝতে পারবেন।
<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中文網其他相關文章！
