اذهب إلى المحتوى
  • 0

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

Mohammad Kiblawi

السؤال

السلام عليكم 

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

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

ما السبب؟؟

 

Annotation 2021-08-08 225403.png

Annotation 2021-08-08 225459.png

تم التعديل في بواسطة Mohammad Kiblawi
تعديل
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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 بأننا نريد إستعمال كل الألوان
  }
  // ...
}

 

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

  • 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  اي لا تعمل الهوامش او الحشوة 

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

  • 0
بتاريخ 9 دقائق مضت قال Mohammad Kiblawi:

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

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

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

npm run watch

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

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

SxdcG.thumb.png.192b2de101dd683d8f94c84062894861.png

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

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

  • 0
بتاريخ 8 دقائق مضت قال سامح أشرف:

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


npm run watch

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

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

SxdcG.thumb.png.192b2de101dd683d8f94c84062894861.png

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

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

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...