فریمورک Tailwind CSS و هرچیزی که باید درموردش بدونیم! + مزایا و معایب تیلویند !

همین ابتدا صادقانه بگم : اگه از فریمورک Tailwind CSS استفاده کنید، دیگه نمیتونید کنار بزاریدش 🙂 تیلویند انقدر فوق العادس که اگه باهاش آشنا بشید، دنیای بدون Tailwind css رو نمیتونید تصور کنید !! با فِرانت اِندی همراه باشید تا فریمورک Tailwind CSS رو جامع و تخصصی بررسی کنیم و ببینیم Tailwind CSS چیست … 🙂

فریمورک Tailwind CSS چیست ؟

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

دیگه نیازی نیست مثل قدیم یک فایل CSS بسازیم و استایل های CSS بنویسیم! فقط کافیه از اسم کلاس های آماده ای استفاده کنیم که خود Tailwind CSS در اختیار ما میزاره!

بر خلاف اکثر فریمورک های CSS که کامپوننت های آماده و از پیش ساخته شده در اختیار ما میزاشتن، Tailwind هیچ کامپوننت آماده ای به ما نمیده!

صرفا یکسری کلاس ( class ) در اختیار ما میزاره تا ما با استفاده از این کلاس ها بتونیم به صفحات خودمون استایل بدیم.

با این روش دیگه نیازی به ایجاد فایل های css هم نداریم!

تو تیکه کد های زیر، ما به دکمه ی خودمون به 2 روش استایل CSS دادیم :

استایل با فریمورک Tailwind CSS

( به کمک تیلویند )

				
					<button class="bg-blue-400 p-4 text-white">
    من یه دکمه ی الکی ام
</button>

استایل با CSS خام

( بدون تیلویند )

				
					.btn {
    background-color: blue;
    color: white;
    padding: 1rem;
}

اگه به تیکه کد سمت راست نگاه کنیم، میبینیم که دیگه از استایل های خام CSS برای استایل دادن به button خودمون استفاده نکردیم! صرفا از یکسری class های آماده استفاده کردیم. اما خروجی هر 2 تیکه کد یکسانه !!!

این کلاس ها ( class ) دقیقا همون کلاس های Tailwind css هستن که میتونیم ازشون برای استایل دهی صفحات خودمون استفاده کنیم.

اما اگه بخوایم دقیقا استایل های تیکه کد های بالارو در حالت CSS خام و Tailwind CSS مقایسه کنیم، میتونیم به زیر نگاهی کنیم:

Tailwind CSS

				
					bg-blue-400

CSS

				
					background-color: blue;

Tailwind CSS

p-4

CSS

				
					padding : 1rem;

Tailwind CSS

				
					text-white

CSS

				
					color: white ;

بخش های قرمز رنگ CSS خام هستن و بخش های سبز رنگ Tailwind CSS هستن. تا اینجای کار فقط یه اشاره کلی به تیلویند سی اس اس کردیم، بریم یکم جزئی تر Tailwind CSS رو بررسی کنیم 🙂

همچنین میتونید از آموزش Tailwind CSS رایگان استفاده کنید :

61%تخفیف

آموزش تیلویند - آموزش Tailwind - آموزش Tailwind CSS - آموزش رایگان Tailwind - آموزش رایگان تیلویند

آموزش Tailwind CSS به زبان ساده! ( عملی و پروژه محور )

4.83 6 رای

490,000 190,000 تومان

فریمورک Tailwind CSS رایگانه ؟!

بله 🙂 Tailwind CSS کاملا رایگان و Open Source هست !

حتی ما میتونیم با مراجعه به Tailwind CSS Github تو توسعه این کتابخونه مشارکت داشته باشیم! ( در حال حاضر 273 نفر در توسعه این فریمورک مشارکت داشتن )

طراحی آسون تر با Tailwind CSS در فرانت اند !

اگه از فریمورک Tailwind CSS استفاده کنیم، مزایای زیر رو برامون داره :

استایل های پروژه خودمون رو بر اساس یک استاندارد و چارچوب مشخص جلو میبریم ( تو پروژه های تیمی خیلی سرعت توسعه رو بالا میبره )
دسترسی به بیش از 4394 رنگ، margin , padding , z-index و ..
عدم استفاده از استایل های بلا استفاده ( بر خلاف سایر فریمورک های CSS که اهمیتی نمیدن که به یک استایل مشخص نیازی دارید یا خیر، درهرصورت اون استایل رو به پروژتون اضافه میکنن تا اگه نیاز داشتید ازش استفاده کنید )
افزایش چشمگیر سرعت توسعه پروژه ( سرعت استایل دهی )
کاهش حجم استایل های پروژه ( کاهش حجم فایل های css. پروژه )

