تنزيل الtailwindcss على لارافيل

أولاً تأكد من أنك تستخدم Laravel الإصدار 5.7 أو أعلى (Tailwind يتطلب الحد الأدنى 5.7).

ثانيًا الأمر الذي كتبته غير صحيح، فهو كالتالي في حال أردت التثبيت من خلال composer:

composer require laravel-frontend-presets/tailwindcss:dev-master --dev

وفي حال استمرت المشكلة، قم بحذف ملفي composer.json وcomposer.lock ثم حاول من جديد.

ومن الأفضل إتباع الطريقة المذكورة في المستند الرسمي لـ Tailwindcss من خلال الأوامر التالية:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

والآن ضع التالي في ملف tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

ثم في ملف ./resources/css/app.css ضع التالي:

@tailwind base;
@tailwind components;
@tailwind utilities;

ثم في ملف app.blade.php ضع التالي في عنصر head:

@vite('resources/css/app.css')

والآن تستطيع استخدام كلاسات Tailwind وعليك بتشغيل أمر npm run dev من أجل التقاط التنسيقات وتحزيم المشروع.

وإليك الشرح من خلال المستند الرسمي:

هناك عدة أسباب محتملة:

• مشكلة في اتصال الانترنت. تأكد من أنك متصل بالنت جيدًا وحاول مرة أخرى.
• سخة قديمة من Composer. تأكد من تحديث composer إلى آخر نسخة composer self-update.
• إصدارة قديمة من لارافل. تأكد أن لديك آخر إصدار من لارافل (>= 5.5) لدعم tailwindcss.
• خطأ في ملف الـcomposer.json. تأكد من وجود الإقتباسات الصحيحة وإعدادات الـminimum-stability و prefer-stable.
• خطأ بالمكتبة نفسها. قد تكون هناك مشكلة بالإضافة نفسها، حاول تحديد الخطأ الدقيق من رسالة الخطأ.

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

المشكلة تنشأ بسبب اختلافات الإصدار بين مكتبة المستخدمة و اطارعمل لارافل. حيث ان هذه المكتبة laravel-frontend-presets/tailwindcss لا تدعم أي اصدار من لارافل اكبر من الإصدار 8، في حين أنك تستخدم اصدار أكبر من ذلك ما أدى الى حدوث هذه المشكلة.

يمكنك التاكد من ذلك عبر موقع المكتبة على github. 

الحل هو:

composer require laravel-frontend-presets/tailwindcss --ignore-platform-reqs

حيث يسمح --ignore-platform-reqs بتثبيت المكتبة على الرغم من عدم دعم اصدار لارافل.

ولكن هذا قد يسبب مشاكل في المستقبل، فهو حل مؤقت.

 أفضل حل هو تجنب استخدام مكتبات غير مدعومة بشكل كامل، والبحث عن بديل مناسب.