در این پست، یاد خواهید گرفت که چگونه پیکربندی Tailwind خود را بین چندین بسته داخل یک monorepo به اشتراک بگذارید. توجه به این نکته مهم است که مثال ارائه شده در اینجا از فضاهای کاری NPM استفاده می کند، و اگرچه ممکن است مستقیماً برای راه حل های دیگری مانند Yarn، PNPM Workspace، Lerna یا Nx قابل اجرا نباشد، اصول مورد بحث همچنان می تواند مفید باشد.
نمونه راه اندازی Tailwind Monorepo
بیایید با بررسی نمونه راه اندازی پروژه ای که برای این توضیح استفاده می کنیم، شروع کنیم:
- packages
- ui
- web
- package.json
همانطور که می بینید ما دو بسته داریم. را ui بسته بسته مؤلفه UI را نشان می دهد که از آن همه مؤلفه های React خود را صادر می کنیم. همچنین به عنوان مکانی برای پیکربندی Tailwind ما عمل می کند که می خواهیم آن را در خود وارد کنیم web بسته بندی به خاطر داشته باشید که این رویکرد می تواند به سایر بسته های فضای کاری در monorepo شما نیز گسترش یابد.
راه اندازی Tailwind
قبل از اینکه به جزئیات اشتراک‌گذاری پیکربندی Tailwind بپردازیم، بیایید مطمئن شویم که تنظیمات لازم را در محل خود داریم. در این مثال، ما از Vite برای تولید برنامه React خود استفاده خواهیم کرد. برای شروع می توانید تنظیمات Tailwind را همانطور که در مستندات آنها توضیح داده شده است دنبال کنید. هنگامی که تمام دستورات لازم را اجرا کردید، web دایرکتوری باید حاوی فایل های زیر باشد:
- postcss.config.js
- tailwind.config.js
انتقال اطلاعات تم
با تکمیل راه‌اندازی اولیه، اکنون می‌توانیم پیکربندی قالب را به خارج از آن منتقل کنیم web بسته بندی
برای رسیدن به این هدف، با کپی کردن بلوک تم از فایل پیکربندی Tailwind خود که در آن قرار دارد شروع کنید packages/web/tailwind.config.js. ایجاد یک فایل جدید در packages/ui/tailwind.config.jsو بلوک تم کپی شده را در آن جایگذاری کنید.
مهم است که فایل پیکربندی را نام ببرید tailwind.config.js به طوری که ابزارهای توسعه دهنده می توانند موضوع شما را از بسته UI نیز تجزیه کنند.
اکنون فایل های شما باید به شکل زیر باشند:
packages/web/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./src/**/*.{js,jsx,ts,tsx}'
],
plugins: [],
}
packages/ui/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
theme: {
// ... your theme configuration
}
}
همانطور که می بینید، در داخل بسته UI ما، ما فقط اطلاعات موضوع را درج می کنیم. این رویکرد سودمند است زیرا ما نمی‌خواهیم پلاگین‌ها را در سطح جهانی پیکربندی کنیم، زیرا پروژه UI فاقد فرآیند ساخت است و افزونه‌ها را پردازش نمی‌کند.
در حالی که ممکن است وسوسه انگیز باشد که این پیکربندی را مستقیماً در خود قرار دهید web این پروژه، توصیه می شود افزونه ها را در پروژه های جداگانه نگه دارید.
اکنون، اجازه دهید موضوع خود را از ui در ما web پیکربندی خط زیر را به آن اضافه کنید packages/web/tailwind.config.js:
import config from '../ui/tailwind.config'
علاوه بر این، باید به Tailwind اجازه دهید تا اجزای رابط کاربری و فایل پیکربندی Tailwind را تماشا کند. این تضمین می کند که فرآیند ساخت شما می تواند پیکربندی تم خارجی شما را به روز کند.
برای انجام این کار، خطوط زیر را به آرایه محتوا اضافه کنید packages/web/tailwind.config.js:
{
"content": [
// paste it below your normal content configuration
'../ui/**/*.{js,jsx,ts,tsx}',
'../ui/tailwind.config.js',
],
}
وویلا! اکنون پروژه شما باید پیکربندی Tailwind خارجی را به درستی انتخاب کند و به شما امکان می‌دهد تم خود را در چندین پروژه به اشتراک بگذارید.
نتیجه
برای مطالعه این پست از شما سپاسگزارم. امیدوارم برای شما مفید بوده باشد! اگر از این مطالب لذت بردید و دوست دارید بیشتر بخوانید، در ادامه مطلب مرا دنبال کنید توییتر و Github.
اگر برای پروژه بعدی خود به یک کتابخانه ویرایشگر قوی نیاز دارید، حتماً Tiptap را بررسی کنید. این یک پروژه منبع باز است و ما همیشه از بازخوردها و مشارکت ها قدردانی می کنیم!
