• 0

عدم اخذ تنسيقات tailwind css بشكل سليم

السلام عليكم 

انا اعمل على مشروع و عند القيام باضافة التنسيقات ال tail wind داخل ال classes لا تاخذ هذه التنسيقات شكلها السليم كما في الصورة ادناه

ف لون  خلفية الزر teal اما عند اظهاره على المتصفح يظهر بلون رمادي

ما السبب؟؟

 

Annotation 2021-08-08 225403.png

Annotation 2021-08-08 225459.png

تمّ تعديل بواسطة Mohammad Kiblawi
تعديل
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك التحقق من أن تنسيقات Tailwind CSS تعمل بشكل سليم أم لا من خلال أدوات المدورين DevTools، وفحص العناصر، فربما يكون هناك تنسيقات أخرى تغير شكل الأزرار.

إن كنت تستعمل PostCSS فيجب عليك إعادة بناء ملف CSS من خلال الأمر التالي:

npm run dev

ولا تنسى أن تضيف ملف CSS الصحيح إلى ملف layout:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

كما أنه قد تكون هناك مشكلة بسبب الملفات المؤقتة في المتصفح، أرجو منك أن تقوم بتجربة متصفح آخر أو حذف الملفات المؤقتة من متصفح الويب الخاص بك من خلال الضغط على Ctrl + Shift + del وتحديد كلٍ من cookies and other site data و cached images and files.

كما أرجو منك تجربة ألوان أخرى غير teal لأن هذا اللون ليس من الألوان الأساسية في الإصدار 2 من Tailwind CSS، في حالة ظهرت الألوان الأخرى بدون مشكلة فيمكنك أن تضيف كل الألوان الخاصة بـ Tailwind CSS من خلال عمل ملف tailwind.config.js عبر الأمر التالي (في حالة لم يكن لديك الملف مسبقًا):

npx tailwindcss init

بعد ذلك يمكنك تعديل الملف ليصبح بالشكل التالي:

// tailwind.config.js
// نستورد كل الألوان الخاصة بـ Tailwind
const colors = require('tailwindcss/colors')

module.exports = {
  // ...
  theme: {
    colors: colors	// نخبر tailwind بأننا نريد إستعمال كل الألوان
  }
  // ...
}

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 14 دقائق مضت قال سامح أشرف:

يمكنك التحقق من أن تنسيقات Tailwind CSS تعمل بشكل سليم أم لا من خلال أدوات المدورين DevTools، وفحص العناصر، فربما يكون هناك تنسيقات أخرى تغير شكل الأزرار.

إن كنت تستعمل PostCSS فيجب عليك إعادة بناء ملف CSS من خلال الأمر التالي:


npm run dev

ولا تنسى أن تضيف ملف CSS الصحيح إلى ملف layout:


<link rel="stylesheet" href="{{ mix('css/app.css') }}">

كما أنه قد تكون هناك مشكلة بسبب الملفات المؤقتة في المتصفح، أرجو منك أن تقوم بتجربة متصفح آخر أو حذف الملفات المؤقتة من متصفح الويب الخاص بك من خلال الضغط على Ctrl + Shift + del وتحديد كلٍ من cookies and other site data و cached images and files.

كما أرجو منك تجربة ألوان أخرى غير teal لأن هذا اللون ليس من الألوان الأساسية في الإصدار 2 من Tailwind CSS، في حالة ظهرت الألوان الأخرى بدون مشكلة فيمكنك أن تضيف كل الألوان الخاصة بـ Tailwind CSS من خلال عمل ملف tailwind.config.js عبر الأمر التالي (في حالة لم يكن لديك الملف مسبقًا):


npx tailwindcss init

بعد ذلك يمكنك تعديل الملف ليصبح بالشكل التالي:


// tailwind.config.js
// نستورد كل الألوان الخاصة بـ Tailwind
const colors = require('tailwindcss/colors')

module.exports = {
  // ...
  theme: {
    colors: colors	// نخبر tailwind بأننا نريد إستعمال كل الألوان
  }
  // ...
}

 

لقد قمت باستخدام ادوات المطور و لقد قمت بتغيير اللون الى لون آخر يدعم الالوان في tailwind ولكن لم يتغير شيء

حتى الهوامش m-3 او الحشوات p-3  لا تعمل فعند اعطائها قيمة اكبر من 3  اي لا تعمل الهوامش او الحشوة 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 9 دقائق مضت قال Mohammad Kiblawi:

لقد قمت باستخدام ادوات المطور و لقد قمت بتغيير اللون الى لون آخر يدعم الالوان في tailwind ولكن لم يتغير شيء

حتى الهوامش m-3 او الحشوات p-3  لا تعمل فعند اعطائها قيمة اكبر من 3  اي لا تعمل الهوامش او الحشوة 

هل يمكنك تنفيذ الأمر التالي:

npm run watch

يقوم هذا الأمر بمتابعة كل ملفات CSS و JS إن تم تعديلها ويعيد بناء كل من app.css و app.js 

عند إنتهاء الأمر من بناء الملفات فسيظهر لديك نتيجة مشابهةة للتالي:

SxdcG.thumb.png.192b2de101dd683d8f94c84062894861.png

بعد ذلك يمكنك أن تعيد تحديث الصفحة وإعادة المحاولة.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 8 دقائق مضت قال سامح أشرف:

هل يمكنك تنفيذ الأمر التالي:


npm run watch

يقوم هذا الأمر بمتابعة كل ملفات CSS و JS إن تم تعديلها ويعيد بناء كل من app.css و app.js 

عند إنتهاء الأمر من بناء الملفات فسيظهر لديك نتيجة مشابهةة للتالي:

SxdcG.thumb.png.192b2de101dd683d8f94c84062894861.png

بعد ذلك يمكنك أن تعيد تحديث الصفحة وإعادة المحاولة.

شكرا لك حلت المشكلة

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن