یک راهنمای مقدماتی برای بادگیر و واکنش: الگوها و تنظیمات

از
عکس نمایه نویسنده

rfitzRyan Fitzgerald

برنامه کامل پشته با علاقه به ساخت پروژه های جانبی.

احتمالاً تاکنون نام Tailwind را شنیده اید ، اما اگر اینگونه نبوده اید ، tally یک چارچوب CSS برای اولین بار است و در مقایسه با سایر چارچوب های CSS مانند Bootstrap و Foundation بسیار کمتر مورد توجه قرار می گیرد.

مطابق گفته tailwindcss.com ، اینگونه توصیف می شود: یک چارچوب CSS سطح پایین بسیار قابل تنظیم که تمام عناصر سازنده مورد نیاز برای ساختن طرح های سفارشی را در اختیار شما قرار می دهد بدون هیچ نوع سبک آزار دهنده ای باید برای کنار زدن آن مبارزه کنید.

به نظر من ، این باعث می شود Tailwind گزینه مناسبی برای استفاده برای پروژه های شما باشد. مزایای پیشرفت سریع را خواهید داشت ، بدون داشتن سبک های فکری که در نهایت آنها را نادیده می گیرید.

بنابراین اگر بخواهیم از Tailwind with React استفاده کنیم ، چه ساده است اگر فقط شامل یک سبک باشد ورق؟ نه دقیقا. به دلیل نحوه ساخت Tailwind و برخی بهینه سازی های انجام شده (به عنوان مثال پاکسازی CSS بلااستفاده) ، چند مرحله اضافی برای تنظیم صحیح آن در یک پروژه React وجود دارد.

دریافت راه اندازی پروژه

برای شروع ، یا وارد پروژه React خود شوید یا پروژه جدیدی را با npx ایجاد-واکنش-برنامه tailwind-واکنش-واکنش دهید.

نصب وابستگی ها

بعد ، بیایید چند وابستگی را از طریق npm i @ fullhuman / postcss-purgecss postcss-cli tailwindcss نصب کنیم –save-dev.

توضیح مختصری در مورد هر وابستگی:

ایجاد پرونده های پیکربندی

اکنون که وابستگی های خود را نصب کردیم ، باید چند پرونده پیکربندی ایجاد کنیم.

ابتدا با اجرای

npx tailwind init در ریشه پروژه ، پیکربندی Tailwind خود را ایجاد کنید. در صورت تمایل می توانید برخی از پیکربندی های Tailwind را در اینجا به روز کنید.

بعد ، پیکربندی PostCSS خود را با ایجاد یک پرونده postcss.config.js در ریشه پروژه و اضافه کردن موارد زیر ایجاد کنید محتوا:

ساختار purgecss = نیاز ( ‘@ fullhuman / postcss-purgecss’ ) ({ محتوا : [ ‘./src/**/*.js’ ، ‘./src/**/*. jsx ‘ ، ‘ ./public/**/*.html ‘] ، defaultExtractor : ( محتوا ) => content.match ( / [A-Za-z0-9 -_: /] + / g ) || [] ،
}) ماژول .exports = { افزونه ها : [ نیاز ( ‘tailwindcss’ ) ، … (process.env.NODE_ENV === “تولید” ؟ [purgecss]: []) ، ] ،
}؛

در بخش اول ، ما به PurgeCSS نیاز و راه اندازی می کنیم. این به دو قطعه نیاز دارد. اولین مورد لیستی از پرونده های قابل پاک شدن است که شامل js ، jsx و html هستند (در صورت استفاده از TypeScript می توانید ts و tsx نیز اضافه کنید). HTML لازم است تا سبکهای پایه (به عنوان مثال body ، html و غیره) پاک نشوند.

بخش دوم برای تعریف عملکرد استخراج کننده (به عنوان مثال قوانینی برای کدام محتوا) استفاده می شود برای نگه داشتن). PurgeCSS ذاتاً ساده لوحانه است ، به این معنی که در انواع پرونده های ذکر شده در بالا به دنبال محتوایی می رود که با Regex مطابقت داشته باشد. دانستن این مهم است و هنگامی که در مورد الگوهای زیر بحث خواهیم کرد مجدداً مورد بررسی قرار می گیرد.

وارد کردن Tailwind CSS

اکنون که وابستگی های خود را داریم نصب و راه اندازی پرونده های پیکربندی ، در واقع می توانیم فایل CSS Tailwind را به برنامه خود اضافه کنیم. برای شروع ، یک پرونده tailwind.css در پوشه src / با دستورالعمل های Tailwind زیر ایجاد کنید:

@ tailwind base؛
اجزایtailwind؛
برنامه های کاربردیtailwind؛

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

در آخر ، بیایید فایل خروجی (که از طریق اسکریپت های ساخت در قسمت بعدی ایجاد خواهیم کرد) را وارد کنیم app.js بنابراین در سرتاسر برنامه ما به صورت جهانی در دسترس است.

import ‘./tailwind.output.css’؛

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

تنظیم اسکریپت های ساخت

آخرین مرحله برای کار کردن Tailwind ایجاد چند اسکریپت ساخت سریع برای اطمینان از اینکه فایل خروجی است ساخته می شود بیایید موارد زیر را به بخش اسکریپت های خود در

package.json اضافه کنیم:

“tailwind: build” : “NODE_ENV = تولید postcss src / tailwind.css -o src / tailwind.output.css “ ،
“tailwind: dev” : “postcss src / tailwind.css -o src / tailwind.output.css” ،
“prestart” : “npm run tailwind: dev” ،
“prebuild” : “npm run tailwind: build” ،

دو اسکریپت Tailwind جداگانه ایجاد کرده ایم. اولین

: build one برای ساختهای تولیدی است (به عنوان مثال PurgeCSS را که در بالا تعریف کردیم اجرا کنید) ، در حالی که مورد دوم ساخت dev است که CSS کامل Tailwind را حفظ می کند زیرا ما می خواهیم به همه سبک های موجود در حال توسعه دسترسی پیدا کنیم .

قسمت بعدی قبل از شروع است که ما قبل از خیره شدن به سرور توسعه React ، ساخت dev را اجرا می کنیم. شما می توانید یک قدم جلوتر بروید و یک اسکریپت ساعت اضافه کنید که تغییرات در tailwind.css را بررسی می کند ، اما من متوجه شدم که اضافات / تغییرات در این پرونده بسیار نادر است ، بنابراین در صورت بروزرسانی به راحتی سرور dev را راه اندازی مجدد می کنیم. < p class = "paragraf"> سرانجام ، آخرین قسمت اسکریپت پیش ساخت است که ساخت Tailwind (پاک شده) تولید را اجرا می کند که منجر به ایجاد یک فایل CSS می شود که فقط شامل سبک هایی است که ما واقعاً در برنامه خود استفاده کرده ایم. < p class = "paragraf"> همین! اکنون باید با برنامه Tailwind در برنامه React خود بیدار و فعال باشید. اگر می خواهید آن را یک گام جلوتر بردارید ، در بخش بعدی به برخی از الگوهای طراحی و خریدهای معمول هنگام برخورد با Tailwind در React می پردازم.

Design Patterns

اکنون که Tailwind در داخل برنامه ما اجرا شده است ، هنگامی که می توانیم برخی از الگوهای طراحی را که کار با آن را در اجزای React آسان می کند ، مورد بحث قرار دهیم.

چه چیزی انجام

قبل از پرش به برخی از الگوها ، فکر می کنم ذکر مواردی که نباید انجام شود ارزش دارد. چگونگی تصمیم شما برای استفاده از Tailwind در برنامه شما در نهایت به انتخاب شما بستگی دارد ، اما یک اشتباه رایج وجود دارد که می تواند شما را به سرعت دچار مشکل کند و این مربوط به تصفیه CSS استفاده نشده است همانطور که در بالا ذکر کردم. < p class = "paragraf"> بیایید برای توضیح مسئله به یک مثال نگاه کنیم. فرض کنید ما یک م inputلفه ورودی اساسی به شرح زیر داریم:

“border-2 border-grey-300 p-2” < / span> type = “text” />

حال ، فرض کنیم اگر در جایی خطایی وجود دارد می خواهیم مرز را به شرط قرمز تغییر دهیم. اگر متغیر state / prop خطا داشته باشیم ، ممکن است وسوسه شویم که انجام کارهایی مانند:

“border-2 border- $ {خطا؟ ‘red-500’ : ‘grey-300’ } p-2 “} type = “متن”
/>

در نگاه اول ، این درست به نظر می رسد. در واقع ، کلاسهای صحیحی را ارائه می دهد و در توسعه نیز عالی عمل می کند. با این حال ، هنگامی که نسخه تولیدی برنامه خود را ساختید ، متوجه خواهید شد که این سبک ها از بین رفته اند ، اما چرا اینگونه است؟ همانطور که قبلاً ذکر شد ، PurgeCSS برای ایجاد کوچکترین پرونده CSS Tailwind در برابر تولید ما عمل می کند. این به سادگی انواع پرونده های ارائه شده شما را بررسی می کند و سعی در یافتن محتوای منطبق با Regex دارد. در این حالت ، وقتی این پرونده را بررسی می کند ، با border-red-500 یا border-grey-300 مطابقت ندارد زیرا به صورت پویا ساخته شده اند.

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

“border-2 $ {خطا؟ ‘border-red-500’ : ‘border-grey-300’ } p-2 “} type = “متن”
/>

اکنون وقتی PurgeCSS در برابر این پرونده اجرا شود ، همه کلاسهای اضافه شده ما را حفظ خواهد کرد.

بیایید نگاهی به برخی موارد اساسی بیندازیم الگوهای بادگیر ما اکنون می توانیم در برنامه خود استفاده کنیم که می دانیم چه کاری نباید انجام دهیم.

الگوهای اساسی

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

