در مقالات قبلی وب سایت صعود به طور کلی و جامع در رابطه با CSS و کاربرد آن در ساخت صفحات وب صحبت کردیم در این مطلب می خواهیم در رابطه با اولین فریم ورک ارائه شده برای زبان CSS یعنی Tailwind CSS توضیح دهیم، و به بررسی نکات مهم این فریم ورک یعنی Tailwind CSS بپردازیم. پس اگر می خواهید در رابطه با موضوع Tailwind CSS چیست ؟ همه چیز درباره تیلویند سی اس اس اطلاعات با ارزشی کسب کنید در این مطلب ما را همراهی کنید. پیشنهاد کارشناسان گروه آموزش برنامه نویسی صعود این است که حتما قبل از خواندن این مقاله، مقالات CSS چیست؟ آشنایی با زبان سی اس اس و بهترین کتاب های آموزشی زبان HTML/CSS در جهان را مطالعه کنید.

Tailwind CSS چیست ؟ همه چیز درباره تیلوند سی اس اس

Tailwind CSS چیست ؟ همه چیز درباره تیلویند سی اس اس

Tailwind CSS چیست؟

Tailwind اولین فریم ورک CSS است. برخلاف سایر فریم ورک های CSS مانند: Bootstrap یا Materialize CSS، اجزای از پیش تعریف‌شده ندارد. در عوض Tailwind CSS در سطح پایین‌تری عمل می‌کند و مجموعه‌ای از کلاس‌های کمکی CSS را در اختیار شما قرار می‌دهد. با استفاده از این کلاس ها می توانید به سرعت طراحی سفارشی را با سهولت و آسانی ایجاد کنید. Tailwind CSS مورد نظر نیست و اجازه دهید شما طراحی منحصر به فرد خود را ایجاد کنید.

از Tailwind CSS می توان برای ساخت وب سایت ها به سریع ترین و ساده ترین راه استفاده کرد.

Tailwind CSS اساساً یک فریم ورک CSS کاربردی برای ساخت سریع رابط های کاربری سفارشی است. تیلویند سی اس اس یک فریم ورک CSS بسیار قابل تنظیم و سطح پایین است که تمام بلوک‌های ساختمانی مورد نیاز برای ساخت طرح‌های سفارشی را در اختیار شما قرار می‌دهد، بدون اینکه سبک‌های آزاردهنده‌ای که باید برای نادیده گرفتن آنها بجنگید.

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

Tailwind CSS چیست ؟ همه چیز درباره تیلوند سی اس اس

چرا Tailwind CSS ؟

1- فرآیند ساخت UI سریعتر

2- Tailwind CSS یک فریم ورک CSS اولین ابزار است که به این معنی است که می‌توانیم از کلاس‌های ابزار برای ساختن طرح‌های سفارشی بدون نوشتن CSS مانند رویکرد سنتی استفاده کنیم.

مزایا و معایب Tailwind CSS

مزایای Tailwind CSS :

  • دیگر نام احمقانه ای برای کلاس های CSS و شناسه ها وجود ندارد.
  • حداقل خطوط کد در فایل CSS.
  • ما می توانیم طرح ها را برای ساخت اجزا سفارشی کنیم.
  • وب سایت را ریسپانسیو می کند.
  • تغییرات را به روش دلخواه انجام می دهد.

 

CSS ماهیت جهانی دارد و در صورت ایجاد تغییرات در فایل، ویژگی در تمام فایل‌های HTML مرتبط با آن تغییر می‌کند. اما با کمک Tailwind CSS می‌توانیم از کلاس‌های کاربردی استفاده کنیم و تغییرات محلی ایجاد کنیم.

معایب Tailwind CSS :

HTML -1 پرمخاطب می شود(سنگین می شود): همانطور که ما در حال پیاده سازی tailwind در خود صحفه ی HTML خودمان هستیم، نشانه گذاری سنگین تر می شود.

2- کامپوننت‌ها به‌طور پیش‌فرض ارائه نمی‌شوند: از آنجایی که tailwind CSS دکمه‌ها، نوارهای پیمایش را ارائه نمی‌کند، باید همه چیز را از ابتدا پیاده‌سازی کنیم.

3- منحنی یادگیری کوچک: اگرچه با CSS آشنایی دارید، اما باید کلاس های از پیش تعریف شده مورد استفاده در tailwind CSS را بشناسید.

Tailwind CSS چیست ؟ همه چیز درباره تیلوند سی اس اس

مرورگرهای پشتیبانی کننده از Tailwind CSS

مرورگر هایی که از Tailwind CSS  پشتیبانی میکنند به شرح زیر هستند:

  • گوگل کروم
  • مایکروسافت اج
  • فایرفاکس
  • سافاری
  • روش نصب

 

استفاده از Tailwind از طریق CDN

<!-- add it to the head section of the html file -->

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"

            rel="stylesheet">

 

اما هنگام استفاده از CDN محدودیت هایی وجود دارد. بعضی از آنها موارد زیر هستند:

  • سفارشی کردن تم پیش‌فرض Tailwind قابل استفاده نیست.
  • دستورالعمل‌هایی مانند apply@، @variants و غیره قابل استفاده نیستند.
  • نمی توان افزونه های شخص ثالث را نصب کرد.

 

در این مطلب کارشناسان گروه آموزش برنامه نویسی صعود به تحلیل و بررسی فریم ورک Tailwind CSS پرداختند که شامل تعریف Tailwind CSS، کاربرد Tailwind CSS، دلیل استفاده از Tailwind CSS و مزایا و معایب Tailwind CSS می شود. در رابطه با موضوع Tailwind CSS چیست ؟ همه چیز درباره تیلویند سی اس اس پیشنهاد میکنیم تا مقالات معرفی چند نمونه از بهترین کد ویرایشگر ها و کد ادیتور ها برای زبان CSS و Hover چیست؟ آموزش هاور در Css همچنین می توانید سوالات خود را در رابطه با Tailwind CSS از قسمت نظرات با کارشناسان گروه آموزش برنامه نویسی صعود در میان بگذارید. در صورت تمایل می توانید صعود را در شبکه های اجتماعی اینستاگرام و تلگرام دنبال کنید.