حالا که بحث مقایسه Tailwind CSS و سایر فریمورک های CSS پیش اومد، بیاید فریمورک تیلویند رو با یکی از محبوب ترین CSS Freamwork ها مقایسه کنیم ..

مقایسه Tailwind CSS و Bootstrap ( کدوم بهتره ؟ )

میتونیم مقایسه رو اینطور شروع کنیم که فریمورک Tailwind CSS یک utility-first CSS Freamwork هست اما بوت استرپ ( Bootstrap ) از کامپوننت های آماده که در توسعه فِرانت اِند به ما کمک میکنن، تشکیل شده.

بزارید واضح تر بگیم :

مقایسه Tailwind CSS و Bootstrap مثل مقایسه خیار و پراید هست! ( چون اصلا کاربری یکسانی ندارن )

درواقع بوت استرپ از ده ها کامپوننت آماده تشکیل شده که این کامپوننت ها به کمک CSS و JS آماده شدن اما Tailwind CSS هیچ کامپوننت آماده ای نداره و صرفا یکسری کلاس ( class ) در اختیار ما میزاره تا سرعت توسعه و استایل دهی ما بیشتر بشه.

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

در واقع بوت استرپ کاری نداره که از کدوم Component این فریمورک میخواید استفاده کنید، همون اول کار همه کامپوننت هارو به پروژه شما اضافه میکنه.

اما در مقایسه تیلویند و بوت استرپ میشه گفت که هر دو قابل شخصی سازی ( Customize ) هستن.

درنهایت همیشه سعی کنید انتخاب اولتون Tailwind CSS باشه و سراغ فریمورک هایی که کامپوننت آماده در اختیارتون میزارن، نرید.

اما در جریان باشید که میشه تیلویند رو در کنار سایر Css Freamwork ها مثل کتابخانه Material UI استفاده کرد!

چه شرکت ها و کمپانی هایی از فریمورک Tailwind CSS استفاده میکنن ؟!

از اونجاییکه فریمورک تیلویند سی اس اس بشدت محبوب و فوق العادس، شرکت های خیلی بزرگ و مشهوری رفتن سراغش!

برخی از شرکت ها و کمپانی هایی که از فریمورک Tailwind CSS استفاده میکنن، عبارتند از :

گوگل ( Google )
اسپاتیفای ( Spotify )
نتفلیکس ( Netflix )
ناسا ( Nasa )
مایکروسافت ( Microsoft )
لاراول ( Laravel )
گیت هاب ( Github )
و …

ابزار Tailwind Play !

تیم Tailwind CSS یه ابزار خیلی خفن و باحال در اختیار ما گذاشتن به اسم Tailwind Play !

ابزار Tailwind Play یک ادیتور آنلاین هست که روی مرورگر ما اجرا میشه و به ما اجازه میده که استایل های Tailwind CSS رو بصورت زنده تست کنیم و حتی خروجیش رو بصورت زنده ببینیم 🙂

این ابزار دقیقا مثل CodePen هست با این تفاوت که بصورت اختصاصی برای فریمورک Tailwind CSS نوشته شده.

با مراجعه به لینک پاراگراف بالا ( سایت تیلویند ) میتونیم از این ابزار استفاده کنیم. ویژگی های این ابزار عبارتند از :

یک HTML Editor قدرتمند که autocompletion ( تکمیل کننده خوکار کد ) داره!
یک CSS Editor قدرتمند!
تنظیمات جهت کانفیگ کردن Editor این ابزار!
فرمت کردن کد با یک کلیک ( Code Formatter )
یک Version Switcher ( جهت تعویض نسخه Tailwind CSS به نسخه های قدیمی تر یا جدیدتر )
یک Layout Switcher !
قابلیت Dark Mode / Light Mode در ویرایشگر !

چطور از فریمورک Tailwind CSS تو پروژمون استفاده کنیم ؟

فریمورک Tailwind CSS شامل مجموعه ای از استایل ها هست که بصورت کلاس های مخفف شده در اختیار ما قرار میگیرن. ما از فریمورک تیلویند سی اس اس تو هر پروژه ای میتونیم استفاده کنیم ( هر فریمورک یا کتابخانه ای )

نصب Tailwind CSS !

ما به دو روش میتونیم نصب Tailwind CSS رو انجام بدیم :

نصب Tailwind به روش CLI

روش CLI ساده ترین و سریع ترین روش نصب فریمورک تیلویند هست.

مرحله اول :

باید کتابخانه tailwindcss رو به کمک npm نصب کنیم:

				
					npm install -D tailwindcss
npx tailwindcss init

تو خط اول کتابخانه tailwindcss رو نصب کردیم و تو خط 2 فایل کانفیگ TailwindCss رو ایجاد کردیم. حالا باید داخل این فایل کد کانفیگ/تنظیمات زیر رو قرار بدیم :

				
					/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