به عنوان مثال ، در اینجا یک م aلفه اساسی وجود دارد: / p>

با استفاده از الگوی فوق ، کد جز component به شکل زیر است:

const class = { لفاف : ‘border-2 m-16 p-16’ ، عنوان : ‘text-grey-800 text-xl text-center font-bold’ ،
}؛ ساختار BasicComponent = () => { بازگشت ( < div className = {class.wrapper} >> < / span>

م Basicلفه اساسی div> )
}؛

این الگوی اساسی مزایای خوبی دارد:

  • تعریف م componentلفه را تمیز نگه می دارد ، خصوصاً اگر تعدادی عنصر وجود داشته باشد یا اگر نام کلاس طولانی شود
  • استفاده مجدد از کلاس در چندین مکان را آسان می کند. همچنین ، اگر نیاز به تغییر سبک دارید ، این کار را فقط در یک مکان در جز the انجام می دهید
  • همه کلاس ها به طور کامل در پرونده تعریف شده اند ، بنابراین با PurgeCSS مشکلی وجود ندارد
  • شما یک نمای خوب از همه سبک ها برای م componentلفه خود در یک مکان مرتب دریافت کنید

با این اوصاف ، وقتی م componentsلفه های پیشرفته تری پیدا می کنیم که باید به صورت حالت تغییر کنند ، چه کار کنیم یا لوازم جانبی در برنامه ما تغییر می کند؟ بیایید نگاهی به الگوی پیشرفته تری بیندازیم که این موضوع را گسترش می دهد.

الگوی پیشرفته

اکنون که یک الگوی اساسی شامل آن داریم تعریف همه کلاسهای ما بالاتر از م componentلفه ما ، ما می توانیم آن را یک گام فراتر ببریم وقتی شروع به م toلفه های پویاتر کنیم.

به عنوان مثال ، در اینجا یک م componentلفه پویاتر وجود دارد:

در تصویر صفحه بالا ، با کلیک روی دکمه هم دکمه و هم متن زیرنویس تغییر می کند. بیایید کد این م componentلفه را بررسی کنیم:

const class = { لفاف : ‘border-2 m-16 p-16 text-center’ ، عنوان : ‘text-grey-800 text-xl font-bold’ ، شرح : ( فعال ) => `my-6 $ {فعال؟ ‘text-red-900 font-medium’ : ‘text-grey-800’ } “ ، دکمه : ‘py-2 px-4 bg-grey-100 border-2 focus: outline-none’ ، buttonActive : ‘bg-grey-400’ ،
}؛ ساختار AdvancedComponent = () => { ساختار [فعال ، setActive] = useState ( false )؛ بازگشت ( < div className = {class.wrapper} >> < / span>

م Advancedلفه پیشرفته

من براساس حالت کلیک دکمه تغییر می کنم. دکمه < className = {clsx ([class.button، active && class.buttonActive])} onClick = {() => setActive ((prevState) =>! prevState)} > مرا کلیک کن div> )
}؛

اولین چیزی که باید به آن توجه شود کلاس توصیف است. برخلاف بقیه ، این یکی تابعی است که پارامتر (یا چند) می گیرد و در نتیجه یک کلاس کمی متفاوت (رنگ متن و وزن قلم) رشته را خارج می کند. این به شما امکان می دهد تا مزایای الگوی اصلی طراحی را حفظ کنید ، بلکه از جنبه شرطی نیز اضافه می کنید. همچنین لازم است توجه داشته باشید ، کلاسها نیز کاملاً تعریف شده اند ، بنابراین PurgeCSS هنوز مشکلی نخواهد داشت.

روش دیگر ایجاد کلاسهای پویا با حفظ الگوی اساسی همان کاری است که با دکمه و دکمه کلاسهای فعال. در این حالت ، از ماژول clsx برای افزودن پویا کلاسها بر اساس شرایط استفاده شد. کلاس class.button بدون شرط (سبک های پایه) اضافه شد ، با این وجود Class.buttonActive فقط در صورت فعال بودن اضافه می شود. این روش همچنین هنگامی که تعدادی کلاس به صورت مشروط به یک عنصر اضافه کرده اید یا اگر کلاس های شما کمی از کنترل خارج شده اند و می خواهید آنها را کمی از بین ببرید ، این روش نیز خوب کار می کند. یک بار دیگر ، PurgeCSS با تعریف کامل کلاسهای اساسی ، با این روش کارایی خوبی خواهد داشت.

نتیجه گیری

امیدوارم این به شما کمک کند تا با Tailwind در برنامه React خود را فعال کنید و به شما می آموزد که چگونه می توانید از آن در اجزای خود استفاده کنید به گونه ای که کار با آن راحت تر می شود.

اگر س ،ال ، پیشنهادی یا مشکلی دارید ، با خیال راحت در توییتر تماس بگیرید.

شما می توانید تمام کد منبع این پست را در یک الگوی شروع در اینجا پیدا کنید.

قبلاً در https://rfitz.io/blog/tailwind-with-react/