Tailwind: نمای کلی و راه اندازی – انجمن DEV

Tailwind چیست؟

Tailwind، که اغلب به عنوان Tailwind CSS شناخته می‌شود، «مجموعه‌ای از کلاس‌های کاربردی سطح پایین و قابل استفاده مجدد است که می‌تواند مانند بلوک‌های ساختمانی برای ایجاد هر طرحی که بتوانیم تصور کنیم، استفاده می‌شود. این چارچوب ابزار اول مهمترین ویژگی های CSS را پوشش می دهد» (گرچف، 2022). در دنیاهای دیگر، Tailwind تعداد زیادی کلاس، سبک، اجزا و طرح‌های CSS از پیش تعریف‌شده دارد که توسعه را آسان‌تر می‌کند.

بسیاری از شرکت‌های مختلف از Tailwind CSS از جمله Starbucks، Netflix و Github استفاده می‌کنند (Wolstenholme، 2019).

اکوسیستم Tailwind

آزمایشگاه های Tailwind خالقان اکوسیستم Tailwind هستند. در این اکوسیستم محصول اصلی، Tailwind CSS است. یک پلاگین vscode برای همراهی با Tailwind CSS به نام Tailwind CSS intellisense برای کمک به توسعه وجود دارد.

آزمایشگاه‌های Tailwind همچنین رابط کاربری ایجاد کرده‌اند و محصولاتی را طراحی کرده‌اند که از tailwind CSS استفاده و ساخته می‌شوند. این محصولات عبارتند از tailwind UI و headless UI. کامپوننت‌های Headless UI را می‌توان در React یا Vue ایجاد کرد و کامپوننت‌های Tailwind UI را می‌توان در React، Vue یا HTML ایجاد کرد، اما برخی از مؤلفه‌ها به استفاده از جاوا اسکریپت نیاز دارند (بنابراین React یا Vue) و اگر فقط با استفاده از HTML ایجاد شوند، به درستی کار نخواهند کرد. .

آزمایشگاه‌های Tailwind همچنین مجموعه‌ای از آیکون‌ها به نام Heroicons ایجاد کرده‌اند که منبع باز هستند و در اجزای رابط کاربری خود استفاده می‌شوند. آخرین اما نه کم‌اهمیت، آزمایشگاه‌های Tailwind همچنین کتابی به نام «Refactoring UI» نوشته‌اند که در آن طراحی یک رابط کاربری بصری دلپذیر و موارد دیگر بحث می‌کند.

همچنین سیستم‌های UI شخص ثالثی وجود دارند که از Tailwind CSS استفاده می‌کنند اما توسط آزمایشگاه‌های tailwind ایجاد نشده‌اند. یکی از برجسته ترین سیستم ها Daisy UI نام دارد.

چگونه کار می کند؟

اکنون که مروری بر tailwind و اکوسیستم آن را پوشش داده ایم، در واقع چگونه کار می کند؟ استفاده از کد Tailwind CSS چگونه به نظر می رسد؟

در بیشتر موارد، برای استایل دادن به اجزای خود نیازی به نوشتن کلاس های CSS خود ندارید، زیرا tailwind قبلاً آنها را برای شما ایجاد کرده است. این یک صرفه جویی در زمان بزرگ است.

به عنوان مثال. در خط اول کد، سه کلاس مختلف با نامگذاری یکسان برای ساخت کادر قرمز اضافه شده است. اینها همه کلاس های از پیش تعریف شده ای هستند که قبلاً در tailwind ایجاد شده اند. خط دوم کد دقیقاً از همان سبک‌ها استفاده می‌کند، به استثنای اینکه کادر را به جای قرمز آبی می‌کند، اما از کلاس‌های کاربردی tailwind استفاده نمی‌کند.

در بیشتر موارد، استایل‌های خط دوم باید به کلاسی اضافه شوند که در یک فایل CSS قرار داده شده و سپس آن کلاس می‌تواند به div اضافه شود. با استفاده از tailwind، شما هرگز مجبور نیستید برای ایجاد کلاس ها به فایل CSS بروید زیرا آنها قبلاً آنجا هستند! اگر می‌خواهید کلاس‌های CSS سفارشی ایجاد کنید، هنوز هم می‌توانید این کار را انجام دهید، اما در بیشتر موارد، نیازی به این کار نیست، که این کار را آسان و کارآمد می‌کند.

علاوه بر این، هنگام کدنویسی، می‌توانید از پلاگین Tailwind CSS IntelliSense برای درک آسان‌تر فرآیند استفاده کنید.

استفاده از Tailwind

دانستن اینکه tailwind قبلاً کلاس هایی را برای تقریباً هر کاری که نیاز دارید و تقریباً هر سبکی که نیاز به اعمال آن دارید ایجاد کرده است، یک سؤال را ایجاد می کند:

آیا قرار نیست تعداد زیادی کلاس CSS ایجاد شود که هرگز مورد استفاده قرار نگیرد؟
پاسخ مثبت است، اما این مشکلی نخواهد بود.

