Tailwind CSS en bengali pour les débutants-tutoriel CSS-php.cn

Pour ceux d'entre nous qui sont dans le secteur de la conception Web ou qui envisagent d'entrer dans le framework CSS, Bootstrap peut être le point de départ des frameworks CSS, car il est très facile pour les débutants de démarrer et est très demandé dans notre pays. Mais un framework CSS dont nous entendons beaucoup parler (on peut dire tendance) depuis plusieurs années est Tailwind CSS. Et pour ceux qui travaillent ou ont commencé avec diverses bibliothèques JavaScript, des frameworks comme React, Vue etc., le nom Tailwind CSS est très familier. Même aujourd'hui, Tailwind CSS est le framework CSS le plus populaire. Aujourd'hui, je vais essayer d'écrire sur Tailwind CSS d'une manière très simple, afin que les débutants puissent démarrer Tailwind CSS très facilement.

Tailwind CSS en bref :

Tailwind CSS est appelé un framework CSS axé sur les utilitaires. Ici, vous pouvez créer tous les types de conceptions en écrivant des classes CSS utilitaires directement dans des fichiers HTML. L'utilisation de Tailwind CSS ne nécessite pas de faire grand-chose en dehors du fichier HTML. C’est très rapide, flexible et fiable. Tailwind CSS est essentiellement composé de nombreuses classes CSS utilitaires. Ainsi, même si la taille du fichier CSS est importante au moment du développement, lorsqu'il est construit pour la production, il génère uniquement les styles des classes CSS utilisées dans le fichier HTML, ce qui nous donne un très bon aperçu. petit fichier CSS. où il n'y a pas de CSS redondant ou en double.

Comment fonctionne Tailwind CSS :

Tailwind CSS analyse essentiellement les noms de classe CSS à partir de n'importe quel fichier HTML, composant JavaScript ou tout type de fichier modèle, puis génère les styles pour le CSS analysé et nous donne un fichier CSS statique qui est la section principale du fichier HTML. appeler .

Étapes d'installation du CSS Tailwind :

Nous pouvons installer Tailwind CSS dans un projet de plusieurs manières. Par exemple : Tailwind utilise CLI, utilise PostCSS et utilise CDN. Vous pensez peut-être que CDN est facile à utiliser, mais le plus gros problème ici est que vous ne bénéficiez pas des fonctionnalités de configuration et de personnalisation de Tailwind. Ici, je vais vous montrer comment installer Tailwind CSS dans un projet à l'aide de Tailwind CLI

Étape 1 :
Nous devons d’abord initialiser le nœud (votre machine doit avoir la version 12.13.0 ou supérieure de Node.js installée) dans notre projet. Créez le dossier du projet et ouvrez le terminal dans le dossier du projet, tapez la commande ci-dessous et appuyez sur le bouton Entrée.

npm init -y

Étape 2 :
Nous devons maintenant installer Tailwind CSS en tant que dépendance de développement. Pour cela, tapez la commande suivante dans le terminal et appuyez sur le bouton Entrée.

npm install -D tailwindcss

Copier après la connexion

Étape 3 :
Créez maintenant le fichier tailwind.config.js qui contient toute la configuration du CSS tailwind. Pour cela, tapez la commande suivante dans le terminal et appuyez sur le bouton Entrée.

npx tailwindcss init

Copier après la connexion

Étape 4 :
Dans le tableau de contenu du fichier tailwind.config.js, écrivez toutes les extensions de modèle à partir desquelles l'utilitaire CSS Tailwind analysera. Cela signifie que nous voulons la prise en charge du CSS tailwind dans le fichier. Par exemple : nous n'écrirons ici que le CSS tailwind dans le fichier html, donc ici nous écrivons .html dans le tableau de contenu.

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

Copier après la connexion

Étape 5 :
Créez maintenant 2 dossiers. J'ai nommé respectivement les dossiers src et dist. Créez un fichier CSS nommé input.css (peut être n'importe quel nom) dans le dossier src et créez un fichier CSS nommé output.css (peut être n'importe quel nom) dans le dossier dist. Le fichier input.css sera essentiellement utilisé par Tailwind lui-même, qui contiendra toutes les directives de Tailwind CSS. Grâce à ces directives, la base, les composants et les utilitaires CSS de Tailwind CSS seront appelés. Dans le fichier input.css, nous devons écrire le code suivant.

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

Copier après la connexion

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

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

Copier après la connexion

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

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

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

Copier après la connexion

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

npm run build

Copier après la connexion

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

Principes fondamentaux axés sur l'utilité :

Comme je l'ai mentionné plus tôt, Tailwind CSS est un framework CSS composé de nombreuses classes CSS utilitaires. Le lien entre les fonctionnalités utilitaires distingue essentiellement Tailwind CSS de tous les autres frameworks CSS. Comme le framework CSS Bootstrap nous donne un composant complet alors que le framework CSS Tailwind ne nous donne pas un composant aussi complet. Dans un composant Bootstrap, la marge, le remplissage, la largeur, la hauteur, la taille de la police et la couleur sont déjà spécifiés, nous mettons simplement le balisage HTML de ce composant dans notre fichier HTML et obtenons un magnifique composant de carte. D'autre part, Tailwind CSS nous fournit de nombreuses classes utilitaires constituées de CSS de bas niveau comme margin, padding, que nous pouvons utiliser pour concevoir comme nous le souhaitons.

Si nous voulons créer un design en utilisant Vanilla CSS, alors nous devons faire 2 choses, c'est-à-dire écrire de nombreux noms de classes significatifs et écrire un fichier CSS ligne par ligne en conservant ces noms. Dans ce cas, nous perdons du temps à trouver le nom significatif de notre classe et nous devons également écrire le CSS par nous-mêmes et parfois le problème de duplication de code survient également.

D'un autre côté, si nous utilisons l'utilitaire CSS, nous n'avons plus besoin de penser aux noms de classes, il suffit d'appeler les classes utilitaires de Tailwind pour faire le travail. Vous pensez peut-être comment mémoriser autant de classes utilitaires, vous n'avez besoin de vous souvenir de rien, presque toutes les classes utilitaires de Tailwind sont déclaratives et si le propre support d'intelligence de Tailwind est dans votre éditeur de code, vous n'avez pas à vous en soucier. Si vous pratiquez régulièrement pendant quelques jours, tout sera sous votre contrôle. Une autre chose importante à savoir est que Tailwind CSS est entièrement calculé en unités rem, c'est-à-dire que p-6 signifie padding-1,5rem. Regardons un exemple :
একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস

<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>

Copier après la connexion

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

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>

Copier après la connexion

এখানে স্বাভাবিক ভাবে বাটন ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে 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="...">

Copier après la connexion

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

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

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

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

Copier après la connexion

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

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

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

Copier après la connexion

আপনি যদি কাস্টম বাটন ব্যবহার করে ডার্ক এবং লাইট মোড 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>

Copier après la connexion

ইউটিলিটি ক্লাস এর ডুপ্লিকেশন সমস্যা সমাধানের জন্য টেইলউইন্ড সিএসএস আমাদের সুন্দর একটা প্রসেস দিয়েছে। 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;
  }
}

Copier après la connexion

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!