ایجاد یک پروژه با استفاده از هر دو Tailwind CSS و Primeng می تواند منجر به درگیری های یک ظاهر طراحی شده شود ، به ویژه هنگامی که Tailwind پس از Primeng وارد می شود. در این مقاله به بررسی این موضوع می پردازیم که چرا این اتفاق می افتد و یک راهنمای گام به گام برای حل موثر این مسائل ارائه می دهد.
درک درگیری
هنگامی که شما Tailwind CSS را با هم ترکیب می کنید ، یک چارچوب CSS برای اولین بار ، با Primeng ، یک کتابخانه مؤلفه برای Angular ، ممکن است با مشکلی روبرو شوید که اجزای Primeng پس از وارد کردن CSS Tailwind ، سبک های خود را از دست می دهند. دلیل این امر غالباً در ویژگی انتخاب کنندگان CSS و ترتیب بارگذاری برگه های شیوه ای نهفته است. کلاس های ابزار Tailwind و تنظیم مجدد جهانی ممکن است سبک های پریمنگ را نادیده بگیرند.
چرا این اتفاق می افتد؟
- ویژگی CSS: Tailwind CSS کلاسهای ابزار با ویژگی بالاتری را اعمال می کند ، که می تواند سهواً سبک های تعریف شده در Primeng را نادیده بگیرد.
- سفارش واردات: ترتیب واردات CSS می تواند به طور قابل توجهی تأثیر بگذارد که سبک ها از اولویت ها استفاده می کنند. اگر Tailwind پس از Primeng وارد شود ، سبک های Tailwind حاکم خواهد شد.
- تنظیم مجدد جهانی: Tailwind مجموعه ای از سبک های پایه خود را دارد که می تواند با موارد ارائه شده توسط Primeng برخورد کند.
برای استفاده موفقیت آمیز هر دو Tailwind CSS و Primeng در کنار هم ، باید اطمینان حاصل کنید که سبک ها به درستی در اولویت قرار گرفته و به ترتیب مناسب بارگیری می شوند. در اینجا آمده است که چگونه می توانید این مسئله را به صورت گام به گام حل کنید.
راه حل گام به گام
مرحله 1: تنظیم پروژه
یک پروژه زاویه ای تازه ایجاد کنید و هم Tailwind CSS و Primeng را نصب کنید. می توانید این دستورات را دنبال کنید:
ng new my-angular-app
cd my-angular-app
npm install tailwindcss primeng primeicons
مرحله 2: پیکربندی CSS Tailwind را پیکربندی کنید
ایجاد a tailwind.config.js پرونده اگر وجود نداشته باشد و آن را به شرح زیر تغییر دهید:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{html,ts}',
],
theme: {
extend: {},
},
plugins: [],
prefix: 'tw-',
}
اطمینان حاصل کنید که پیشوند تنظیم شده است تا از اسامی طبقه متناقض جلوگیری شود.
مرحله 3: پیکربندی زاویه ای را به روز کنید تا سبک ها را شامل شود
اصلاح angular.json پرونده برای اطمینان از سبک های Tailwind و Primeng به درستی درج شده است:
{
"projects": {
"my-angular-app": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
}
}
}
مرحله 4: Styles.css را تنظیم کنید
در شما styles.css، دستورالعمل های Tailwind را که به دنبال پرونده های Primeng CSS هستند وارد کنید:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";
این سفارش بسیار مهم است ؛ برای جلوگیری از نادیده گرفتن آنها ، باید سبک های Tailwind قبل از واردات Primeng بروند.
مرحله 5: اجزای خود را آزمایش کنید
در مؤلفه برنامه یا هر مؤلفه تست ، اجزای Primeng را به همراه یک ظاهر طراحی شده با پیچ و خم اضافه کنید تا ببینید آیا این کار می کند:
با استفاده از کلاسهای ابزار Tailwind در کنار اجزای Primeng ، باید هر دو مجموعه سبک را به درستی اعمال کنید.
سوالات متداول
Q1: آیا می توانم از Tailwind CSS با Primeng بدون درگیری استفاده کنم؟
بله ، با اطمینان از سفارش صحیح واردات و استفاده از گزینه پیشوند Tailwind ، می توانید به طور مؤثر از هر دو استفاده کنید.
Q2: اگر Styles Primeng هنوز اعمال نمی شود چه کاری باید انجام دهم؟
اطمینان حاصل کنید که برگه های سبک شما به ترتیب صحیح وارد شده و ویژگی قوانین CSS خود را بررسی کنید.
Q3: چگونه می توانم مضامین Primeng را با Tailwind سفارشی کنم؟
می توانید کلاسهای CSS سفارشی ایجاد کنید یا از کلاسهای ابزار Tailwind در کنار اجزای Primeng برای دستیابی به یک ظاهر طراحی شده مورد نظر استفاده کنید.
پایان
استفاده از Tailwind CSS و Primeng در کنار هم کاملاً امکان پذیر است ، به شرط آنکه شما سفارش واردات و ویژگی CSS را به درستی مدیریت کنید. با پیروی از مراحل مشخص شده و درک چگونگی استفاده از هر چارچوب سبک ، می توانید یک طراحی منسجم ایجاد کنید که از نقاط قوت هر دو چارچوب به طور مؤثر استفاده می کند.