هنگامی که در حال کدنویسی هستید، به تمام کلاس‌های کاربردی tailwind دسترسی دارید، اما tailwind هوشمند است و کد شما را اسکن می‌کند و یک فایل CSS تولیدی ایجاد می‌کند که فقط شامل کلاس‌هایی است که استفاده می‌کنید، و از شر کلاس‌هایی که شما استفاده می‌کنید خلاص می‌شود. اینطور نیست، و باعث می شود فایل CSS شما در تولید بسیار کوچکتر شود.

شکایت در مورد Tailwind

در اینجا شکایتی است که برخی از Tailwind دارند. از مقاله متوسط: “چرا دوستان شما نمی توانند در مورد TailwindCSS سکوت کنند – و چرا هرگز این کار را نخواهند کرد” توسط خورخه زریک او می نویسد:

یکی از بزرگترین انتقادات به Tailwind، این واقعیت است که سبک های Tailwind قابل استفاده مجدد نیستند.
در حالی که با CSS سنتی می‌توانید تمام سبک‌ها را برای یک عنوان، از جمله اندازه، رنگ فونت و غیره، در یک کلاس ترکیب کنید، در Tailwind باید همه آنها را به صورت جداگانه بنویسید» (Zreik, 2022).

در مثال قبلی، کد جعبه قرمز div بسیار ساده بود. اما، هنگامی که استایل های بیشتری را به div اضافه می کنید، ناگهان کلاس های بیشتری وجود دارد و کد دیگر ساده به نظر نمی رسد. با CSS سنتی، می‌توانید همه این سبک‌ها را در یک کلاس واحد ترکیب کنید.

این موضوع پایان دنیا نیست، زیرا هنوز هم سریعتر و آسان تر است که div را با استفاده از سبک های Tailwind بسازید، به جای ساختن آنها به تنهایی، اما کد در حال حاضر کمتر قابل خواندن است.

مشکل واقعی هنگام ساخت جعبه قرمز دوم یا سوم ایجاد می شود. اکنون بیش از 10 کلاس از جعبه باید کپی شود تا آن را تکرار کنید. بعد از مدتی، این موضوع بسیار آزاردهنده خواهد شد.

جاوا اسکریپت قابل استفاده مجدد

در مورد اکوسیستم Tailwind و کلاس های CSS قابل استفاده مجدد صحبت های زیادی شده است، اما جاوا اسکریپت در اینجا کجا قرار می گیرد؟

از مقاله متوسط: “چرا دوستان شما نمی توانند در مورد TailwindCSS سکوت کنند – و چرا هرگز این کار را نخواهند کرد” توسط خورخه زریک او می نویسد:

اساساً، شما می توانید با استفاده مجدد از اجزای خود، استایل خود را قابل استفاده مجدد کنید. این همان کاری است که اکنون باید انجام دهید که بسیاری از افراد با ابزارهایی مانند React در حال ساخت هستند که در آن ماژولار کردن عملکرد در حال حاضر عادی است.

با مدولار کردن سبک‌های خود به‌عنوان مؤلفه‌ها و نه کلاس‌ها، از شر بسیاری از مشکلاتی که مردم در Tailwind می‌بینند خلاص می‌شوید» (Zreik، 2022).

برای تجزیه بیشتر این موضوع، عناصر رابط کاربری که قرار است دوباره استفاده شوند باید به عنوان اجزاء ساخته شوند. شما کد را یک بار در جاوا اسکریپت می نویسید و اکنون لازم نیست هر بار که می خواهید از یک عنصر UI استفاده مجدد کنید، یک میلیون کلاس ابزار Tailwind را کپی کنید. در نهایت، کد تولید ممکن است هنوز بسیار نامرتب به نظر برسد، اما زمانی که در واقع کدنویسی می‌کنید، از جاوا اسکریپت برای تزریق کد از اجزا به HTML خود استفاده می‌کنید و اکنون فرآیند توسعه بسیار تمیزتر است و شکایت از بخش قبل بسیار جزئی‌تر است. .

راه اندازی Tailwind

همانطور که در اسناد نصب Tailwind CSS توضیح داده شده است، (Tailwind، nd) در اینجا مراحل نصب و راه اندازی Tailwind CSS با استفاده از خط فرمان آمده است.

مرحله 1: Tailwind CSS را نصب کنید

زمانی که در فهرست پروژه خود هستید، این دستورات را در ترمینال وارد کنید

npm install -D tailwindcss
npx tailwindcss init

مرحله 2: Tailwind CSS را پیکربندی کنید

پس از اجرای دستورات مرحله 1، باید یک فایل “tailwind.config.js” را در پوشه پروژه خود مشاهده کنید.

از داخل فایل “tailwind.config.js”، می خواهید کد زیر را اضافه کنید:
./src/**/*.{html,js}

مرحله 3a: پوشه پروژه “src” و فایل CSS را ایجاد کنید