تو خط 3 تیکه کد بالا، گفتیم که Tailwind CSS باید تمام فایل هایی که فرمت html یا js دارن رو بررسی کنه تا Class های Tailwind رو تبدیل به CSS خام کنه. ابتدای خط 3 آدرس پوشه src رو دادیم، یعنی صرفا فایل های داخل همین پوشه رو آنالیز کن.

میشه به جای آدرس پوشه src ، آدرس هر پوشه ی دیگه ای رو قرار داد، همچنین ما میتونیم فرمت فایلهای دیگه مثل jsx رو هم در کنار html و js قرار بدیم تا آنالیز بشن.

مرحله دوم :

فریمورک TailwindCSS تو سه لایه مختلف اجرا میشه، این لایه ها base , components و utilities هستن. برای اینکه این لایه هارو مشخص کنیم، باید یک فایل در مسیر src/input.css بسازیم و لایه هارو بصورت زیر داخل این فایل مشخص کنیم :

				
					@tailwind base;
@tailwind components;
@tailwind utilities;

مرحله چهارم :

حالا باید از Tailwind CSS بخوایم فایل های مارو اسکن کنه و تمام Class هایی که مشخص کردیم رو به CSS خام تبدیل کنه. این خواسته با وارد کردن دستور زیر تو ترمینال محقق میشه :

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

اجازه بدید تا دستور بالارو ریز به ریز بررسی کنیم …

تو بخش اول این دستور آدرس src/input.css رو دادیم ( این آدرس همون فایلی هست که تو مرحله سوم ساختیم ).

تو بخش دوم دستور بالا، آدرس فایل output.css رو دادیم.

این فایل شامل تمامی CSS های خام میشه که خود Tailwind میسازتشون ( کلاس های Tailwind رو که داخل فایل های خودمون پیدا میکنه، به CSS خام تبدیل میکنه و داخل این فایل قرار میده )

مرحله پنجم :

تو مرحله آخر باید از فایل output.css که خروجی Tailwind هست استفاده کنیم.

برای اینکار باید فایل index.html خودمون رو باز کنیم و آدرس فایل output.css رو داخلش قرار بدیم :

				
					<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  href="/dist/output.css" rel="preload">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    خدا برسه به دادت
  </h1> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://frontendi.com/wp-content/litespeed/js/60b5079420c218aead09c4aaef14f1e1.js?ver=aabdc"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

و تمام:)

به روش CLI تونستیم از فریمورک TailwindCSS استفاده کنیم. حالا بریم روش دوم نصب Tailwind رو بررسی کنیم ( البته اگه از روش اول استفاده کردید، دیگه نیازی به استفاده از روش دوم نیست )

نصب Tailwind CSS به روش PostCSS !

ما میتونیم TailwindCSS رو به عنوان یک افزونه/پلاگین PostCSS نصب کنیم. این ساده ترین روش برای ادغام TailwindCSS با ابزار های Build مثل webpack و vite هست.

مرحله اول :

تو مرحله اول باید tailwindcss رو به کمک npm نصب کنیم و فایل کانفیگ تیلویند رو ایجاد کنیم :

				
					npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

تو خط اول ما پکیج tailwindcss رو نصب کردیم و تو خط دوم فایل کانفیگ این فریمورک رو ایجاد کردیم!

مرحله دوم :

حالا باید tailwind رو به تنظیمات PostCSS خودمون اضافه کنیم.

برای انجام اینکار وارد فایل postcss.config.js میشیم و tailwindcss و autoprefixer رو به این فایل کانفیگ اضافه میکنیم :

				
					module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

مرحله سوم :

حالا باید مشخص کنیم که Tailwind باید چه فایل هایی رو اسکن کنه. برای انجام اینکار فایل tailwind.config.css رو در روت پروژه باز میکنیم ( اگه وجود نداشت، بسازید ) و کد زیر رو بهش اضافه کنید :

				
					/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

تو خط 3 تیکه کد بالا به Tailwind گفتیم که وارد پوشه src بشو و هرچی فایل با فرمت html و js دیدی اسکن کن. اسکن یعنی داخل این فایلها هرچی کلاس Tailwind پیدا کردی، به CSS خام تبدیل کن!

یعنی اگه Tailwind کلاس d-flex رو پیدا کنه، در نهایت به display : flex تبدیلش میکنه!

مرحله چهارم :

تو این مرحله باید لایه های TailwindCSS رو داخل فایل main.css قرار بدیم. کافیه فایل main.css رو بسازیم و لایه های زیر رو داخلش قرار بدیم :

				
					@tailwind base;
@tailwind components;
@tailwind utilities;

مرحله پنجم :

حالا برای اینکه Tailwind شروع به کار کنه، باید دستور زیر رو تو ترمینال وارد کنیم ( اگه دستور دیگه ای برای اجرا شدن پروژتون تنظیم کردید، از داخل فایل package.json و بخش scripts میتونید پیداش کنید ) :

				
					npm run dev

