آموزش تیلویند tailwind مقدماتی تا پیشرفته

امروزه طراحان در دقت و سرعت بسیار پیشرفت کرده‌اند؛ زیرا این دو پارامتر در طراحی به دو جنبه مهم و اصلی تبدیل شده است. همان طور که می‌دانیم تا به امروز کارایی سایت‌ها و استفاده مردن از آن بیشتر از قبل شده است، این امر باعث شده است که طراحان سایت نیز با این موج خود را همراه کنند. استفاده از انواع فریم‌ورک به طراحان وب در سرعت بخشیدن و دقت بیشتر بالاتر سایت به درخواست‌های مشتری‌ها کمک شایانی می‌کند. یکی از این فریم‌ورک‌ها تیلویند می‌باشد. شما با آموزش تیلویند می‌توانید به راحتی از این فریم‌ورک استفاده کنید و دقت و سرعت سایت خود را بیش از پیش کنید.

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

تیلویند چیست؟

در صورتی که بخواهیم به زبان ساده تیلویند را به شما معرفی کنیم، بهتر است به این صورت شروع کنیم که تیلویند که به لاتین به آن Tailwind گفته می‌شود در چهارچوب نرم افزاری متن باز برای سی اس اس با روش Utility–First می‌باشد. یکی از اصلی‌ترین ویژگی‌هایی که می‌توان برای این فریم‌ورک برای شما بیان کرد، این است که در آموزش تیلویند یک سری کلاس‌های پیش تعیین شده را برای المان‌های مختلفی اعم از منوها، دکمه‌ها، تکست باکس‌ها و... آماده نمی‌کند و به جای این لیست از کلاس‌های سی اس اس utility ایجاد می‌کند. این کلاس‌ها برای استایل دادن المان‌ها توسط طراحان مورد استفاده قرار می‌گیرد. این فریم‌ورک به راحتی با سرعت بسیار بالایی که دارد می‌توان سایت شما را به صورت مدرن طراحی کند.

آموزش نصب Tailwind

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

یکی از ساده‌ترین و سریع‌ترین راه‌هایی که شما می‌توانید این فریم‌ورک را راه اندازی و نصب کنید است که از ابزار Tailwind CLI استفاده کنید. شما باید cmd را در ویندوز و یا برنامه command brew را در مک باز کنید و کدهای زیر را به ترتیب بر آن‌ها وارد کنید:

npm install -D tailwindcss

npx tailwindcss init

تمامی فایل‌های نصب شده‌اند را باید در یک پوشه انتقال دهید، بعد از این عمل باید با یک ادیتور مناسب پوشه را باز کنید و تغییرات زیر را بر روی آن‌ها اعمال کنید. این مسیرها را باید در قالب خود در فایل tailwind.config.js اضافه کنید. به مثال زیر دقت کنید تا متوجه این عمل شوید:

/** @type {import(‘tailwindcss’).Config} */

module.exports = {

content: [“./src/**/*.{html,js}”],

theme: {

extend: {},

},

plugins: [],

}

بعد از این کار شما باید یک پوشه src بسازید و فایل‌های پیش نیاز سایت خود را در آن درج کنید. بعد از آن باید دستورات tailwind را بر هر کدام از لایه‌های تیلویند به فایل CSS خود اضافه کنید. در پوشه  src/css/master.css

@tailwind base;

@tailwind components;

@tailwind utilities;

حال نوبت آن است که فرایند ساخت Tailwind CLI را شروع کنید. در این مرحله شما باید ابزار CLI را بر روی ویندوز خود اجرا کنید تا فایل‌های قالب شما را برای کلاس‌ها اسکن کند. کد زیر را در این مرحله وارد کنید:

npx tailwindcss -i ./src/css/master.css -o ./dist/output.css –watch

