در این مقاله قصد داریم تا ۹ نکته عالی را با هم بررسی کنیم که استفاده از آن‌ها می‌تواند به ما به عنوان توسعه‌دهندگان فرانت‌اند برای بهره‌وری بیشتر در هنگام ساختن یک برنامه با Tailwind CSS کمک کند.
Tailwind CSS به دو دلیل مورد توجه بسیاری از توسعه‌دهندگان قرار گرفته است. اول این که، ساخت interfaceهای ریسپانسیو را بسیار آسان‌تر می‌کند. یعنی وقتی به تمام کلاس‌های utility تسلط داشته باشیم، واقعاً می‌توانیم خیلی سریع المنت‌های UI خود را از یک interface به interface دیگر طراحی و تنظیم کنیم. ثانیا، از آنجایی که ما فقط از کلاس‌های از پیش تعریف‌شده Tailwind CSS برای استایل دادن به کامپوننت‌های خود استفاده می‌کنیم، به این ترتیب یک قرارداد قوی در تیم فرانت‌اند ما ایجاد می‌شود که روند کار با یکدیگر را بسیار آسان‌تر می‌کند. در نهایت استفاده از Tailwind CSS به ما کمک می‌کند تا کد تمیزتر را سریع‌تر و با باگ‌های کم‌تر بسازیم.
!importantروی trueدر فایل پیکربندی Tailwindاین گزینه تمام کلاس‌های utility را با کلمه کلیدی !importantاضافه می‌کند.
استفاده از آن به ویژه زمانی مفید است که با کتابخانه‌های third-party سروکار داریم که به برخی از المنت‌ها، استایل اضافه می‌کنند. به این ترتیب، وقتی که یک کلاس utility جدید به این المنت‌ها اضافه می‌کنیم، مطمئن می‌شویم که همیشه اعمال خواهند شد.
// tailwind.config.js
module.exports = {
important: true,
};
اکنون، تمام کلاس‌های utility تیلویند به صورت !important ایجاد می‌شوند:
.mt-1 {
margin-top: 1px !important;
}
.mt-2 {
margin-top: 2px !important;
}
.mt-3 {
margin-top: 3px !important;
}
/* And so on... */
ما می‌توانیم برخی از تنظیماتی که لازم است تکرار شود را در فایل پیکربندی برای container تنظیم کنیم تا به شکل خودکار بر روی همه کلاس‌های .containerاعمال شود.
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
padding: "1.5rem",
},
},
};
به این ترتیب، نیازی به انجام این کار نیست:
<div class="container p-6 mx-auto"></div>
اکنون می‌توانیم به صورت زیر عمل کنیم:
<div class="container"></div>
ویژگی extendکه در فایل پیکربندی وجود دارد، به طور خودکار کلاس‌های جدید را برای پروژه ما ایجاد و اضافه می‌کند. زمانی که برای یک ویژگی CSS به کلاس‌های اضافه‌تری نیاز داریم، استفاده از آن می‌تواند بسیار مفید باشد.
به عنوان مثال، وقتی صحبت از max-height می‌شود، ما فقط به کلاس‌های زیر دسترسی داریم:
.max-h-full /* max-height: 100%; */ .max-h-screen /* max-height: 100vh; */
اما، اگر بخواهیم ویژگی max-height را با کمی دقت بیشتر با کلاس‌هایی مانند max-h-xs، max-h-smیا max-h-mdکنترل کنیم، چه کاری باید انجام دهیم؟
در ادامه چگونگی انجام این کار را در Tailwind CSS بررسی می‌کنیم:
// tailwind.config.js
module.exports = {
theme: {
extend: {
maxHeight: {
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"۲xl": "42rem",
"۳xl": "48rem",
"۴xl": "56rem",
"۵xl": "64rem",
"۶xl": "72rem",
},
},
},
};
پلاگین TailwindCSS Debug Screens این امکان را به ما می‌دهد تا صفحه نمایش فعال فعلی را در حالت توسعه نمایش دهیم. راه اندازی آن بیش از چند ثانیه طول نمی‌کشد و احتمالا در دراز مدت، زمان زیادی را برای ما صرفه‌جویی خواهد کرد. به این صورت می‌توانید آن را نصب کنیم:
npm install tailwindcss-debug-screens --save-dev
// tailwind.config.js
module.exports = {
plugins: [require("tailwindcss-debug-screens")],
};
پس از آن کلاس debug-screensرا به تگ <body>خود اضافه می‌کنیم.
<body class="debug-screens"></body>
براساس مفاهیمی که از بررسی مستندات موجود به آن می‌رسیم، preflight مجموعه‌ای از استایل‌های پایه برای پروژه‌های Tailwind CSS است که برای رفع ناسازگاری‌های موجود بین مرورگرها طراحی شده‌اند و کار کردن در چارچوب محدودیت‌های سیستم طراحی را برای ما آسان‌تر می‌کنند.
این بدان معناست که preflight تمام marginهای پیش‌فرض، اندازه فونت‌ها و غیره را برای همه المنت‌های ما مانند سرفصل‌ها، نقل قول‌ها، فهرست‌ها و غیره حذف می‌نماید.
برای انجام این کار به صورت زیر عمل می‌کنیم:
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
},
};
اگر طراحانی که در پروژه ما کار می‌کنند، طراحی را با breakpointهای متفاوت با موارد ارائه شده توسط Tailwind انجام می‌دهند، هیچ جای نگرانی وجود ندارد! فقط باید در فایل پیکربندی breakpointهای مورد نظر خود را تعریف کنیم. توجه به این نکته لازم است که در صورت لزوم می‌توانیم breakpointها را با هر دو تعریف min-width و max-width ایجاد کنیم.
// tailwind.config.js
module.exports = {
theme: {
screens: {
sm: { min: "640px", max: "767px" },
md: { min: "768px", max: "1023px" },
lg: { min: "1024px", max: "1279px" },
xl: { min: "1280px" },
},
},
};
// Will equal to
// tailwind.config.js
module.exports = {
theme: {
screens: {
sm: "640px",
// => @media (min-width: 640px) { ... }
md: "768px",
// => @media (min-width: 768px) { ... }
lg: "1024px",
// => @media (min-width: 1024px) { ... }
xl: "1280px",
// => @media (min-width: 1280px) { ... }
},
},
};
ویژگی spacing در فایل پیکربندی به ما این امکان را می‌دهد تا مقیاس spacing و یا sizing پیش‌فرض را لغو کنیم.
// tailwind.config.js
module.exports = {
theme: {
spacing: {
"۱": "۸px",
"۲": "۱۲px",
"۳": "۱۶px",
"۴": "۲۴px",
"۵": "۳۲px",
"۶": "۴۸px",
},
},
};
اگر از flexbox استفاده می‌کنیم احتمالاً به ویژگی orderعادت کرده‌ایم. اما متأسفانه Tailwind آن را شامل نمی‌شود. یک راه حل عالی برای این موضوع، استفاده از اکستنشن tailwindcss-flexbox-order است.
سپس می‌توانیم کلاس‌های flexbox order را با همه انواع ریسپانسیو پیکربندی و تولید کنیم. به‌طور پیش‌فرض، کلاس‌های utility که تولید می‌شوند عبارتند از:
.-order-1 {
order: -1;
}
.order-0 {
order: 0;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
.order-5 {
order: 5;
}
استفاده از apply می‌تواند منجر به مشکلات مربوط به نگه‌داری شود. اگر از فریم‌ورک‌هایی مانند Vue.js یا React (جایی که همه چیز را به عنوان کامپوننت تعریف می‌کنیم) استفاده می‌کنیم، اجتناب از استفاده از ویژگی @applyبسیار ساده است.
همچنین دلیل دیگری که باعث می‌شود از apply استفاده نکنیم به این صورت است که ما از کلاس‌های utility در کد خود استفاده می‌کنیم زیرا دیباگ کردن کد را آسان‌تر می‌دانیم. در نتیجه با توجه به این ما فقط یک مکان داریم که تیم ما می‌تواند استایل را کنترل کند (یعنی کلاس‌ها)، می‌توانیم ببینیم که کدام استایل برای هر تگ اعمال می‌شود.
بنابراین، توصیه می‌شود تا از ویژگی @apply با دقت زیاد استفاده کنیم تا بتوانیم در دراز مدت در زمان خود صرفه‌جویی کنیم.
دیدگاه‌ها: