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

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

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

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

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

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

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

npm run watch

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

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

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

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

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

npm run watch

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

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

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

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