بعد از اجرا کردن این کد، یک پوشه به نام dist که حاوی output.css می‌باشد برای شما ایجاد می‌شود. در این حالت cmd شما در حالت watching باقی می‌ماند. برای طراحی سایت خود شما باید شروع به استفاده از تیلویند در قابل HTML خود کنید. شما باید فایل‌های سی اس اس کامپایل شده را به آن اضافه کنید و از کلاس‌های کاربردی تیلویند برای محتوای طراحی خود استفاده کنید.

آموزش تیلویند در کنترل روی استایل ‌دهی به المان‌ها

 هنگامی که در طراحی سایت با استفاده از تیلویند انجام شود. ممکن است شما به دنبال آموزش تیلویند برای چگونگی استایل دهی المان‌ها باشید. بهتر است بدانید که این عمل در تیلویند با استفاده از یک رویه منحصر به فرد صورت می‌گیرد. این فریم‌ورک برای استایل‌های خود از یک پیش فرض استفاده نمی‌کند و هیچ نوع شباهتی در این زمینه با بوت استرپ و یا دیگر فریم‌ورک‌ها ندارد. همین امیر نیز باعث شده است که طراحان بتوانند کنترل کاملی بر روی ظاهر المان‌ها داشته باشند. به عنوان مثال شما می‌توانید برای هر پروژه خود از ظاهرها و المان‌های مختلفی استفاده کنید. به زبان ساده‌تر فریم‌ورک تیلویند به شما هیچ استایلی را تحمیل نمی‌کند!

 آموزش تیلویند در پروسه استایل ‌دهی سریع‌تر

هنگامی که صحبت از استایل دهی به المان‌های HTML باشد هیچ نوع از فریم‌ورک‌ها نمی‌توانند به سرعت تیلویند برسد. نتیجه اصلی این عمل در حقیقت خروجی سریعی است که طراحان از المان‌های HTML به دست می‌آورند. در آموزش تیلویند این امر به شما آموزش داده می‌شود که این فریم‌ورک دارای هزاران استایل دهی آماده داخلی است که شما می‌توانید کار خود را بر روی آن با خاصیت class اعمال کنید.

 آموزش تیلویند در رسپانسیو بودن و امنیت بالا در زمان اجرا

شما می‌توانید تمامی استایل‌ها و المان‌هایی که در فریم‌ورک Tailwind وجود دارد را به صورت رسپانسیو شده مورد استفاده قرار دهید. همین امر نیز باعث شده است که آموزش تیلویند روزبه‌روز در حال افزایش می‌باشد؛ زیرا میزان رسپانسیو و Mobile-First آن بیشتر از دیگر فریم‌ورک‌های موجود است. از نظر امنیت نیز بهتر است به این نکته توجه داشته باشید این فریم‌ورک نسبت به دیگر رقیب‌های خود از مشکلات بسیار کمتری برخوردار می‌باشد و استایل‌های عجیبی را بر روی خود اعمال نکرده است.

پیش ‌نیازهای دوره آموزش تیلویند چیست؟

شما برای آن که بتوانید بیشترین استفاده را از آموزش تیلویند در بربگیرید، بهتر است قبل از آن با HTML و CSS به خوبی آشنایی داشته باشید. شما به راحتی می‌توانید در طی چند روز دوره‌های آموزشی این دو اصل فریم‌ورک تیلویند را در آکادمی کدیاد پشت سر بگذارید تا راحت‌تر با این فریم‌ورک بتوانید کار کنید.

سخن آخر

تیلویند در فریم‌ورک اصلی سی اس اس صورت می‌گیرد که برای اولین بار در سال 2019 منتشر شده است. نسخه 2.2 این فریم‌ورک ارائه شده است. آماری که به دست ما رسیده مبنی بر این موضوع می‌باشد که تا به امروز بیش از 260 هزار توسعه دهنده از این فریم‌ورک برای طراحی انواع سایت استفاده می‌کنند. یادکیری تیلویند به دلیل ویژگی‌های بسیاری که دارد می‌تواند برای بسیاری از طراحان سایت مفید واقع شود.