پس از تنظیم فایل پیکربندی Tailwind، باید یک پوشه ‘src’ ایجاد شود.
از داخل پوشه SRC، یک فایل CSS به نام “input.css” باید ایجاد شود.

مرحله 3b: Tailwind را به فایل CSS اضافه کنید

از داخل فایل ‘input.css’، کد زیر را قرار دهید:
@tailwind base;
@tailwind components;
@tailwind utilities;

مرحله 4: ساخت فایل خروجی Tailwind CSS خود را شروع کنید

از دستور استفاده کنید npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch تا فایل خروجی CSS خود را بسازید

این دستور یک فایل ‘output.css’ ایجاد می کند که با استفاده از کلاس های Tailwind در پروژه خود به روز می شود.

مرحله 5a: یک فایل html ایجاد کنید

در پوشه ‘src’ پروژه های خود، یک فایل ‘index.html’ ایجاد کنید.

مرحله 5b: شیوه نامه را به سند html خود اضافه کنید

اضافه کردن <link href="https://dev.to/dist/output.css" rel="stylesheet"> به اسناد html شما

.

کد کار

در زیر یک اسکرین شات از یک صفحه لاگین است که کاملاً با کلاس‌های کاربردی Tailwind CSS و همچنین HTML مورد استفاده برای ایجاد صفحه طراحی شده است.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://dev.to/dist/output.css" rel="stylesheet">
    <title>Login</title>
</head>
<body class="flex items-center justify-center h-screen">
    <div class="bg-slate-100 max-w-md rounded-md p-5">
        <h1 class="text-3xl font-bold mb-7 text-center">Sign In</h1>
        <label for="email">Email</label>
        <input class=" mt-1 w-full mb-4 p-4 rounded-md h-9 bg-white border border-gray-200 focus:outline-blue-500" type="text" id="email" placeholder="Enter your email">
        <label for="password">Password</label>
        <input class="mt-1 w-full mb-9 p-4 rounded-md h-9 bg-white border border-gray-200 focus:outline-blue-500" type="password" id="password" placeholder="Enter your password">
        <button class="w-full bg-blue-400 h-10 rounded-md font-medium hover:bg-blue-500 active:bg-blue-400">Login</button>
        <p class="w-full text-center my-4 text-slate-500">or</p>
        <button class="w-full bg-slate-200 h-10 rounded-md font-medium hover:bg-slate-400 active:bg-slate-300">Login with Google</button>
        <button class="w-full bg-slate-200 h-10 rounded-md font-medium hover:bg-slate-400 active:bg-slate-300 mt-2">Login with Facebook</button>

        <div class="flex justify-between mt-2">
            <p class="text-blue-500 hover:cursor-pointer hover:text-blue-600">Sign Up</p>
            <p class="text-right text-slate-400 hover:text-slate-700 hover:cursor-pointer">Forgot password?</p>
        </div>
    </div>
</body>
</html>

منابع

DaisyUI. (دوم). چارچوب CSS مینیمالیستی. بازیابی شده در 31 مارس 2023، از https://daisyui.com/

گرچف، I. (2022). Tailwind CSS. سایت پوینت. شابک 1098140990, 9781098140991.

آکادمی اکتبر. (20 دسامبر 2022). Tailwind CSS 3 Crash Course – Tailwind CSS for Beginners 2023 [Video]. یوتیوب. https://www.youtube.com/watch?v=6i9Xf5G5_x8

React Bootstrap. (دوم). معرفی. بازیابی شده در 30 مارس 2023، از https://react-bootstrap.github.io/getting-started/introduction/

آزمایشگاه‌های Tailwind. (دوم). GitHub. بازیابی شده در 30 مارس 2023، از https://github.com/tailwindlabs

آزمایشگاه‌های Tailwind. (دوم). رابط کاربری بدون سر بازیابی شده در 30 مارس 2023، از https://headlessui.com/

آزمایشگاه‌های Tailwind. (دوم). قهرمانان. بازیابی شده در 30 مارس 2023، از https://heroicons.com/

آزمایشگاه‌های Tailwind. (دوم). Tailwind CSS. بازیابی شده در 30 مارس 2023، از https://tailwindcss.com/

آزمایشگاه‌های Tailwind. (دوم). مستندات Tailwind CSS – نصب. بازیابی شده در 30 مارس 2023، از https://tailwindcss.com/docs/installation

آزمایشگاه‌های Tailwind. (دوم). Tailwind UI. بازیابی شده در 30 مارس 2023، از https://tailwindui.com/

Wolstenholme، P. (2019، 14 مارس). شرکت هایی که از Utility-First CSS در تولید استفاده می کنند. متوسط. https://philwolstenholme.medium.com/companies-using-utility-first-css-in-production-c9b9c2568046

Zreik، G. (2022، 1 نوامبر). چرا دوستان شما نمی توانند در مورد TailwindCSS سکوت کنند (و چرا هرگز نمی توانند). متوسط. https://medium.com/vivid-dev/why-your-friends-cant-shut-up-about-tailwindcss-and-why-they-never-will-d4a5d88326d8