مرحله ششم :

عالیه! حالا میتونیم از کلاس های TailwindCSS توی فایل های خودمون استفاده کنیم. تو تیکه کد زیر از برخی کلاس های تیلویند سی اس اس استفاده کردیم :

				
					<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  href="/dist/main.css" rel="preload">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    خدا برسه به دادت 
  </h1> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" type="litespeed/javascript" data-src="https://frontendi.com/wp-content/litespeed/js/60b5079420c218aead09c4aaef14f1e1.js?ver=aabdc"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

خب تا به اینجای کار تونستیم Tailwind CSS رو به کمک دو روش مختلف نصب کنیم ( CLI و PostCSS )

حالا میتونیم از Tailwind CSS استفاده کنیم. فقط کافیه به سایت TailwindCSS بریم و با کلاس های Tailwind آشنا بشیم و بدونیم معادل هر استایل CSS در Tailwind چیه ؟

بطور مثال ما تو CSS خام از position : fixed استفاده میکردیم اما تو Tailwind باید از کلاس fixed استفاده کنیم :

				
					<div class="fixed"> // این اِلِمان پوزیشن فیکس داره
    
</div>

TailwindCSS جامعه آماری خوبی داره ؟!

قطعا بله !

درحال حاضر پکیج TailwindCSS در npm بیش از 6.5 میلیون دانلود هفتگی داره! و این نشون میده این فریمورک چقدر بین Front-End Developer ها از محبوبیت بالایی برخورداره 🙂

جمع بندی

فریمورک TailwindCSS فوق العادس و با تمامی فریمورک های CSS متفاوته! تو این فریمورک هیچ خبری از کامپوننت های آماده و از پیش ساخته شده نیست! البته این جز معایب TailwindCSS نیست!

اتفاقا این یکی از مزایای Tailwind CSS به حساب میاد، چراکه باعث شده تیلویند سی اس اس خیلی خیلی سبک و جمع و جور باشه!

اگه فِرانت اِند دولوپر هستید و هنوز سراغ TailwindCSS نرفتید، صادقانه پیشنهاد میکنم هرچه زودتر باهاش آشنا بشید 🙂

تو این مقاله سعی کردیم به این سوال پاسخ بدیم که Tailwind CSS چیست .. امیدوارم که این مقاله براتون مفید واقع شده باشه 🙂

Tailwind CSS چیست ؟

در پاسخ به این سوال که Tailwind CSS چیست ، میتونتیم بگیم که یک فریمورک Css هست که نسبت به سایر فریمورک های CSS از برتری بالایی برخورداره و طرفدار ها و جامعه آماری خیلی خوبی داره.

تیلویند یا بوت استرپ ؟

قطعا تیلویند !

وبلاگ

این مقاله شامل چه چیزایی میشه ؟

فریمورک Tailwind CSS چیست ؟

استایل با فریمورک Tailwind CSS

( به کمک تیلویند )

استایل با CSS خام

( بدون تیلویند )

Tailwind CSS

CSS

Tailwind CSS

CSS

Tailwind CSS

CSS

آموزش Tailwind CSS به زبان ساده! ( عملی و پروژه محور )

فریمورک Tailwind CSS رایگانه ؟!

طراحی آسون تر با Tailwind CSS در فرانت اند !

مقایسه Tailwind CSS و Bootstrap ( کدوم بهتره ؟ )

چه شرکت ها و کمپانی هایی از فریمورک Tailwind CSS استفاده میکنن ؟!

گوگل ( Google )

اسپاتیفای ( Spotify )

نتفلیکس ( Netflix )

ناسا ( Nasa )

مایکروسافت ( Microsoft )

لاراول ( Laravel )

گیت هاب ( Github )

و …

ابزار Tailwind Play !

یک HTML Editor قدرتمند که autocompletion ( تکمیل کننده خوکار کد ) داره!

یک CSS Editor قدرتمند!

تنظیمات جهت کانفیگ کردن Editor این ابزار!

فرمت کردن کد با یک کلیک ( Code Formatter )

یک Version Switcher ( جهت تعویض نسخه Tailwind CSS به نسخه های قدیمی تر یا جدیدتر )

یک Layout Switcher !

قابلیت Dark Mode / Light Mode در ویرایشگر !

چطور از فریمورک Tailwind CSS تو پروژمون استفاده کنیم ؟

نصب Tailwind CSS !

نصب Tailwind به روش CLI

نصب Tailwind CSS به روش PostCSS !

TailwindCSS جامعه آماری خوبی داره ؟!

جمع بندی

درباره احمد احمدنژاد

دیدگاهتان را بنویسید لغو پاسخ

صفحات فِرانت اِندی

تماس با ما

شبکه های اجتماعی